Alt Text for Images – The Complete Guide With Examples

Images are an important asset for all webpages. They make a page easier to read, more visually attractive and they help in presenting a topic better. Having a good alt attribute to all your images improves the accessibility of a site and also helps SEO both for image search and web search.

In this post, you’ll learn everything you need to know about image alt text.  In particular, we’ll cover the following topics:

• What is alt text?
• Why is image alt text important?
• Alt Text and SEO
• How do you write good alt text (with examples)?
• How to set the alt text of an image?
• Key Learnings

What is alt text?

Alt Text (also known as alternative text or alt attribute) is a text that accurately describes an image. It 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">

The alt text is not shown when a page is viewed in the browser but it becomes visible when an image cannot be loaded.

Search engine crawlers read the alt text value and screen readers use it to ‘describe’ the image to users who cannot see.

Why is image alt text important?

Providing for an alt text for all your images is important for four reasons:

1. 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)
2. 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.
3. Search engines use the alt text to understand what an image is all about and it’s good for SEO.
4. In case the image is used as a link, the alt text is used as the anchor text.

Alt Text and SEO

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

It is not the only element, they also use image processing algorithms to figure out what an image is about but the alt text, if used correctly, gives them a big hint.

Alt text helps a webpage rank in Web Search Results

In fact, Google can rank a webpage in the Search Results based on the value of the ALT TEXT.

In a recent tweet, Google’s John Muller said that “Pages can rank in web search for content found in image alt-attributes”.

To take advantage of this for SEO purposes, make sure that your ALT text includes the SEO keywords (or closely related keywords), you want a page to rank for BUT without doing keyword stuffing. See the examples below on how to write good alt text.

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 for a meaningful alt text
• The images should be included in 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. In other words, instead of loading all images at once, they are loaded individually as users scroll down a page.

This is a good technique but there are doubts in the SEO community whether this is good for SEO or not.

People have concerns that Google bot might not be able to read all images if they are not loaded from the beginning. A way to minimize this risk is by using an alt text for all your images.

Google bot can read the value of the alt text, even if the images are not fully loaded.

Here is the related tweet from Google.

How do you write a good alt text?

Let’s see how to write good image alt text that will help search engines but without doing keyword stuffing.

The alt text should accurately describe 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 is one that 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 write it thinking how to best describe the image to users who cannot see it.

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

Keep it short but avoid single-word alt text

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.

Consider the 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"/>

Use your main keywords or LSI keywords

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 semantically related keywords – Many times it’s difficult 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"/>

No need to include the words ‘image’ or ‘picture’

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

Do include an alt text for all images

You should add an 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.

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 an 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.