Alt text stands for alternative text but is also commonly referred to as alt attributes, alt descriptions and alt tags (even though it is technically not a tag).
Alternative text lives in the code of a web page and it should describe what the image is and its function.
<img src=”filename.jpg” alt=”A description of the image goes here” />
The highlighted text below shows what the alt looks like within the code.
For those of you who cringe at the thought of using HTML, don’t worry. WordPress and other current content management systems allow users to add alternative text to an image without seeing a single line of HTML.
Why add alt text to images?
Alternative text is important for:
- SEO (search engine optimisation)
Alt text for accessibility
Firstly, if a browser is unable to display the image (perhaps because images have been disabled or there is poor connectivity) alt text will appear in its place.
Secondly, alt text is picked up by screen readers. Screen readers enable people with disabilities, including blind or visually impaired users, to read content on websites.
Therefore, the more descriptive and logical your alt text is, the more accessible your web page will be. And by being more accessible, your website will offer a stronger user experience.
Alt text for SEO
You want to attract as many visitors to your website as possible, so it’s advisable to do as much as you can to improve your ranking on Google. Google is a fan of alternative text. The more accurately you describe your image, the more accurate Google’s search results will be.
Google’s Image publishing guidelines offer some useful tips on adding alt text to images, as well as general guidance on publishing images on your website.
Examples of alt text
So, what should my alt text be?
<img src=”dog.jpg” alt=”dog”>
This is not recommended. It’s vague and gives no clue as to what type of dog it is, what the dog is doing or what link this has to my content.
<img src=”dog.jpg” alt=”border collie”>
Still too vague. Is the dog sitting, standing, running, sleeping? How does this add value to my content?
<img src=”dog.jpg” alt=”border collie and ball”>
Better but this still doesn’t give an accurate description of what is happening in the photo or why it links to my content.
<img src=”dog.jpg” alt=”border collie chasing a ball along the beach”>
Great, this pretty much sums up the picture!
How to write good alt text
Here are some key points to help you write good alt text:
1. Describe your images accurately
Don’t be vague. The purpose of alt text is to explain the content of images for user who can’t see them.
2. Don’t load alt text with keywords
Google doesn’t like websites that try and boost their ranking by stuffing the alt text with keywords, for example alt=”dog, puppy, collie, border collie, sheepdog”. It’s fine to use some keywords in your alt text, providing they are used in a descriptive way.
3. Be relevant
Use alt text that is relevant to the image and use an image that is relevant to your content. Your content should always intend to add value to the user. Therefore, don’t just add an image because you think it looks nice. Think about whether this will improve the content and be relevant to what you are writing about.
4. Keep your alt text concise
Although it’s important to describe the image, it’s also advised to keep it within 125 characters. Some screen readers will cut off text over this character limit.
5. Don’t embed important text within images
If your image contains text, it’s important to understand that this won’t be read by screen readers or search engines. So, if you have to use an image that contains text, make sure you describe this in your alt text. If you have something important to say, such as ‘50% off all books’, perhaps it’s better to add it within the body of your content, or even as a heading, rather than an image.