What is the purpose of adding alternative text alt text?

Alt text (short for alternative text) is text included in HTML code to describe an image on a webpage.

It provides context for search engine crawlers as well as for those viewing a page with a screen reader.

Alt text is also commonly referred to as “alt attributes” and “alt tags.”

Here’s what it looks like:

And here’s an alt text example in HTML:

Why Is Alt Text Important for Image SEO?

Google Image searches account for 22.6% of all searches.

This makes images a powerful way to get more SEO traffic.

And Google reads alt text to help understand what images are about. Without alt text, your images are much less likely to rank on Google Images. 

Google also often displays images at the top of regular Google search results, before webpages. For example, if we search for “content distribution chart” we see images displayed as the top results:

So optimizing your image alt text can lead to more traffic from both Google and Google Images.

In this article, we’ll cover exactly how to do that. Including examples, best practices, and how to find and fix missing alt text.

Alt Text Examples

To write the most effective alt text, be descriptive and use a natural tone of voice. Think about how you’d describe an image to someone in a conversation. Don’t try to stuff it full of keywords (which sounds robotic).

Let’s go over a few images with okay, better, and best alt text examples.

We’ll start with this picture of a charcuterie board:

Bad alt text example: alt="Ideas for dinner parties"

Okay alt text example: alt="Charcuterie board"

Better alt text example: alt="Charcuterie board with meats and cheese"

Best alt text example: alt="Round charcuterie board with meats, cheese, crackers, and other colorful snacks”

The “bad” example here is targeting a specific keyword (“ideas for dinner parties”) without actually telling us what’s in the image. While the “okay” and “better” examples do a better job, our “best” example provides the most detail and context for the picture.

Next, let’s go over this image taken at Central Park:

Bad alt text example: alt="Bridge flowers trees greenery park"

Okay alt text example: alt="Central Park"

Better alt text example: alt="Bridge at Central Park”

Best alt text example: alt="Bridge at Central Park surrounded by trees and foliage”

The “bad” example is a list of words rather than a description. The “best” example includes information about the specific location as well as what’s shown in the picture.

Lastly, here’s an image from the 2008 Beijing Olympics:

Bad alt text example: alt="Sporting event track field olympics gold medal"

Okay alt text example: alt="Track and field"

Better alt text example: alt="Track and field event”

Best alt text example: alt="Track and field event at the 2008 Beijing Olympics”

Similarly, our “bad” example here feels unnatural and doesn’t really tell us what’s going on in the picture.

Notice that all of our “best” examples are the most descriptive without being spammy. And when there’s a clear name or event related to the image (like Central Park or Beijing Olympics), that’s included as well.

Alt Text Best Practices

Let’s go over some ground rules to follow when writing alt text. 

We’ve already covered that good alt text is descriptive without being spammy, but here are a few more important notes:

Keep Alt Text 125 Characters or Less

Screen readers and other assistive technologies usually stop reading alt text at the 125 character mark.

It’s best to cap your alt text at this number so it doesn’t get cut off.

Include One Main Keyword for Context

This may seem counterintuitive to our previous advice. However, it’s a good idea to include a main keyword in your alt text if it provides context for the page the image is on. 

The point of alt text is to provide additional information and context, and the target keyword often does just that.

To make it more natural, you also can use variations of your main keyword.

Let’s say we’re writing alt text for this image from our blog post on building backlinks:

This blog post targets the keyword “link building,” but it would feel a bit forced to add that in here because the image is about a more specific topic.

So a good strategy here could be: alt="examples of what makes a good link"

This way we include the partial keyword “link,” but it’s still relevant to both the image and the webpage.

Don’t Include Alt Text for Decorative Images

While the goal of alt text is to provide as much context for images as possible, there are some images that don’t really need further explanation.

There’s no need to include alt text for decorative images like icons, horizontal line page breaks, a magnifying glass icon in a search bar, etc.

Those using screen readers don’t need to know what these images look like to understand the page, and Google doesn’t need further information or additional context in order to rank the webpage.

Here’s an example of a decorative illustration that wouldn’t need alt text:

Don’t Include “Image of” or “Picture of” in Alt Text

As mentioned, you only have 125 characters to describe your image. Including filler text like “picture of” or “image of” will only waste that space, since it’s already implied to both users and Google that these are images.

Here’s a example of what not to do vs. what to do for an image of a floor lamp:

❌ alt=”Image of mid-century modern floor lamp”

✅ alt=”Mid-century modern floor lamp in a furnished living room”

The second option is more to-the-point and adds key additional information and context.

Don’t Cover What’s Already in the Caption

There’s no reason to include redundant information in your alt text. If a photo already has a caption, instead of repeating it in the alt text, provide more context about the photo instead.

Here’s an example of an image with a caption for Strand Bookstore in New York:

❌ alt=”Union Square location of Strand Bookstore”

✅ alt=”Exterior of Strand Bookstore with red awnings and people browsing outdoor bookshelves”

The second alt text is more accessible—instead of repeating the caption, it describes what’s actually happening in the picture.

Find & Fix Missing Alt Text

To check if there’s missing alt text on your site, use our Site Audit tool.

Start by clicking the “Add new project” button in the upper-right.

Then add the domain and name of your website, and click “Create project.”

Follow the instructions to finish setting up your Site Audit, then give it a chance to run.

When your audit report is ready, click on it. Then click on the “Issues” tab:

You’ll be directed to a list of Errors, Warnings, and Notices. Narrow your search results by looking for “alt attributes.” This will show you how many images are missing alt text:

Click the link (“57 images” above) to see exactly which images are causing the issue so you can log in to your site and fix them.

Your next step is to log into your CMS and add alt text to any images listed here.

Once you add the missing alt text to your site, you can re-run your Site Audit so it can reflect the changes.

What is the purpose of adding alt text?

What is the purpose of adding alternative text alt text to an image in your document linkedin?