Adding alt text to your images if the first rule of image SEO and it’s also a key principle of web accessibility.
This is an in-depth article about the alternative text attribute: from what is an alternative text to how to perfectly write them.
I have added to this tutorial several examples of optimized alt for SEO with explanations.
Let’s get started!
What is an alternative text (alt) ?
<img src="notre-dame-paris.jpeg" alt="Notre dame de Paris during day time before the burning" />
An alternative text is an html attribute that should always be added to your image (<img>) elements. Alt texts provide a textual alternative to visual content in web pages.
Alt texts are a textual alternative for images
The textual alternative should describe the appearance and function of the image on the page. People often forget to include the function of the image when they fill out alternative texts. Mentioning the function is not really important for SEO, but it’s key for accessibility.
Alt attributes apply to every image format
Alt tags should be applied whatever is the image format: the attribute is indeed compatible with JPEG, WebP, PNH, GIF, etc.
If the image you are displaying has no function or editorial purpose the alt text can be left empty.
<img src="useless-picture.jpeg" alt="" />
Alternative text, Alt text, alt tag, alt description and alt attribute: ALL THE SAME!
Technically speaking you should not use the term alt tag to refer to alternative texts because it’s not a tag, but a possible attribute of img elements. However, who cares?
Alternative text, alt text, alt tag, alt description, alt attribute: they are synonyms and designate a text alternative to an image.
Alt text and title text (or title tag) are nevertheless different.
It’s important for accessibility and SEO to pay attention to your alternative text but you can ignore Title text.
Title texts are just there to give a title to your pictures. Search engines don’t care about them: they are thus useless for search engine optimization. Title tag optimization should therefore be your last priority.
That’s one of the reasons why our Image SEO Optimizer for WordPress adresses the issue of Alt text but not Title text.
In its article Using ALT attributes smartly Ríona MacNamara from Google Webmaster Tool Team told us:” Googlebot does not see the images directly, we generally concentrate on the information provided in the “alt” attribute.“
If you want to know more about it, I invite you to read my article about the image attributes optimization for SEO.
Why Alt texts are important for SEO and accessibility?
The link between ALT text, Search Engines and Organic Traffic
With the raise of Artificial Intelligences, Google and Bing are able to read your pictures. However, they don’t do it because it would be too slow and expensive for them. That’s why alternative texts are so important for SEO and image SEO: they offer you the possibility to tell Google what are your photo about in a few keywords.
I write this sentence in almost all my articles or guide, but in-page SEO is almost only about helping Search Engines to understand your content.
An image with a bad name and no alt text will poorly rank in Google Image search results but not only.
Alt texts improve in page SEO
Images with no alternative text constitute a grey area on your page for Search engines. Helping Google to unlock the secret of your images also improve the global semantic of your website.
Alt tags are fundamental for accessibility and user experience
Nowadays, having access to internet is almost a human right. Your site should therefore be accessible to everybody. Visually impaired or blind people too and that’s why alternative texts are important.
Providing a textual alternative to your photos allows people using screen readers or Software such as JAWS and NVDA to literally read your images even tough they can’t see them.
Adding alternative texts to your pictures is the right thing to do. Moreover, it’s a market of millions of people all over the world.
Also, Title III of the Americans with Disabilities Act prohibits discrimination based on disability. There is a growing number of legal cases regarding website accessibility and more and more judges are stating that online retailers must comply with the ADA regulation.
How to perfectly write alternative texts?
This being said, let’s focus on what you probably came for: how to perfectly write alternative texts?
I said previously that the function and context were key. Every time an image plays a function on your page should provide a textual alternative. The other way around, when an image is purely decorative, the alternative text can be left empty.
Let’s practice !
Best SEO practices for alternative texts in 2020
Images part or linked to your editorial content
When an image is somehow linked to your editorial content, you must provide a textual alternative. This includes the photos you might use in your blog articles, your product sheets, etc.
When determining how to write appropriate alternative texts for images, context is everything. One alt for one image may be vastly different based upon the context and surroundings of the image itself.
Good alternative texts are short, but descriptive, present the content enhance context and give the function of the image if necessary. Let’s practice!
Optimized alt texts for SEO examples
Perfect Alt for SEO: Cathedral Notre Dame de Paris surrounded by clouds
Decent Alt for SEO: Notre Dame de Paris
Bad alt for SEO: Cathedral
Perfect Alt for SEO: Adult Red Kangaroo in the Australian desert
Decent Alt for SEO: Red Kangaroo
Bad alt for SEO: Kangaroo
Perfect Alt for SEO: White rose flower in a natural garden
Decent Alt for SEO: White rose
Bad alt for SEO: Flower
Perfect Alt for SEO: Tesla car carrying with electricity on a parking
Decent Alt for SEO: Tesla on a parking
Bad alt for SEO: Car
A long time ago, in a wonderful world dominated by internet explorer 6, HTML and CSS were not offering much possibility to front-end developers.
Front-end developers did not even exist because the only way to make something esthetic was to put an image in a table element. No border-radius, no shadow-box, etc.
One of the consequences was that people were using images for their menu. In such situations, it is necessary to provide an alternative text to the image.
In our example, each item of the menu should have an alt text: “Brachiosaurus” for the first link, “Gallimimus” for the second, etc.
There is no need to add “Link to” because the image will be identified as being within a link.
Thanks to common sense, Google, Mozilla Firefox and the w3c.org, functional images are slowly disappearing.
How to spot if an image is decorative or not? You have to answer a double question.
- Is the image somehow linked to the content I am talking about?
- Is this image providing important functions, such as navigation?
In this situation, the stars close to the WordPress logo are mainly decorative.
Indeed, they are not directly linked to what we are talking about and they are not not functional at all, since they are not providing an external link to our amazing WordPress reviews.