Episode 55 - ALT Text in your Shopify Store

The Podcast

Help the Podcast

Transcript

Hey, Scott Austin here.  In this episode, I'm going to cover ALT text in your Shopify store.  What is ALT text?  Why is it important.  How to edit ALT text.  And best practices.  So let's dive in.

What is ALT text?

ALT text is text that is added to the HTML of an image attribute.  An image attribute is how we display images on a web page.  The ALT text is meant to be a written description of the image.

What is ALT text used for?

ALT text serves these three uses:

1. ALT text is a usability feature.  Visually impaired web users use a screen reader that voice dictates the web page to the user.  When the screen reader gets to an image on the page, it reads the ALT text to explain the content of the image.
2. ALT text is used for SEO.  The Google search algorithm uses the ALT text of an image to determine the content of an image which it uses to determine what keywords it should rank for.  ALT text can improve the ranking of an image in image search and the ranking of the page that the image is on in web search.
3. And lastly, if a web browser can't find the image for a page, it will display the ALT text instead.  Similarly, if the user has set the browser to not display images, the ALT text will instead be displayed.

Why is ALT text important?

1. For Accessibility.

Alt text is a tenet of accessible web design. Its original, and still primary, purpose is to describe images to site visitors who are visually impaired and unable to understand the content of the images. Including ALT text with your images ensures all users, regardless of visual ability, can understand your products and the rest of your store as best as possible.

2. For SEO, especially Image SEO

Best practices for ALT text.

Here are some best practices to keep in mind when writing ALT text.

1. Describe the image as specifically as possible. Alt text is, first and foremost, designed to provide text explanations of images for users who are unable to see them.  Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.  Shopify will allow you to enter up to 255 characters.  It can be helpful to imagine yourself describing the image to someone that is not looking at the image.  The goal is to get more descriptive than a noun with maybe an adjective.  The more descriptive you get, the better the image will be able to compete for tail queries in SEO as Google will have more information to use to rank it.
2. Use your keywords. Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image, if it makes sense to do so, include your keyword in the alt text of at least one image on the page.
3. Avoid keyword stuffing. Google won't dock you points for poorly written ALT text, but you'll be in trouble if you use your ALT text as an opportunity to stuff as many keywords as you can think of into it.  Now this may sound at odds with #2 which is to use your keywords, but it's not.  You should use keywords that are contained within the image.  But do not use keywords on an image that are not contained within the image.
4. Don't include "image of," "picture of," etc. in your ALT text. It's already assumed your ALT text is referring to an image, so there's no need to specify it.
5. Don’t neglect form buttons. If a form on your website uses an image as it’s “submit” button, give it an ALT attribute. Image buttons should have an alt attribute that describes the function of the button like, "search", "apply now", “sign up,” etc.
6. Punctuation helps.  Screen readers will use punctuation to deliver the copy in a more human sounding fashion.
7. Every image should have an ALT element.  But the copy for that element may be blank.  It makes sense to have blank ALT text for decorative elements as they are about the display of the page but not the content of the page.

How to add and edit ALT text.

ALT text can be used on any website.  So all of the information I've already covered applies to any platform.  Now I'm going to shift gears and just focus on Shopify.  So lets cover how to apply ALT text to your Shopify store.  Images can be added to your store in a number of different ways.  And these different ways have different ways of adding ALT text.  Here are the common methods.

1. Product images. 

Product images are stored in their own place in the Shopify servers and not accessible through the Files section in the Shopify admin. 

You edit the ALT text for product images in the Shopify admin.  Go to the product in the admin.  Then in the Media section, click on the image.  In the modal that pops up for that image, you'll be able to add or edit the alt text.  If no alt text is added, Shopify will use the product title.  But that's just a fallback. 

If the same image is used on two different products in your store, Shopify is actually storing those as two different images.  So each image will need its own ALT text set.

1. Collection images. 

Collection images are editable within the Shopify admin by going to the collection page.  If you click the 'Edit' link by the Collection image, one of the options will be 'Edit image alt text'.  Clicking that allows to add or edit the ALT text.

1. Article featured images.

Article featured images are editable within the Shopify admin by going to the Article under Blog Posts under Online Store in the main navigation.  If you click the 'Update' link by the featured image, one of the options will be 'Edit image' which allows you to add or edit the ALT text.

1. Images added through Theme customization. 

Images added through customizing the theme get stored in the store's file section which is found in the Shopify admin under Settings > Files.  Unfortunately, we can't add image ALT text in the Files section of the Shopify Admin.  Instead the ALT text is added to each place the image is added to the store experience.  For better or for worse, this means that one image from the Files section, could have several different ALT texts applied if it used in several different places. 

Anyways, once you add in an image through Theme Customization using the image selector, an Edit button will appear under the image.  Clicking the button brings up a modal that allows you to add or edit the ALT text.

One thing to note about adding ALT text through Theme Customization.  Adding or editing the ALT Text through Theme Customization interface doesn't register as a change.  So the Save button will not light up which means you won't be able to save the changes.  In this case make a small change, like adding a space at the end of some text.  That will light up the Save button and allow to change the small change you made along with any ALT text edits. 

1. Images in Article content, Page content, Product description or Collection description.

The process for adding ALT text to images in all of these places is the same.  You probably added the image using the Insert Image button in the Rich Text Editor.  That button allowed you to pick from an image stored in the store's file section or upload a new image which would then be stored in the store's file section.  You can add ALT text during the image selection process.  And once the image is embedded, you can click on the image in the Rich Text Editor and then click the click the same button you clicked to add the image.  But the button is now named 'Edit Image'.  Here you will be able to add or edit the ALT text.

1. Images coded in HTML.

You could add images directly to your store by editing the Theme's Liquid code.  Or your theme may have HTML sections which would allow you to add images by adding HTML to the section.  Either way, you'll want to use images that are stored in the Store's file section.  You should add the ALT text right into the image tag in the HTML.  It would look something like this < img src="image.jpg" alt="white bunny in a magician's hat">.

Now, all of the above methods for adding or editing ALT text only work for one image at a time, which can be quite labor intensive.  The Shopify admin does not have any way to edit ALT text in bulk.  But there are plenty of apps that provide that functionality.  I don't have a particular app that I recommend as many stores pick an app not just for the ALT text capabilities but for other capabilities also in the app.  Here are some buckets of apps that usually include the ability to add and edit ALT text:

1. Image Editing Apps.
2. SEO Apps.
3. Asset Import and Export Apps.

And different apps have different levels of editing capabilities including:

1. Rules based ALT text.  This is useful for stores with lots of images and allows you to set it and forget it.
2. Spreadsheet based bulk editing of ALT text.
3. Changing ALT text on an individual image.

Most apps include some ALT text functionality in their free level.  So if you have a lot of images because you have a lot of products or a lot of blog articles, I recommend finding the right ALT text app for you.

So that covers it for ALT text in your Shopify store.  I hope this content was useful for you.  Thanks for listening.