Found lurking in the depths of website code is what is known as alt text, alt attributes, or (as they’re more commonly known) alt tags. Alt text (short for alternative text) is used to describe the function and/or appearance of an image on a webpage. It exists to improve web accessibility—mainly to aid visually impaired users in understanding the content of an image. It’s also crucial to helping search engines properly index an image, an important part of search engine optimization (SEO). 

Alt Tags for SEO

Alt tags greatly improve search engine optimization, or SEO for short. Because search engines and similar bots can’t interpret images, providing alt text for images helps search engines figure out what is actually in the image. The more descriptive the alt text, the higher it will rank on Google Images and other search engines. Alt text gives search engines important information about an image to make it easier to find and rank in an image search. 

“If [search engines] don’t understand, or get [an image] wrong, it’s possible you could either rank for unintended keywords or miss out on ranking altogether.1

Alt Tags for Accessibility

Putting alt text or tags on images also greatly assists human beings as well. In the web world, we use the shorthand “a11y” to abbreviate accessibility. The web should be easy for everyone to navigate. Those with visual impairments and other disabilities who use screen readers when browsing the web rely on alt tags so that images may be described to them, and to help provide more context and information about the content of a webpage. Without alt text, it’s possible that a screen reader could read out the ugly filename rather than the actual content in the image. 

How to Write Good Alt Tags

When writing alt text for images, there are a few simple things to keep in mind. Alt tags need to be descriptive, but they don’t need to be superfluous. Alt text needs to be descriptive, clear, and concise. It’s crucial to avoid keyword stuffing and making your alt tag sound spammy. 

There needs to be a good mix of both keywords and natural language; no one who uses a screen reader wants to have “red apple fruit delicious granny smith apples [insert more redundant apple vocabulary here]” read to them out loud. A better alt tag to describe the image of an apple would be something like alt=red and yellow apple hanging on a branch”. This version of the tag has just enough information to give both a screen reader and a search engine something easy and pleasant to digest, all while still giving a solid description of the image.

Using Alt Tags on Images

If the image contributes meaning to the current page or context…

  • and it’s a simple graphic or photograph, use a brief description of the image in a way that conveys meaning in the alt attribute
  • and it’s a graph or complex piece of information, include information contained in the image somewhere else on the page. Use an empty alt tag or make a very brief description of the information. 

Using Alt Tags on Images with Text

If the image contains text… 

  • that has a specific function (an icon, for example), use the alt tag to explain the function of the image
  • but the text in the image isn’t otherwise present, use alt attribute to include the text of the image
  • and the image is used as a button, use the alt attribute to communicate the destination of the link or action taken.

When to use an Empty Alt Tag

All images need an alt tag, even if it’s just a null tag or an empty alt attribute (alt=””). Use an empty alt tag when…

  • Images containing text where text is also present as real text nearby
  • Images containing text where text is only shown for visual effects
  • Image purely decorative or not intended for the user

Avoid leading with “Image of” 

Avoid phrases like “image of” or “picture of.” Whatever robot or AI is reading the image already knows its an image, so there’s no need to reiterate it. The same applies to links. When in doubt, write it out. 

Dos and Don’ts 

alt tag

DO

red apples hanging on a branch

DON’T

organic apple red fruit granny smith red delicious ripe champion


DO

Abstract illustration with a pink shape, an outline gold shape, and a textured charcoal shape

DON’T

A picture of a picture


DO

Click for help

DON’T

Circle with a question mark in it

Checkup

We write the alt tags on websites prior to launch and we encourage clients to learn how to write the tags and keep them in mind as you go. 

You can go through your WordPress installation to add alt tags to all of your pages. If you have a small site, you can go into the Media Library and add all of your alt tags directly to your images. 

Screenshot of the WordPress admin screen with a sample image and the text box to put in the Alt Tag.
You can write your Alt Tags in the WordPress Media Library

If you have a large site and this is impractical, go through your top-performing pages (and work your way through. Click each image and add in the alt tag. 

It’s best to do this as you go instead of having to iterate over it later.

Screenshot of the WordPress editor with the Alt text input box
It’s best to write your alt tags as you go in the WordPress Editor.
  1. “Alt Text for — Examples & 2020 Best Practices.” Moz. Last modified March 9, 2017. []