1. Glossary
  2. Content Marketing
  3. Alt Attributes, Alt Text & Alt Tags

Alt Attributes, Alt Text & Alt Tags

The alt attribute is designed to provide alternative text in the case that the image cannot not be seen.

An alt tag is placed in the code surrounding an image and is usually only visible when the image does not or cannot load.

The main audience for this was, and still is, the visually impaired.

However, alt tags are also very useful for helping search engines (which are not yet sophisticated enough to interpret visual information) understand the content of an image.

Search engines place a lot of emphasis on the contents of the alt attribute and for this reason alt tags represent a high value SEO opportunity.

See what Google has to say about optimising alt attributes. Link to Google

How can I view alt tags?

In the code, the syntax for an alt attribute is:

<img src="img.png" alt="text" / >

Thus when viewing the code of a webpage an alt tag might show up like this:

<img src="http://www.goup.co.uk/img/image-optimisation-graphic.jpg" alt="Infographic" />

In this example, the alt attribute reads: Infographic explaining image optimisation.

So long as this is an accurate account of the content of the image, this provides a highly valuable piece of information to search engines.

The SEO benefit of the alt tag is particularly apparent in visual industries. A shoe retailer for instance would ensure all images have alt tags detailing the colour and style of the shoe, for example: “black patent leather kitten heel”.

Google and other search engines will then index this image along with the content on the page, and the image will help to boosting the relevance of the page any search terms relating to “black patent leather kitten heel”.

The alt tag also impacts whether and how an image shows up in Google’s image search vertical.

Don’t over-optimise alt attributes

Their potency in search has made alt tags easy targets for over-optimisation. This involves writing alt tags that are keyword heavy rather than descriptive of the images.

For example, assigning the following alt attribute to an image on a blog post about Google’s Penguin Update: “How Google’s Penguin Update Affects Your Website” when the image depicts a group of huddling penguins. The appropriate use of alt text in this case would simply be: “Huddling group of penguins”.

Google has since started incorporating misuse of alt text into its algorithm and as a rule, alt text should be limited to labelling images.

When using images that are purely decorative, you can skip the alt tag, which in the code would look like this:

<img src="image.png" alt="" />

Hover-over alt text?

Users of Internet Explorer 7 and earlier may recall seeing alt text show up on hover-over. According to recent html specifications, this is no longer the correct behaviour.