Friday, 3 September 2010

Alt tags - what are they and what do they do?

Alt tags (or alternative text tags) are used to describe images that are used on a web page. They're used for a number of reasons, not least of which is to help Google identify what an image is (they're working on image recognition software but aren't there yet). You also need alt text present to validate your XHTML.

So what is an alt tag and how do you write one.

Well to answer the first part of this question I will refer you to the following video by Matt Cutts of Google:

As Matt tells us, the alt text shouldn't be too long and shouldn't have keywords stuffed in to it.

However, there are some hints and tips we can share to help you get the most from your on-page images. Before I get onto that however I'll make a very obvious statement. If you would like to optimise your images, think carefully about which images you select. The better, more relevant the image, the easier it will be to legitimately optimise your web pages' images with quality alt text.

1) Follow image search and type in your domain (eg: The images that are retrieved are the ones that have alt text.
2) Remember that the use of alt tags is not only for the benefit of Google spiders, but also for overall accessibility ie. for partially sighted people where a browser may read out the alt tag descriptions to the user
This will indirectly help your google ranking because you will be complying with accessibility regulations.
3) Make sure you save your file with an accurate description or keyword before uploading it. For example image1.jpg isn't much help. However, 'wavesonbeachinfrance.jpg' is much more descriptive.
4) Perhaps you won't be able to describe the image in the alt text. There are other tags you can use such as the longdesc tag.


  1. It's great to see you promoting the use of 'alt' tags, many site even today still aren't using them. However there are a couple of points that you need to be careful not to mislead on.

    You shouldn't necessarily use .jpegs. All modern browsers will also support .gif and .png format. You should use the format that best suits your image, considering things like the final file size and the final quality in each format and whether you want things like transparency in your image (something .jpegs don't support.)

    It also is worth mentioning that ALT tags are massively important to the accessibility of your site. Visually impaired site visitors, using a screen readers will hear the alt text in place of the image.

    As best practice - If an image is purely on the site for aesthetics it should be put in the page using styles rather than as content.

    Separating these style elements from your content makes your site more accessible to end users with assistive technologies and may also help with your content display on more non-standard browser such as those used mobile phones (particularly older models).

    If in doubt, ALWAYS use an 'alt' tag on your web images.

  2. I agree with most of this but I have to pick apart a few points.

    Firstly, if the image is there purely for aesthetic value, surely it should be a background and not an image? ALT tags are there for accessibility too, not just SEO. If you leave the tags blank, what's the point in showing the image? It's just irritating and confusing to those using screenreaders.

    Also, what's this about ensuring images are in JPEG format? That's utter nonsense. Google knows and searches for a plethora of filetypes. You can even filter for GIF, PNG and BMP files.


Popular Posts