What Is Alt Text? Examples & Best Practices

Providing alt text to all your images improves the accessibility of a website and also helps image SEO. In this post, you’ll learn everything you need to know about image alt text.

What Is Alt Text?

Alt Text (aka alternative text or alt attribute) is an HTML attribute that describes what an image is about. The alt text is not shown to users, but it becomes visible when an image cannot be loaded. Search engine crawlers use the alt text value to understand the image context, and screen readers use it to ‘read aloud’ the image to users who cannot see it.

Alt text is added to the <img> tag in the HTML of a page. Here is an example of an image alt text:

<img src="/images/some-image.png" alt="this is the alt text">

Why Is Alt Text Important?

Providing an alt text for all your images generates several benefits.

Alt text improves web accessibility - The alt text value is shown in the place of the image when the image cannot be loaded (in case users have low bandwidth connections)

The alt text improves the accessibility of a page. Users who are visually impaired and use screen readers can hear a description of the image. This is also one of the core principles of SEO-friendly web design.

Alt text benefits SEO - Alt text is the most important element to configure when doing SEO for images because it helps search engine crawlers understand the image's subject matter.

If the image is used as a link, the alt text is used as the anchor text.

Google considers the value of alt text when ranking pages in the Search Results.

Alt text can help images rank high in Google Image Search - Another way that alt text helps SEO is when it comes to ranking images in Google’s Image Search.

There are millions of people searching for images on Google, and If you want your images to rank high, you need to:

• Provide a meaningful alt-text.
• The images should be included on pages with relevant text.
• Use high-quality images.
• Use meaningful image filenames.

Alt-text is a must if you use lazy loading - Lazy loading is a way to improve the loading speed of a page by loading images only when they are in the user’s viewport.  Google bot can read the value of the alt text, even if the images are not fully loaded.

Alt Text Best Practices

1. Write text that accurately describes the image
2. Keep it short, but avoid single-word values
3. Use your primary keyword or a close variation
4. No need to include the words 'image' or 'picture'
5. Provide an alt text for all images
6. Use an image caption to show the alt-text value to users

1. Write text that accurately describes the image

The main reason for having an alt text in the first place is to have a textual description of an image. An accurate description helps users and search engines understand what an image is about without looking at the image.

A good way to ensure that your description is accurate is to think about how to best describe an image to people who cannot see it.

Here are the Google guidelines on choosing a good alt text:

2. Keep it short, but avoid single-word values

Keep the length of the alt text to around 125 characters, but avoid using a single word.

Especially in cases of common images, the alt text can increase your chances of ranking high for long-tail keywords in Google image search.

Here is an example of good and bad alt text for this image:

Not so good Alt Text:

<img src="brownies.jpg" alt="brownies"/>

Good Alt Text:

<img src="brownies.jpg" alt="Chocolate Brownies with Strawberries on Top"/>

3. Use your primary keyword or a close variation

I’ve mentioned above that you should use your keywords without crossing the line and start doing keyword stuffing.

To help understand this better, follow the guidelines below:

Use images that are relevant to your content – if you add images that are not relevant to the rest of the content, you won’t be able to have alt text that is descriptive and keyword-rich.

Don’t always use your main keywords, but use keyword variations – Many times, it’s challenging to have the main keyword in the alt text. A good alternative is to use related keywords.

Here is an example.

Let’s say you are writing an article on ‘how to train your beagle dog to fetch,” and you want to write an SEO-optimized alt text for this image:

Bad Example (not providing for an alt text):

<img src="beagle-dog.jpg"/>

Example of keyword stuffing:

<img src="beagle-dog.jpg" alt="beagle dog dog fetch dog food puppy"/>

A better version:

<img src="beagle-dog.jpg" alt="beagle dog"/>

Example of an optimized alt text:

<img src="beagle-dog.jpg" alt="beagle dog playing fetch"/>

4. No need to include the words 'image' or 'picture'

Search engine crawlers know this is an image, so there is no need to repeat that in the alt text. Use alt text to talk about the image.

5. Provide an alt text for all images

You should add alt text to all your images, including your logo, images used on buttons, and images used as backgrounds. Remember, the main reason for having an alt text is for better accessibility, so keep that in mind.

6. Use an image caption to show the alt-text value to users

One clever way to make the alt text visible to users is to use an image caption. The image caption appears below the image and can have the same value as the alt text.

Here is an example: Both alt text and image caption have the same value.

Alt Text Examples

Here are a few more examples of how to write good alt text.

Example 1: Post Images 

Example 2: Alt text for product images

How To Set The Alt Text Of An Image?

There are two ways to do this: manually by editing the HTML code or through your CMS.

Add the alt text by editing the HTML Code

When you add an image element to your HTML, you can specify the alt text value by adding the [ALT=" value goes here"] within the <img> tag.

For example:

Add alt text in WordPress and other CMS

Most modern CMS allows you to define the ALT TEXT using their visual tools and without having to manually edit the HTML.

If you are on WordPress, you can specify the ALT text by editing an image from the MEDIA LIBRARY or when adding an image to a post.

Key Learnings

ALT TEXT is the most important element of image SEO.

Use alt text on all your images to help visually impaired users navigate your site better.

At the same time, the image alt text is the most critical factor for ranking your images high on Google image search but it can also help your pages rank higher in Google web search.

A good alt text is short (approx. 125 characters) but descriptive. It accurately describes an image with keywords that users might use in a search engine’s search box.