What is alt text and why do I care?

In the past, I wrote about improving your SEO with a few simple tips.

One of those strategies was on alt text which still seems to mystify Shopify store owners.

What is alt text?

Alternative text or more commonly called alt text, or alt attribute, are the words that are shown when the image it’s applied to can’t be viewed.

Basically, if an image can’t be viewed or displayed for any reason, the text in this piece of code will appear.

How is alt text used?

1. As mentioned above, alt text is used when an image can’t display. There could be a lot of reasons for this, so just make it simple. For whatever reason, the image can’t be displayed.

But that’s not its only purpose.

2. More importantly, alt text is used by visually impaired users with screen readers to “view” your image and is an essential part of web accessibility. The screen reader allows the user to listen and interact with the content.
3. You can think of search engines like Google as visually impaired users. Search engines use alt text in a similar fashion because they are using technology to “view” your image.

By “view” your image, I mean they use alt text to better understand what is happening in the photo.

How do I use alt text?

The alt text is, as I mentioned above, an alternative for the image and is used to describe what is happening in the image.

For example, if Company XYZ is selling a purse, the alt text would describe the product image.

A great alt text may look something like this:
alt="Woman holds a Company XYZ large purple leather clutch purse with a snap closure in her hands."

What image do you have in your head? (It’s rhetorical, you don’t have to actually answer)

You’ll notice I did a few things in this example.

First, I used common search terms such as “purple leather clutch”.

Second, notice that I didn’t keyword stuff. That means I didn’t add every conceivable search term. For an example of what NOT to do:
alt="purse clutch bag handbag leather pocketbook pouch wallet"

Third, I used words that could be used in a search query. For example, if someone was to type a question into Google, what might they ask?

How does Google use alt text?

As we discussed in #3 above, Google uses alt text along with their algorithms and the content on the page to get a full understanding of the image.

When someone searches for “purple leather clutch” they are asking a question. Google will evaluate the question, determine the best answer, and return results that they think is the closest answer.

Google search results are answers to these questions.

It’s your job to tell Google what’s in the image, making it easier for Google Image Search to better understand your images and as a result, appear higher in rankings.

Where do I go from here?

If you’re using Shopify apps to automatically generate alt text, stop!

As with most web accessibility elements, using automated tools fail miserably and is an easy out. Yes, you’ve met the requirement for alt text but if it’s ineffective or poorly implemented (e.g. repeating the product title) it’s a waste of time and money and it hurts your results.

Instead, pretend you’re telling someone on the phone what is happening in the image. They can’t see it, so you have only your words to describe it so they can create their own picture in their head.

Keep the alt text short and to the point but use enough description that the value is there. I recommend somewhere between 50-125 characters.

Add alt text to all images that serve a purpose. If the image is purely for decoration (e.g. a swirly line that decorates the background) you can leave it blank. As a matter of practice, I add alt text regardless so that I practice good habits.

If the image is for decoration only and doesn’t serve a purpose, it’s time for a heart-to-heart. Is it really necessary at all?

Rarely do I recommend using images as text. I find this is mostly used because of a style choice and not a need. This is generally a best practice for SEO, but the point stands. If you must, at least explain what the image says with alt text.