Optimizing Image Tag Alt Attributes: Good Use and Abuse

About using a Alt attribute in your Image tag

As per the W3C Web Content Accessibility Guidelines, it is recommended to provide a text-equivalent for every non-text elements in case some of the users have visual impairments or if users have the image display turned off on their browsers.

Matt Cutts from the Google Web Spam team, has recommended in one of his video, to use the alt attribute of the image tag and the Google Webmaster guidelines also consider the use of the attribute in the development of a search engine friendly websites. The reason behind this is that search engines spiders are not able to 'read' the content in your image.. and therefore cannot index it without a text equivalent.

How to use the Alt attribute: Who should you trust?

Even if the alt attribute has only a moderate importance in the search engine algorithms, optimising them can have an impact on search engine rankings especially if you want to target the long tail of searches with content-poor pages.

I did some research and found a large amount of really basic information on how to optimize the alt attribute. But quite surprisingly, I came across mixed messages on how to 'properly' use the alt attribute:

According to the W3C, the content in the alt attribute should fulfills the same function as the image. On the other hand, Google Webmaster Guidelines quote that the alt attribute should be used to describe the contents of an image file.

This is quite confusing: Should we focus on the description or the function? In theory it does not seem to be a big deal, but in the practice, such confusion can lead to very different uses of the alt attribute.

Lets take the example of the image on the Amazon homepage:

Following Google's guidelines, a proper alt tag could be something like: Letter from Jeff Bezos annoucning the new products and services available.

Following W3C's recommendations, the function of the image is to inform customers that new products are available and therefore the alt tag should basically contain the entire text (what Amazon did). (Note: To be fully compliant with W3C guidelines, Amazon should have included a short description in the alt attribute and the entire content in a longdesc attribute, but let's not talk about this now)

Who should we trust? Google? the W3C? Yourself and your common sense? I would probably say a bit everything. As Google is the dominant search engine, you do not want to alert their spam filters (might have some) with some long or improper alt attributes.

If you are a leading website you also want to make sure that users with disabilities will be able to understand your content and therefore it is probably better to focus a little bit more on the function of the image rather than the description.

Moreover, the decision you make on how to use the alt attribute also depends on the type of image you have.

In the case of Amazon, providing a simple description of the image will be quite frustrating for a blind user as they probably wants to know what is in the letter instead of knowing that it is a letter (Still do not understand why Amazon did not use pure text for that ???)

For more practical examples and resources on alt attributes consult the NASA Section 508website

Optimizing Alt Attribute: Good Use and Abuse

While there is no clear guidelines, I have tried to summerize some of the good practices and bad practices I have noticed in my research. It is probably not the absolute truth, but these recommendations should help you to optimize your alt attributes correctly:

- If the image is used for layout/design purposes should have empty alt attribute (no space between the ""). Using irrelevant keywords in spacers or layout pictures is an abuse.

- If the image is used for navigation purposes, it MUST have a alt attribute that match with the keyword used in the image. Alternatively it should describe the linking page accurately. To avoid any issue, make sure you use the same term in the alt and image.

- If the image is used as a link, you should also have a alt tag equivalent to the title of the linking page. The content in the alt attribute of image links is usually regarded as more important.

- If the image contains a lot of text(e.g Amazon), use the text from the image in the alt attribute. For this one, I would be careful though! If the text is too long, it could risk to look suspicious, so I would advise to offer a summary or to use a longdesc attribute. Alternatively why using an image when you can use text ??

- Do not just stuff a list of comma-separated keywords in the alt attribute, try to make a sentence that describes the picture/function and includes some relevant targeted keywords in it. You might not be able to use all your targeted keywords in the alt tag of the same image, that is fine, you probably have more than one image.

- For individual product pages in E-Commerce stores, I would recommend to use the product name as the alt attribute of the product image. That will help ranking for the product name phrases.