Google SEO: Image Alt Tags Best Practices
Text in Alt tags are ‘counted’ by Google (and Bing), but I would be careful over-doing them. I’ve seen a lot of websites penalised for overdoing tactics on invisible elements on a page. Don’t do it. ALT tags are very important and I think a very rewarding area to get right. Where relevant, I try to put the main keyword in an ALT once when addressing a page.
Don’t optimise your ALT tags (or rather, attributes) JUST for Google, though. Use ALT tags (or rather, ALT Attributes) for descriptive text that helps visitors – and keep them unique where possible, like you do with your titles and meta descriptions.
Don’t obsess. Don’t optimise your ALT tags just for Google – do it for humans, for accessibility and usability. If you are interested, I ran a simple test using ALT attributes to determine how many words I could use in IMAGE ALT text that Google would pick up.
And remember – even if, like me most days, you can’t be bothered with all the image ALT tags on your page, at least use a blank ALT (or NULL value) so people with screen readers can enjoy your page, too.
Update 17/11/08 – Picked This Up At SERoundtable about Alt Tags:
JohnMu from Google: alt attribute should be used to describe the image. So if you have an image of a big blue pineapple chair you should use the alt tag that best describes it, which is alt=”big blue pineapple chair.” title attribute should be used when the image is a hyperlink to a specific page. The title attribute should contain information about what will happen when you click on the image. For example, if the image will get larger, it should read something like, title=”View a larger version of the big blue pineapple chair image.”
Barry continues with a quote:
As the Googlebot does not see the images directly, we generally concentrate on the information provided in the “alt” attribute. Feel free to supplement the “alt” attribute with “title” and other attributes if they provide value to your users!So for example, if you have an image of a puppy (these seem popular at the moment :-)) playing with a ball, you could use something like “My puppy Betsy playing with a bowling ball” as the alt-attribute for the image. If you also have a link around the image, pointing a large version of the same photo, you could use “View this image in high-resolution” as the title attribute for the link.
Alt SEO Test – How many words will Google, Yahoo and Bing count as part of ALT Text on a page?
The basic premise was; take an ALT tag, and put a lot of nonsense keywords in it, and see if the page will return in Google for all (or any) the keywords. I confirmed with a similar test most search engines do count keywords in ALT text long ago. The following are observations from some testing I did back in 2011… which still seem to ring true in 2013.
Usefulness? I was thinking squarely from an accessibility point of view, not really spamming search engines. I think spamming ALT text can get you into trouble from what I have seen – probably depends on the site, and page, in question – or rather, the intent, as Google perceives it.
Yes, you can use other alternatives to describe complex images, but how many words will google count in the ALT tag anyway? Is there a limit?
Here is the ALT text I tested with:
- Google seemed to count the first 16 words in the ALT tag (well.. the Alt tag is an HTML Attribute) – of the image on this page – in this instance and interestingly in the snippet Google uses it does seem to completely cut of the rest of the ALT
- EDIT – that’s 16 words of 7 + 8 characters eachâ€¦. which might prove useful if you are using ALT tags to describe complex images.
- That’s potentially plenty of space to describe images properly for accessibility purposes and seo effectiveness.
If I remember I will check and add data for Yahoo and Bing.
I like doing these little seo tests just to have a poke about and see, for effective and practical best practice purposes. I have this kind of data on a lot of seo factors.
NOTE: On page SEO Tests are fun but you should always test for yourself on your own site anything I warble on about. This is just one example of a page I can observe and show ‘working a particular way’.
ALSO – This is a live running test – results might differ when Google caches the page, for instance.
Alt Text has SEO And Accessibility Benefits
ALT attribute text is a tenant of accessible website design and search engine optimisation. Failure to include ALT tags with images represents a Priority 1 WCAG error and would mean your website would not be able to comply with basic UK DDA and SECTION 508 (in the US) recommendations. Effectively, a text equivalent for every image should be be provided for visually impaired visitors, for instance. (e.g., via “alt”).
Non-text elements include: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.
Text is considered accessible to almost all users since it may be handled by screen readers, non-visual browsers, and braille readers. When a text equivalent is presented to the user, it fulfills essentially the same function (to the extent possible) as the original content. For simple content, a text equivalent may need only describe the function or purpose of content. For complex content (charts, graphs, etc.), the text equivalent may be longer and include descriptive information.
Non-text element does not mean all visible elements. The types of non-text elements requiring identification is limited to those images that provide information required for comprehension of content or to facilitate navigation.
- When an image indicates a navigational action such as “move to the next screen” or “go back to the top of the page,” the image must be accompanied by actual text that states the purpose of the image, in other words, what the image is telling you to do.
- When an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image.
- HTML allows content developers to specify text equivalents through attributes (“alt” or “longdesc”) or in element content (the OBJECT element).
<IMG src=”filename.gif” alt=”Place alt-text here”>
A very useful tip is to include empty alt tags (NULL ALT) for spacer images or graphic elements on a page used only for design purposes.
<IMG src=”filename.gif” alt=””>
This helps assistive software ignore these elements when ‘reading’ out the contents of a page instead of reading out “image, image, image” etc.