Image Alt Text SEO Best Practices

Let's look at the SEO best practices for setting image alt text.

You must remember that the reason you use alt text is to describe the image to visually impaired users.

Never forget this.

Whenever you are writing your alt text descriptions you should always have this in mind.

Alt text is for humans not for you to get better rankings.

Yet, the trick is to give an excellent description that:

• works for visually impaired users
• improve your image SEO results

We are going to look at the best practices that you should follow when writing your alt text.

By following these image alt text SEO best practices you will have happy users and get an image SEO boost.

1) Make the alt text descriptive

As I have already said, the purpose of alt text is to describe an image to a visually impaired user.

So the more descriptive the text is the more useful it is to them.

Google also uses the alt text in the Google Image search algorithm.

They also use image recognition software to describe the image. This allows them to check that the image is suitable for Google users.

Image recognition software is now very good at describing what is in an image.

For example, let's pretend that we are writing a recipe article for banana and blueberry toast. Here is our image:

We can upload this image to Microsoft's image recognition tool and it will try and describe the image.

Here is what Microsoft describes the picture as:

A bowl of food on a plate

Not too bad but as you can see it is missing a lot of detail.

Instead, we could describe it like this:

Delicious banana and blueberry toast with maple syrup

This is the value you can bring. This describes the image in a way a computer can't. The HTML with this description would look like this:

<img src="toast.png" alt="Delicious banana and blueberry toast with maple syrup">

We have included our keyword “banana and blueberry toast” into the description. We have done this in a way that makes sense to a human.

2) Keep the length under 100 characters

It is to easy to create long text when describing an image. Yet, we don't want it too long!

There is no official character limit for alt text. I did find a reference to a test from the Web Content Accessibility Guidelines.

They state in the test:

If the alt attribute value is greater than 100 characters (English) then either shorten the alt attribute value or confirm that current value is the shortest possible for the associated image.

So as a guide make sure to keep your alt text to 100 characters or less.

3) Add alt text to all images

It is bad practice to have img tags without alt text.

Sometimes I am asked:

should there be descriptions for every image, even background images?

The answer is yes! You should have the alt attribute for every single image. For a background image you should use an empty alt text like this:

<img src="background.png" alt="">

The take away here is that every img tag on your page should have an alt text attribute. This is because it is a HTML standard set by the Web Accessibility in Mind organization.

4) Do not repeat Alt text descriptions

Remember that the purpose of the text is to describe the images to visually impaired users.

So it is unlikely that you have the same image on your page over and over.

This is also used by Google when looking at your site. If it finds many images with the same alt text, how does it know which one to display? This can also come across as spammy.

Make sure that you write unique, short, descriptive alt text for all images on the page.

5) Add alt text to button images

There are many images on your site that make up the user interface (UI). These UI elements are things like buttons and headings and these should also have alt text.

Remember no image should be without an alt attribute.

For example, if you have a submit button on a form and this is an image then you can use the word “submit” as all text.

<img src="submit.png" alt="Submit">

You don’t want to add the text “submit button”. The visually impaired user knows that this is a button. You can remove this and just write the string “submit”.

An even better option is to say what the user is submitting. For example, if the form submits a search then use “Submit Search”, like this:

<input type="image" alt="Submit Search">

Some examples of good form buttons alt text are:

• Search
• Submit
• Register
• Place your order

6) Use your keywords

Let's say that we are working on a blog post that is targeting the words:

Best trainers for runners

We may have an image on that post that shows a runner wearing trainers:

What we ideally want is to use the keywords within the image alt text in a natural way.

So for this image, we could add the alt text like this:

<img src="runner.png" alt="Person wearing the best trainers for runners">

You should only do this for a single image on the page.

7) Don't keyword stuff

Keyword stuffing is when you add many keywords to the image alt text.

Taking our running trainers example you could keyword stuff like this:

<img src="runner.png" alt="trainers runners sneakers run jogging jog race footwear best top">

This is clearly spam. This is very obvious to Google and has no value for your visually impaired users.

Don't do it.

8) Other types of Images

There are a few other types of images on your site. It can be difficult to know what to set the alt text to.

Here are a few examples to help:

• Image maps - Image maps are not as common as they once were. Set these to an empty alt text.
• Image slices - These images get split and used in many places on a page. Again set the alt text to empty.
• Logos - The alt text for logos should be set to the company or website name

For example, here is what Google sets its Google logo alt text to:

9) Don't use “chart”, “image”, or “diagram”

There is no need to use generic words that add no value to the description.

Avoid starting the alt text with “image of …” or “picture of …".

These words add no value to the description. They waste valuable characters that you can use to describe the image.

So avoid these words.

10) Consider using aria-label

If you have not set up and alt text attributes but you have aria-label attributes like this:

<img src="runner.png" aria-label="Another example of what a description should be like.">

This is also acceptable as modern screen readers will also use this label and read out the contents.

Wrapping Up, Image Alt Text SEO Best Practices

We have looked at 10 image alt text SEO best practices that you should follow when setting alt text on your site.

They are:

1. Make the alt text descriptive
2. Keep the length under 100 characters
3. Add alt text to all images
4. Do not repeat Alt text descriptions
5. Add alt text to button images
6. Use your keywords
7. Don’t keyword stuff
8. Other types of Images
9. Don’t use “chart”, “image”, or “diagram”
10. Consider using aria-label

The main thing to remember is don't spam. The image alt text is not for SEO it is for visually impaired users.

Always write your alt text for these users.

Do not stuff your descriptions with keywords that make no sense.

Go beyond just describing the image. Give details about the image that a computer could not generate.

Follow these guidelines and your site will have great descriptions for your users. As a bonus, it will also perform well in Google Image Search.