Image Alt Attribute

When you put an image on your web page, you can also specify “alternative text.” This attribute serves several purposes:

• If your image is broken, or has moved, the page will display this text so people will at least know what you intended to show them.
• It tells search engines and users (especially those with vision disabilities) what the image is about. This is especially critical for those with vision disabilities, many of whom use screen readers to “read” your web page to them.
• When wrapped in a link, it acts like anchor text (though maybe not quite as much SEO weight as a text link, but important nonetheless).

Here’s an example of what it looks like in HTML:

<img src="http://www.example.com/images/bluewidget.jpg" alt="Blue Widget Image" />

The alt= is the attribute and Blue Widget Image is how we defined it.

To craft effective image alt text, just describe what the image shows. Use relevant keywords, but don’t overdo it – remember, this should make sense when people read it or hear it via a screen reader.

For images that aren’t links, make sure you use the targeted keyword phrases for the current page. The image alt text should help further clarify what this page is about.

If your image is wrapped in a link, then use the target keyword phrases of the destination page (just like you would with a normal text link).

Images used as stock design elements (i.e. not relevant to page content, like background images, etc) don’t need keywords in the alt text. Ideally, these will be added with the CSS background property anyways, so adding alt text won’t even be an option.