Learn how to write alternative text for images with 10 ALT text examples

Author Benjamin Denis
|
Posted on
| No Comments on Learn how to write alternative text for images with 10 ALT text examples
Learn how to write alternative text for images with 10 ALT text examples

WordPress provides a link to The ALT Decision Tree provided by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) just underneath the Alternative Text field in the Media Library. This resource helps users understand when alternative text is needed for an image and what it should contain.

They give examples of ALT texts including this example for an informative image for which their suggested ALT text is “Dog with a bell attached to its collar”.

Example of ALT text best practice from W3C
Example of ALT text best practice from W3C

Whereas the W3C guide is useful and correct, we thought it would be interesting to give examples more orientated SEO, taking into account keywords that you want to target in Google using the image.

What’s the difference between ALT, ALT text and Alternative text?

None. Alternative text is synonymous with ALT or ALT text. ALT is the name used in HTML to code the alternative text attribute of an image IMG tag.

In the example above the HTML code is:

<p>

 <img src="dog.jpg" alt="Dog with a bell attached to its collar."/>

 Off-duty guide dogs often wear...

</p>

The alternative text, “Dog with a bell attached to its collar”, is after alt= and is between quotes.

Alternative text is invisible to most users. It can read aloud by screen readers for visually impaired users and will be displayed by browsers if an image cannot be loaded. When writing ALT text, it may help you to think of the text being read aloud and preceded by “And now, an image of …”

Importantly for SEO, Google does “see” ALT text and indexes it with the image. For Image SEO purposes, you should provide at least one informative image on every page and include your targeted keyword in the alternative text of at least one image, ideally the featured image or first image in the post.

If we wanted the image above to rank in Google Images for the query “Dog collar bell”, the ALT text suggested by W3C would not be optimized. But just using “Dog collar bell” as the ALT text is not the best practice either.

Every ALT you provide should be a unique sentence including your keyword.

10 ALT text examples

Example 1: Dog collar bell

In this case we will use an example given by W3C but imagine that the image is used on a product page targeting the keyword “Dog Collar bell” which is searched 2100 times per month. We use the keyword in the ALT text but also add some extra detail on the content of the image.

ALT: Dog collar bell worn by a Labrador dog

Dog collar bell worn by a Labrador dog
Dog collar bell worn by a Labrador dog

Example 2: VW Beetle roof rack

This is the example we used in the chapter “How to Optimize an Image for SEO in WordPress. We are going to imagine that you have taken the photograph below and it will be used as the main image for a blog post you are writing entitled, “The complete guide to VW Beetle roof racks”. The keyword you are targeting is “VW Beetle roof rack” which is searched on average 720 times per month in Google worldwide.

ALT: Metal VW Beetle roof rack viewed from the side

Metal VW Beetle roof rack viewed from the side
Metal VW Beetle roof rack viewed from the side

Example 3: Porsche 718 Spyder for sale

Another car example from an earlier chapter, “An Image Can Sell a Thousand Cars”, this image features a Porsche 718 Spyder for sale at a dealership in Beverly Hills. The dealer is targeting the keyword “Porsche 718 Spyder for sale”. A keyword searched 1800 times per month on average across the world. The keyword can be prominent in the ALT text, but it seems important to use the word “yellow” when describing the image.

ALT : Yellow Porsche 718 Spyder for sale

Yellow Porsche 718 Spyder for sale
Yellow Porsche 718 Spyder for sale

Example 4: Google Home (Product)

In this example we look at the tricky problem of writing alternative text for many photos of the same product. Every ALT text should be different. In this case we have 4 photos for a product page selling a Google Home. The keyword targeted (and this is very ambitious) is “Google Home” which is searched 1.3 million times in Google per month in the world.

ALT: Google Home for sale. Front view of white Google Home

ALT: Google Home on its side showing the bottom of the speaker

ALT: Back of Google Home showing the micro on/off button and cable

ALT: Close up of a white Google Home speaker for sale

Google Home for sale. Front view of white Google Home.
Google Home for sale. Front view of white Google Home.
Google Home on its side showing the bottom of the speaker.
Google Home on its side showing the bottom of the speaker.
Back of Google Home showing the micro on/off button and cable
Back of Google Home showing the micro on/off button and cable
Close up of a white Google Home speaker for sale.
Close up of a white Google Home speaker for sale.

 Example 5: Katy Corso, Lviv (shop)

This example is a storefront used to illustrate a Contact Us page on a website. We want this image to show in Google Searches when users search “Katy Corso Lviv”.

ALT: Katy Corso Lviv. Storefront of our bridal couture store in Lviv

Katy Corso Lviv. Storefront of our bridal couture store in Lviv
Katy Corso Lviv. Storefront of our bridal couture store in Lviv

Example 6: Seagull in Gloucester (news)

This image illustrated a news article referring to an incident in Gloucester, England. A chipping seagull attacked a man’s fish and chips outside a pub. The image used to illustrate the article does not show the seagull in question, but other seagulls eating fish and chips. However, to help the image rank for the keyword “Seagull in Gloucester”, we suggest using the keyword in the ALT text.

ALT: Seagull in Gloucester after attacking man’s fish and chips

Seagull in Gloucester after attacking man’s fish and chips
Seagull in Gloucester after attacking man’s fish and chips

Example 7: How to learn SEOPress Insights

This is an example where an image contains text. Although Google can certainly extract text from images using OCR (Optical Character Recognition) it probably doesn’t do it for every image it finds on the web. Good practice is to transcribe the text visible in the image into the ALT text. W3C state that “the text alternative must contain the same text presented in the image“. We have respected this recommendation and because we imagined that the keyword targeted is “How to learn SEOPress Insights”, this has been used at the beginning of the alternative text.

ALT: How to learn SEOPress Insights. Download our eBook: 10 Tips to Get the Most Out of SEOPress Insights.

How to learn SEOPress Insights. Download our eBook: 10 Tips to Get the Most Out of SEOPress Insights.
How to learn SEOPress Insights. Download our eBook: 10 Tips to Get the Most Out of SEOPress Insights.

Example 8: Schema plugin for WordPress

A screenshot from an application is example where an image contains a lot of text. In this example, a screen shot from WordPress in which visible text includes the admin menu (Dashboard, Posts, Media, Pages, etc.). There is too much text here to be transcribed into an ALT text, which should be no longer than a sentence.

For accessibility reasons, W3C recommends providing a long description of complex images. This can be on a separate page and would be a good example of using WordPress media attachment pages and the Description field provided in the Media Library of WordPress.

Purely for SEO, though, we would recommend only supplying a short ALT text describing the image. We will imagine that this screenshot targets the keyword “Schema plugin for WordPress” which searched 870 times per month on average.

ALT: Using SEOPress as a schema plugin for WordPress. Screen shot of the Structured Data Type screen.

Using SEOPress as a schema plugin for WordPress. Screen shot of the Structured Data Type screen.
Using SEOPress as a schema plugin for WordPress. Screen shot of the Structured Data Type screen.

Hopefully using these examples as guide, you can start writing better ALT texts and rank better in both Google and Google Images.

Note: We have added our suggested ALT text as captions on the images above. Google recommends using visible captions to images and with many WordPress themes you can add captions very easily. However, if you do add a visible caption to an image, the best practice is to make this text different from the alternative text.

By Benjamin Denis

CEO of SEOPress. 12 years of experience with WordPress. Founder of WP Admin UI & WP Cloudy plugins. Co-organizer of WP BootCamp.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.