Building an ecommerce website is kind of like setting up a storefront on a busy street. You want it to feel welcoming and polished—the kind of place that draws your target audience in at first glance. You carefully arrange your homepage, fine-tune your product pages, and make sure everything reflects your brand’s style and personality.
But even the most beautifully curated storefront falls short if the signs are missing, confusing, or only readable to some. The same goes for your website visuals. That’s where alternative text (or alt text) comes in. It’s easy to overlook, but it plays a big role in how people—and search engines—experience your site. Think of it as the behind-the-scenes signage ensuring everyone knows what they’re looking at, no matter how they’re navigating your site.
Here’s how to write image alt text that works hard for your site.
What is image alt text?
Image alt text, or alternative text, is the brief written description of an image on a webpage. Image alt text plays a crucial role in fostering web accessibility, making content usable for people with disabilities, and improving search engine optimization (SEO). If an image packs a lot of context and information into your site, concise alt text provides meaning in the instances when users cannot see the image content itself.
The alt attribute provides a text equivalent for images; whether through a short phrase or long description, alt text conveys the context of an image when users can’t see the image themselves. On the other hand, empty alt text and poorly written descriptions impede accessibility and prevent you from taking full advantage of effective SEO. A 2024 report found that one-third of images on homepages have missing, questionable, or repetitive alt text. That’s a missed opportunity. After investing time to create a website for your business, alt descriptions are a quick but meaningful way to support how users experience your page content.
Alt text example
Alt text provides meaning when a user cannot see a digital image. For example, if an ecommerce product page includes a photo of a shirt, the descriptive text might read: “A men’s button-down Hawaiian shirt in a navy and white floral print.” This is much more helpful than text that simply reads, “A shirt.”
Why is image alt text important?
Image alt text plays an important role in accessibility, UX, and SEO:
Accessibility
Making your web content accessible to those with varied abilities isn’t just the right thing to do—it can also help you reach more customers. Alt text is an essential part of web accessibility. Those with a visual impairment may use assistive technology such as screen readers. These tools will read aloud the alt text description of an image. With an empty alt attribute, screen reader users will miss out on the important context of images on webpages.
Additionally, an accessible website means more potential customers can engage with your business. To expose your company to the broadest audience, build a website or ecommerce store for all visitors, including those with visual impairments. The World Health Organization estimates that 3.5 billion people will require some kind of assistive technology by 2050 due to aging and other factors. Solutions like screen readers will only become more commonplace.
User experience (UX)
Low bandwidth connection, slow internet speeds, or a poor connection can restrict a user’s ability to view webpages. Why is this relevant? When a user has a slow internet connection or an intermittent connectivity issue, images fail to load but most browsers can still load written content. When an image fails, the user will only see a broken link icon if you have not added descriptive alt text.
To provide a better user experience—especially if the image is included to provide essential context—include the alt text attribute so users are not missing information in the event of a poor connection.
Search engine optimization (SEO)
In ecommerce, descriptive alt text improves your search rankings to drive traffic to your site. Alt text helps search engines understand the images on your webpages. Image SEO aids search engines in categorizing and ranking images across the internet. When you give search engines textual details through alt text attributes, the image will have improved search rankings and be more likely to appear in the search results.
For example, if you sell sun hats, include the specific keywords your potential customers are searching for in Google Images. “Sun hat” is far less effective than “wide-brimmed dark brown canvas sun hat.”
The more specific you are, the more likely your image will pop to the top of the search engine results page (SERP). Alt text is a key factor in a successful ecommerce product page SEO strategy.
How to add image alt text
Most content management systems (CMS) have a simple alt text field for adding your content. You can add alt text when you upload a particular image, or you can add or edit alt text as needed via your media library.
If you are using raw HTML to code your website, use the alt attribute within the <img> tag. For example:
<img src=“image.jpg” alt=“Your alt text here”>
How to add image alt text in Shopify CMS
Here’s how to add alt text to images within your Shopify content management system:
1. From your Shopify admin, go to Products.
2. Click the name of the product that you want to edit.
3. From the product details page, click a product media item to see the preview media page.
4. Click the alt text field.
5. Enter your alt text, and then click Save.
6. Click the back button to exit the preview page.
How to write effective alt text
Whether you are describing simple or complex images, helpful alt text should improve the user experience on your website. To write effective alt text, there are a few best practices to follow:
Be specific but concise
Adequately describe the content of the image to paint the picture for the user. If appropriate for the context, describe what the image conveys rather than just the physical details. The maximum length for alt text on Shopify CMS is 512 characters, but 125 or less is ideal.
Do not include “image of” or “picture of” at the beginning of alt text because screen reader technologies add it in automatically. It’s annoying for users to hear, “Image of image of [description].”
Avoid duplicative text
If an image conveys the same message that is already present in the surrounding text, avoid using duplicative verbiage. For example, if an infographic created solely for visual communication includes duplicate text from the body of the webpage, there is no need to repeat that information. Simply describe what the infographic is about without repeating all the same information.
Use keywords
Write optimized alt text by incorporating relevant keywords in a natural way. This might include analyzing user search intent to inform your strategy. Avoid keyword stuffing because this strategy can backfire when it comes to SEO. Algorithms can easily detect when you just have a mishmash of keywords on your site without any coherence or logic.
Omit alt text for decorative images
Purely decorative or background images, as well as simple graphic designs, should not include alt text. If the description of a decorative image would not provide valuable information to a user, alt text is not necessary. For example, imagine someone is listening to your impressive customer success story via their screen reader only to be interrupted by “Image of a green swirling graphic design.” This interrupts their experience on your webpage.
For decorative images, an empty alt attribute (alt="") signals screen readers to skip the image.
Image alt text FAQ
What is the alt text of an image?
Alt text, also called the alt tag or alternative text, is a brief description of a digital image, typically added via the alt attribute in an image’s HTML code. Screen readers for people who are visually impaired read this text out loud, but it’s also useful when a bad internet connection won’t allow images to load. It also provides SEO value by helping search engines understand the image.
What is the difference between alt text and image description?
An image description or image caption, if used, will always visibly appear on the webpage. An image description should provide additional information or context beyond what someone looking at the image could perceive. Meanwhile, alt text will only appear if the image does not load. Those using a screen reader will hear the text but not read it, so the text should clearly and succinctly describe the image for someone who cannot see it.
What are the rules for alt text?
The best practices for alt text include using specific language to describe the image and considering the context of how it relates to the content on the page. However, alt text is not always helpful; images that are purely decorative (such as simple graphics used to visually break up a body of text) should not include alt text, as it would not provide any extra value to the user.
What is a good example of alt text?
Good alt text is specific and considers the webpage’s content. For example, a photo in a recipe roundup featuring a brand’s sauce collection might include alt text for an image such as “A plate of chicken wings on a kitchen table next to a bottle of Spicy Jane’s Chili Oil.” This alt text is specific to paint the picture and includes keywords important for search engine optimization.
