How to Use Alt Text to Improve Image Optimisation
By Elizabeth Nguyen Son | November 22 2017
Sometimes when searching for an image online, we can’t quite find what we are specifically searching for. Often this is due to bad image optimisation. Not only does this do a great disservice to those browsing the internet, but as a marketer, it also means your image is less likely to show up when relevant. This is where alt text comes in.
What is Alt Text?
Short for “alternative images”, the term refers to the worded description of an image when you hover over it with your mouse cursor. It also shows as text to all users when there are problems rendering the image. Additionally, it is used by screen readers that help the visually impaired navigate the web.
Why is Alt Text useful in Image SEO?
In simplest terms, it offers you another opportunity to include your target keywords. With on-page keyword usage still pulling weight as a search engine ranking factor, it’s in your best interest to describe the image and, if possible, include a keyword or keyword phrase you’re targeting. If you haven’t already optimised your keywords, you can read on how to do so successfully, here.
While search engine image recognition technology has vastly improved over the years, this technology still can’t “see” the images on a website page like we can. If they are unable to understand images or interpret them wrongly, it’s possible you could either rank for unintended keywords or miss out on ranking altogether. It is therefore important to know how to alt text efficiently.
How to use Alt Text
Apart from the file name, search engines visually impaired people have limited information to help them figure out what a web image is about. You can also look at tags like the “title” property, but a simple alt image tag is enough to tell Google and other search engines what the picture is about—and help you rank better in the search engine research pages (SERPs).
What you should aim for:
<img src="puppy.png" alt="white pomeranian puppy with its tongue out">
This is a more accurate depiction of what is in the image, which is ideal.
What to avoid:
<img src="puppy.png" alt="">
<img src="puppy.png" alt="puppy white pomeranian dog cute tongue pom pommy">
<img src="puppy.png" alt="puppy">
None of these examples are recommended. The first line of code doesn’t include any alt text, while the second includes too many keywords, known as keyword stuffing, and the third is not descriptive enough.
Pro Tip: Use the longdesc=”” tag for more complex images that require a longer description.
But what if an image doesn’t have a purpose and you can’t describe it? If you have images in your design that are purely there for design reasons, you’re doing it wrong. Put those images in your CSS instead of your HTML.
The Do’s and Dont’s of Alt Text
Don’t include “image of,” “picture of,” etc.:
It’s already assumed your alt text is referring to an image, so there’s no need to specify it.
Do keep it (relatively) short:
The most popular screen readers cut off at around 125 characters, so it’s advisable to keep it to that character count or less.
Do use your keywords:
Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image if it makes sense to do so, include your keyword in the alt text of at least one image on the page.
Don’t neglect form buttons:
If a form on your website uses an image as it’s “submit” button, give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button like, “search”, “apply now”, “sign up,” etc.