Images are key to the design and usability of our websites, but without an alt tag they are invisible to search engines and people using screen readers. An alt tag is a bit of HTML which describes what the image is, so that if the image doesn’t appear it appears as text.
How does the alt tag fit into the HTML?
<img src=”http://dressitalian.com/sites/default/files/styles/recipe-page/public/recipe-images/Pasta%20with%20roasted%20peppers%20and%20Red%20Pepper%20%26%20Walnut%20pesto.jpg” alt=”pasta with roasted peppers & pesto” width=”459″ height=”577″ >
The first part shows the location of the image, ‘src=’, and the alt tag is preceeded by ‘alt=’. The final two ‘width’ and ‘height’ are examples of styling within the HTML.
How does this work with the overall page optimisation?
Although the alt tag should describe what the image is, it can be useful to tie it into the subject of the entire page. For example, the image above comes from the following page. We can see from the page’s title/h1 tag is the same as the alt tag which is also the same as the subject of the image:
This means that the search engines know exactly what the page is about. It will also help the image to appear in image searches.
Another important point to note is that it is a requirement in the UK to include alt tags to meet the minimum accessibility requirements. This is so that people using screen readers will still be able to view the content.