Introduction to ALT Tags
When creating a website, an often overlooked attribute is the ALT tag. It appears in the html of a page and is used in 2 main ways:
- To help blind or partially sighted people who are using a screen-reader to know what each image on a page is.
- For SEO, as an addition to the file name, to tell search engines what the image is.
ALT tags appear in the code as follows:
<img src="example.jpg" alt="Description of the example image" />
The conflict between SEO and Screen-Readers
With some websites (e.g. fashion) describing each image probably meets the needs of both blind people using screen-readers and SEO, as the description of images will naturally contain the important keywords that you want to optimize your website for.
With other websites (e.g. education) the service that you’re offering may be less tangible and therefore describing the images won't necessarily allow you to include all the keywords. If this is the case with your site, then you can combine a description with the keywords, as the examples on the right-hand side show.
It helps with your SEO if you use the same or similar text near the image as the ALT tag. Also search engines can now read text that's part of an image and even though it's far from ideal to use images with lots of text on your landing pages, if an image has a small amount of text on it, then it makes sense to include that text within the ALT tag.
Google are now on the alert for keyword stuffing on websites. Keyword stuffing is where you artificially add the same keyword over and over and this will move your site further down the results, rather than helping it. The same is true for ALT tags, therefore if you have lots of different images on a page, it's best to simply label some of them with purely descriptive text and use the keywords relatively sparingly, particularly for sites where it's somewhat forced to include keywords in the ALT tags.
If you have an e-commerce fashion website and have a page with say 20 photos of the same pair of slippers from different angles, then it can be difficult to avoid keyword stuffing and you might be tempted to put e.g.:
- Pink fluffy slippers
- Pink fluffy slippers
- Pink fluffy slippers
It's better if each ALT tag on a page is unique and in this example we would recommend using keyword-rich descriptions for the first 3 or 4 images and for the other images, you could simply put <img src="slipper4.jpg" alt="top" /> or <img src="slipper5.jpg" alt="close-up" />.
Images that appear on every page of your website
Most websites have one or a few images that appear on every page of their site, for instance a logo and perhaps an image in the footer.
If every page of your website targets the same keyword (e.g. Slippers), then we recommend including this keyword in the ALT tag of one of these images, as this is a simple way to help optimize every page of your site for that keyword.
You don't need to put ALT tags on tiny images like lines or icons unless it would help a blind person to navigate your site.
Whether you're writing for SEO or a descriptive ALT tag for screen-readers, your ALT tags will vary, however you have to take both into consideration. This column gives some examples of how to merge both elements:
Descriptive: Teenagers sitting in a circle talking
SEO: Learning French in Paris
Final: Teenagers learning French in Paris
Descriptive: Two young men studying in a field
SEO: French Education
Final: French education outside with two students
Where an image has short text like this, it's often best to simply put the ALT tag as the text: "Learn French"
