What is Alt Text?

You’ve probably heard of alt text, but what is it exactly?

Alt text is the abbreviated form of alternate text and additionally can be called alt tags, alt descriptions, or alt attributes. It is a description of a photo coded into the HTML for web accessibility and to help with SEO rankings.

You may not think alt text should be a priority when it comes to optimizing your site for search engines, but leaving this field blank can really affect your rankings and user experience. Keep reading to learn more about what alt text is and why you should be using it.

What is Alt Text?

Alt text is a short description of an image that may be read aloud by screen readers for accessibility. It is coded into the HTML and describes the function and appearance of photos so search engines know how to index the photo and the page it is on. In some cases, alt text might even replace photos on the page.

Why use Alt Text?

Anyone who has a webpage—large corporations, small businesses, or bloggers—should use alt text. Not only is alternate text useful for the visually impaired, but it also explains what the photo is if the image is having trouble loading. Since alt text is a description, screen readers—for those who need it—are able to read the words out loud, keeping your site in compliance with ADA requirements. 

Even though alternate text will not be seen most of the time, it is still important to have. For the reasons listed above but also for search engine optimization (SEO).

Search engine bots rely on the words on your webpage and direction provided in the page’s code to understand what the page is about. Those bots, however, can’t crawl images directly, and that’s where alt text comes in. By tagging your images with relevant, descriptive alt text, you are instructing search engines on how those images should be categorized. So when someone searches with specific keywords, anything that uses those words will be displayed, including photos.

How to Write Alt Text

Alt text should be as descriptive, yet concise, as possible. It is best to keep it under 125 characters. When creating alternate text, do not start the description with “image” or “picture of.” It is already implied and understood that it is a photo because it is in the code. 

When creating alt text, some think of it as just listing a string of descriptive words—similar to what would be used as hashtags. This practice, commonly referred to as “keyword stuffing,” is not recommended because it does not specifically say what the image is. Alternate text is meant to be used to describe the image when the image cannot be viewed and is ideally phrased in a way that’s easy to read and understand.

Pro Tip: Using proper punctuation will help assistance programs (like screen readers) read the descriptions in a more human tone. Commas will add a pause when speaking, and periods will cause the reader to take a breath.

Examples of Alt Text

As we’ve learned, alt text should accurately describe what is in the photo while strategically using keywords you want to rank for. When writing image alt text there are a few best practices that should be followed at all times. 

Keywords

We know that alt text is used to help search engines understand how to index images on a site. That understanding comes from the keywords that are included in your alt text descriptions. It’s also important to be strategic about how those targeted keywords are used in your alt text. For example, a keyword-rich but poor example of image alt text would be:

<img src=”halloweenshirt.jpg” alt=”tee shirt halloween orange pumpkin”>

While this alt text describes what is in the photo, it’s not ideal since it has several keywords but no context. Better alt text for this image would be:

<img src=”halloweenshirt.jpg” alt=”halloween-themed black tee shirt with an orange pumpkin graphic.”>

Specificity

As previously mentioned, you want to be as detailed as possible when creating alt text for an image. So while this alt text is ok:

<img src=”dog.jpg” alt=”black dog sitting in a football field.”>

This alt text is better because it uses specific descriptors that would help search engines index the photo properly, especially if it was on a page talking about the University of Tennessee.

<img src=”dog.jpg” alt=”Smokey the University of Tennessee Volunteers mascot at Neyland Stadium.”>

Context

If the image you are using doesn’t have an official place or person in it, you should use the context of the page to describe it. For example, say you’re writing an article about how to budget for grocery shopping. This alt text for the image isn’t the best:

<img src=”budgeting.jpg” alt=”woman sitting at a table on a laptop.”>

This description doesn’t have any defining keywords that relate to your article. A better version of alt text would be:

<img src=”budgeting.jpg” alt=”woman looking online for coupons on how to budget for groceries.”>

The most ideal alt text descriptions will include relevant keywords, be detailed and specific, and have the proper context.

How to Create Alt Text on Shopify

Alt text is managed in two areas of the Shopify admin: in individual product details and in the File Manager. Product detail pages (PDPs) house product images that are uploaded alongside other product details like SKU, price, and description. The File Manager, on the other hand, houses images that are used in other areas of the site (e.g.: promotional graphics, category images, and homepage banners).

When using Shopify for your e-commerce business, if no alt text is created, it will automatically resort to the image’s file name, which is not ideal especially if it’s a string of numbers. Here are step-by-step instructions on how to incorporate alt text on your product photos in Shopify.

1. Login to your Shopify Admin panel.
2. On the left navigation area, click the “Products” link.
3. Search or scroll through your products to find the product whose images require alt text.
4. Click the product title text to open the product listing for editing.
5. Click on the image that requires alt text.
6. In the pop-up that appears, click the “Add alt text” link.
7. Type your alt text into the “Image alt text” text box.
8. Click the “Save alt text” button.

Now, the image has the chosen alternate text. Once it has been set, it will remain as that image’s alt text unless you change it. 

For images used in other areas of the site, however, there is a slightly different method for inputting alternate text. By default, alt text for these types of images are set to an “empty string” and are considered decorative, so the assisted readers will skip over them when reading the page. If the image needs to be described, be sure to input custom alt text through Shopify’s File Manager following these steps:

1. Login to your Shopify Admin panel.
2. On the left navigation area, click the “Settings” link.
3. Under the settings menu, select “Files” to open the File Manager.
4. Click on the image that requires alt text.
5. In the pop-up that appears, scroll down to the “ALT text” section.
6. Type your alt text into the “ALT text” text box.
7. Click the “Done” button to save.

Adding Alt Text to Your Site

Although it can seem somewhat tedious, alt text is crucial for all website images. It not only helps with SEO, but also keeps your website accessible for all users. Now that you know how to craft effective alt text, you’ll want to perform a basic audit to see which images need alt text on your site and add ideal descriptions.

Not sure where to begin evaluating your site’s search engine optimization? Learn how to conduct an SEO audit on your site to improve your rankings!