Struggling to drive in organic traffic for your Shopify store? One often overlooked aspect is your images. According to a study from Baymard Institute, 55% of websites don’t use ‘ALT’ text to communicate the core contents of an image, missing out on a golden opportunity to grow.
Just like how a picture is worth a thousand words, its alt text can be the reason why the image itself doesn’t get lost in the vast sea of e-commerce images. More than that, it impacts your website indexing, visitor experience and many other SEO aspects.
In this guide, I will walk you through the importance of alt text for SEO and how to add, edit and optimize it for your Shopify store!
Table of Contents
What is Image Alt Text?
Alt text stands for alternative text, also called alt tag, alt attribute, or alt description. It is used to show search engines what an image is about. It appears on a webpage in place of the image when the image fails to load due to a bad network, the website malfunctioning, etc.
The alt text is added to the HTML code of the image in the form of an “alt” attribute, like this: <img src=”example-image.jpg” alt=”Example fragile red jug placed on a bench”>.
When a browser or screen reader encounters this code, it uses the alt text as a substitute for the image in cases where the image is not able to be displayed.
Here is what the alt text looks like in the HTML file:
Alt texts help search engines crawl and rank images of your website more effectively. With them, your e-commerce products will be seen more frequently in web searches and Google images.
Below, is an example of an image’s alt text:
How does the alt text help improve the SEO of your Shopify store?
Alt text plays a crucial role in SEO by helping search engines understand images and how they relate to the overall context of the page. But it doesn’t stop there.
- Create a positive user experience
Sometimes your Shopify store might just not load images due to a technical or network issue. However, with alt text, visitors can still know what your image is about. This way, ALT text improves your customers’ experience, lowering your website bounce rates, and increasing the number of visitors returning to your website.
- Increase accessibility to crawlers
A crawler is used by search engines to search and index the content of websites on the internet. Adding Alt text to images makes it easier for Google’s crawlers to find and index your image files, hereby facilitating image rankings potentially.
- Drive image traffic
What happens when someone makes an image search of a bucket hat, for example? Since search engines can’t physically ‘see’ images, they will show results of images with ‘bucket hat’ in their alt text. The search engines will also display the link to the websites they’re from. This increases the number of visitors or “traffic” you get from your images with keyword-rich alt text.
According to research by Moz.com, the number of visits resulting from image searches may vary from 20 to even 60% of all visits from Google. Quite obviously, image alt text is something you should take seriously if you want to scale your store’s traffic.
- Aid auditory readers
Thanks to alt text, screen readers and virtual assistants like Siri or Alexa can read information about images aloud to people with bad eyesight. This also caters to audiences who like to multitask with their screen reading articles out.
When an image lacks alt text, screen readers won’t understand the image. Rather, they will only read the “source code” like “image 576” or “image.jpg.” to people. With alt text, you perfectly deliver your content to such auditory readers.
You might think this isn’t a big deal because you only know a couple of people using screen readers. However, auditory readers are more common and have more potential than you can imagine.
Here’s a stat by Adobe that you want to take seriously: Brands see incredible growth potential in voice assistants with 66% of business decision-makers strongly agreeing that voice assistance can help drive conversion and increase revenue; 71% see it improving the user experience.
Image alt text ensures you don’t fall behind the voice market!
How to Add & Edit Image Alt Texts in Shopify Manually?
Shopify has a built-in alt text field for images. In the Shopify admin, when you upload an image or edit an existing one, you’ll see a field labeled “Alt text.”
Adding or editing Alt texts on Shopify is easy, regardless of image type. All you have to do is follow these steps.
- Add Alt Text to Product Images Manually
- Go to your Shopify admin, go to Products > All products.
- Click on a product image, then click on the “Alt” field and enter a brief, descriptive text.
- Click “Done” to save your changes.
- Add Alt text to Theme Images Manually
- Go to your Shopify admin, navigate to the “Online Store” section.
- Locate the theme you want to edit and click “customize”
- From the theme editor sidebar, select the section containing the image that you want to add an alt text to.
- Below the image, click “Edit.”
- After inputting the alt text in the dialog, click “Save”
- Add Alt Text to Blog Images Manually
- From the Shopify admin, navigate to the blog post you want to add alt text to.
- Click on the image, then click on the “Alt” field and enter a brief, descriptive text.
- Click “Save” to save your changes.
- Add Alt Text to Collection Images Manually
- From your Admin Page, click Products then Collections.
- Find the collection you want to edit.
- Go to Collection image and click Edit button, then Edit image alt text.
Now, imagine an instance where you have hundreds of or even thousands of images on your website to optimize? Will you be adding your alt texts one by one? No, remember that time is money! I have a solution that can automate this workflow and make your work as easy as a breeze. Read on!
How to bulk-add Alt text to all Images in Shopify?
You can add image alt texts for your products in bulk, with the help of third-party apps.
Take the SEOAnt app for an example. It takes you less than 1 minute to generate Alt tags for your images in a batch.
Listed below are the steps on how:
- Install the SEOAnt app from the Shopify store, and launch the app.
- Choose Image Optimization in SEOAnt’s dashboard, and go to the IMAGE ALT TEXT section.
- Select what images you want to add Alt texts for, and set up the variants provided.
- Wait for the Alt texts to be generated in one minute.
What else can you do with the SEOAnt app?
- Bulk-compress images: Bulk-compress images without reducing their quality. Select between lossy and lossless compressions. Customize the compression rate you like. You can even add watermarks onto your images.
- Auto-scan your website for SEO issues: Monitor your pages for SEO problems with one click, including site speed, indexability, redirect issues, on-page errors,etc.
- Fix broken links: With its Broken Link 404/301 Redirect feature, you can redirect broken links to target pages, minimizing negative SEO impact.
- Generate structured data: Generate well-structured data to make your website more appealing in the SERPs, improving the click-through rates.
- Keyword research: Confused about what keywords best suit your products? SEOAnt app suggests well-targeted keywords.
- Bulk edit meta description: You can bulk generate and edit the meta tags for your images, saving time and reducing workload.
Tips for writing effective Image Alt texts for your Shopify store
While Alt text is important, not every Shopify store owner knows how to go about it in the right way. Good for you, I have broken the process down into actionable steps. Here you go:
1. Be concise yet very descriptive
A good image Alt text should be concise. It should contain just enough information to describe the image. Words that add no meaning or fluff should be avoided.
Bad example: The image of a white, well-folded t-shirt made out of cotton only.
Good example: A 100% cotton white t-shirt.
2. No Keyword Stuffing
It is helpful to add relevant keywords to your alt text. This attracts image search traffic, but you should not stuff them in. Repeatedly using multiple keywords out of context will likely make your page flagged by search engines.
Bad example: Cloth, gown, red, red gown, embroideries, Shopify, quick sales, red dress sales
Good example: A red gown decorated with embroideries.
3. Don’t include words like “an image of” or “a screenshots of”
Screen readers and crawlers can identify images themselves from the source code. They automatically announce an image as an image. You don’t have to tell them so in the alt text.
If you make this mistake, the screen reader will read out something like “Image, image of an image of a cup on a table.’
But without adding ‘an image of’ to your alt text, it will read normally, ‘Image, image of a cup on a table.
4. Don’t use hyphens
Normally, users don’t include hyphens ‘-’ when they are searching things online. So for SEO reasons, it is best to use what a user would normally input into a search engine.
For example, users will not naturally search for ”shoes-and-bags”. They will just input ‘shoes and bags.’ So, for image alt text Shopify SEO, spaces and normal word structures are always preferred.
5. Make sure each product’s alt tag is unique
One main reason for an alt text is to help the visually impaired understand an image. The purpose is then defeated if one alt tag is not specific or unique enough. Alongside that, having repetitive alt tags for different images might make search engines earmark your content as spam. This will likely hurt your search engine rankings. Ensure your alt tag contains as much unique information about the image as possible, such as the shooting angel, the color, the material, etc.
Bad example: A pair of running shoes
Good example: The rear of a pair of white Xray Footwear, Size 9
Unlike the second, the first is not unique and can easily be repeated for a different item/product.
6. Use keyword terms that your shoppers use
Every target market has search terms peculiar to them. So to attract search traffic, ensure the keywords in your alt text are centered around what visitors search for.
For example, customers are more likely to search for “Cocoa based body cream” instead of “Theobroma cacao-derived body lotion”.
7. No typos
When an alt tag is wrongly spelt, search engines may not understand it. This way, your images won’t show in SERPs when people google images related to your products. This is a total waste of time as it renders the efforts of writing alt tags useless.
8. Don’t give “decorative” photos alt texts
Things like page dividers or trademark designs fall under the category of “decorative” photos. They improve the appearance of objects or visually divide content on a page, but don’t have any context or meaning.
Their alt text is therefore pointless because they won’t help a reader understand the content of the page more. Insert the word “null” in their alt text fields if possible, so that screen readers will skip over them.
9. Add alt text to button images
Does your web page have a button that directs users to another page, or for information submission instead?
Whatever the case, it is important to write an alt text to describe such buttons. This alt text is vital for screen readers and in cases where images don’t load. Just ensure you describe them correctly. For example, you could use ‘a navigation button to move to the next page’ as an alt text, instead of “a button”.
Image ALT tags VS Image file names
Google crawls both Alt tags and image file names. While these two are often used interchangeably, they actually have different functions and structures.
| Image ALT tags | Image file names | |
| Definition | Alt tags are descriptions of an image used by screen readers and search engines to understand the content of an image. | File names are the actual name of an image file, such as “dog.jpg” or “cotton-shirt.png” |
| Location | Alt tags are added to the HTML code of a website, specifically within the “img” tag | File names are the name of the file that is saved on the server or computer |
| Visibility | Alt tags are only visible to users when the image does not load or is blocked by a browser extension. | Site visitors can view image filenames if the website owner has not taken steps to hide them. This can usually be done by right-clicking on the image and selecting “View Image” or “Save Image As” in most web browsers |
| Necessity | Some images don’t need alt tags such as those decorative ones. | All images need a file name before they are locally stored. |
| Structure | Hyphens don’t need to be added in-between words in alt tags. (It’s best to structure your alt tag just like search engine queries) | It is recommended to use hyphens in file names as they are more search engine friendly and can improve your website’s SEO. |
FAQ
Does alt text boost user engagement?
Yes. Alt text can boost user engagement. It creates a better user experience by helping users understand the images that are not loaded properly. Your visitors may interact more and stay longer on your website.
How long should an alt text be for maximum SEO effects?
Shopify claims that your Alt text length is better kept within 125 characters. But what really matters is the quality and relevance of your alt text, not its length. According to an interview with John Muller in April, 2022, a Google Search Advocate:
“…we [Google] don’t have any guidelines with regards to how long your alt text can be…You can put a lot of things in the alt text for an image if that’s relevant for that particular image.”
Nonetheless, try to restrain it to one line. Alt texts beyond the line of an image sometimes don’t appear.
What’s the consequence if I don’t add Alt text for my images?
- When your image does not have an alt text, it will be difficult to be indexed by search engines. You lose opportunities to gain more traffic via image search.
- Visitors might also find it hard to understand how your image relates to your site’s content. Worse, they might even consider your website unreliable and leave for somewhere else.
- Plus, not having alt text will also prevent people using screen readers from understanding your images.
Can alt text be the same as image title?
While it doesn’t impact your SEO negatively, it can be bad for your visitors. So it’s not recommended.
The alt text should describe your image itself. But the image title helps your image make sense in the context instead.
Alt text: A red apron with slits in front
Image title: A red apron with slits in front. Overlap design by Sarah Infantino.
Why is my alt text not showing up?
If your alt text exceeds the image’s width, it will sometimes be hidden entirely. However, this can also happen due to code issues.
You can:
- Try to cut down your alt text length.
- Contact Shopify support. Provide them access to your theme, and they will troubleshoot for you.
- Clear your cache. Modern sites often run many layers of caching simultaneously. As good as this is, the result is that sometimes your newly added alt tags are not updated. Cache-clearing may fix the issue.
