Your images may not be your first thought when it comes to optimising your website. However, image search is becoming a popular way we like to find information.
So how do you make sure your images are optimised correctly for search engines? Well, you do this by adding Alt Text. You may have heard of it before, but what does Alt Text mean?
Alt Text or alternative text is the written description of an image that is displayed in its place if it fails to load.
Let’s take a look at this in more detail and try to understand why we use it, how to write it and how we can add Alt Text to our website to improve Search Engine Optimisation (SEO).
What we’ll cover in this post:
- What is Alt Text?
- Why do we use Alt Text?
- What should Alt Text say?
- When should you not use Alt Text?
- Types of images that need Alt Text
What is Alt Text?
Alt Text can be referred to in a few ways. Its full name is Alternative Text, which makes sense really as it’s displayed when an image doesn’t load (however it’s always available to screen readers).
It can also be known as an Alt Attribute or an Alt Description, again quite logical names if you come across these secondary references.
This HMTL entity is an informative written description of an image, giving the reader an explanation of what the image shows, in the event that it is not displayed.
Why do we use Alt Text?
Well, for a few reasons really.
Firstly and most importantly, the Alt attribute is part of the accessible design laws in the UK, so you should use them on all images within your site.
Secondly, there is a responsibility as website owners to ensure our sites are built for users with visual impairment, such as blindness.
For these customers, Alt Text is invaluable as it allows screen readers to read the text out loud, giving a much better user experience when browsing.
If the images were not optimised correctly with alt descriptions, a screen reader would not be able to do this, leaving the browser unable to find the information they require.
The screenshot below shows what would happen if the ‘Football Boots’ image doesn’t load on this page. As you can see, a screen reader would read the Alt Text and provide the user with a relevant description.
Finally, for SEO purposes. The reason why you MUST optimise your images using alt attributes is for inclusion in Google image search rankings.
A benefit of using Alt text is that it gives you the opportunity to include one of your primary keywords within the image description.
This basically tells the search engines that the image is relevant to that search query and should be returned to a user if they search for that term within the image search results.
It’s worth knowing that Google provides its customers with nearly the same amount of image search results as they do for more traditional text-based search results.
This means you can benefit from a whole other traffic stream – Google Images! The image below shows the results given for the image search term “Football Boots”.
What should Alt Text say?
The short answer is, that it should describe exactly what the image is showing. This is correct, but there are best practices that should be considered when writing your Alt descriptions.
- Avoid keyword stuffing
- Be descriptive and informative. Think about what you are describing and be relevant to your subject
- Use less than 125 characters, due to screen reader limitations
- Don’t start the description with “An image of..” or “A Picture of…”, Google already knows it’s an image from the HTML tag
Example of Bad Alt Text:
“Image of a Quarterback”
Example of Good Alt Text:
“American Football Quarterback Steve Smith during play against Arizona Cardinals”
When should you not use Alt Text?
Although you should add this attribute to all images that form part of your page, there are some images that don’t provide context to the users and therefore don’t require it.
Decorative images and design elements that form part of the structure of the page do not require the use of Alt Text.
They don’t usually form part of the content that the user is reading and make no sense when screen readers try to scan them. Think about the relevance of your images and whether they are informative or not.
Types of images that need Alt Text
If it’s informative, it needs it:
- Images that provide context to a user
- Images that are buttons or containing a link when clicked
Alt Text is not only a valuable asset to you as business owners, but it’s invaluable to users with accessibility issues.
Our websites need to cater for all people who visit them. Using Alt Text is just one way that we can ensure our users, no matter what their ability, can visit and understand them.
If you scroll back up to the section where I give examples of ‘Good Alt text’. Imagine reading this post without the images there, it wouldn’t make sense, would it? The image provides context.
Now read it again, but this time imagine that instead of an image it said: “American Football Quarterback Steve Smith during play against Arizona Cardinals“. This would be enough to give context to what you are reading, wouldn’t it?
This is the power of Alt Text.
You can actually get a better understanding of what a screen reader will ‘see‘ by going to ‘View>Page Style>Basic Page Style‘ in your browser. This gives you a ‘Text Only’ view of your page.
Are you looking to grow your business and invest in SEO? Do you require a strategy that will help you increase traffic to your website, drive sales and improve ROI?