Alt text and product image SEO for e-commerce
23 September 2026 at 12:01 — Fabio Marinangeli

In short: alt text is the written description of an image. Screen readers read it aloud and Google uses it to understand what a photo shows. In an online store, every product image needs one: what the item is, the attribute that sets it apart (colour, material, size) and the angle. Keep it short and natural, with no keyword lists.
- Alt text exists for people who cannot see the image; the SEO benefit follows from that.
- Each photo on a product page shows something different, so each photo gets its own alt text.
- Since 28 June 2025, accessibility of consumer e-commerce services is a legal requirement in the EU, with an exemption for microenterprises.
- File names, format and placement on the page matter too, though less than the alt text.
- On Instagram and LinkedIn you add alt text when you upload a post: it makes content accessible, but your website is still what gets you found.
Many Shopify and WooCommerce catalogues have hundreds of photos named IMG_4521.jpg and an empty alt field: Google Images has little to index, and screen reader users hear only "image", or worse, the file name. Here is how to fix it.
What is alt text and why does it matter for an online store?
Alt text (alternative text) is the value of the alt attribute on an <img> tag: a description that stands in for the image when it cannot be seen. It was created for accessibility, and that is still its main job.
For an online store it matters for two practical reasons:
- Accessibility: shoppers using a screen reader know what the photo shows and can decide whether to buy. Shopify also points out that alt text is displayed when an image fails to load. When alt text is missing, MDN notes that some screen readers announce the file name instead, which in many catalogues is a meaningless string.
- Search: Google says it uses alt text together with computer vision and the page content to understand the subject of an image.
B2B works the same way for components, machinery and software screenshots: a buyer searching Google Images for "DN50 stainless steel ball valve" is more likely to find the right photo if someone has described it. If you sell to both businesses and consumers, the two sides of your catalogue have different needs: see the guide on telling B2B and B2C strategies apart.
How do you write alt text for a product image?
Describe what the photo shows, in the order a buyer needs it: what it is, what makes it different, and the angle it was shot from. A template that works for almost any catalogue is product type + distinguishing attribute + view or detail.
Google illustrates the progression with a simple example: no alt, then an alt stuffed with keywords (to avoid, because it can make the site look like spam), then "puppy", and finally "Dalmatian puppy playing fetch", the best version.
| Image | Alt text to avoid | Alt text that works |
|---|---|---|
| Office chair, main photo | "office chair ergonomic chair cheap chair best chair" | "Black ergonomic office chair with adjustable lumbar support, front view" |
| Same chair, close-up | "IMG_0045" | "Knob that adjusts backrest tension on the ergonomic chair" |
| Colour variant | The same alt as the black version | "Ergonomic chair in light grey fabric, three-quarter view" |
| Technical spare part (B2B) | "product" | "DN50 stainless steel ball valve with lever handle, side view" |
| Business software screenshot (B2B) | "screenshot" | "ERP dashboard showing open orders, stock levels and monthly revenue" |
| Corporate event photo (social) | "event" | "Expert panel at the annual environmental sustainability conference" |
| Header logo linking to the home page | "logo" | The company name followed by "home page", i.e. where the link goes |
| Decorative background or icon | "shoe sale banner offers discounts" | An empty alt attribute, so screen readers skip it |
A few practical rules complete the template:
- Skip "image of" or "photo of": the screen reader already announces that it is an image.
- Empty alt for decorative images: the W3C guidance calls for an empty alt on purely decorative images and on images whose text already appears next to them.
- Clickable images: for an image used as a link or button, the W3C asks you to describe the action or destination, not the picture: "search" rather than "magnifying glass".
- Images containing text or data: size charts and spec sheets also belong on the page as real text.
- Describe, don't sell: alt text says what is visible; benefits and selling points go in the description or caption. For an ERP screenshot, say which data it shows, not "intuitive software that saves you time".
- Use your catalogue's terms: name products, materials and finishes with the same words as your titles and product pages, so the alt text, the page and on-site search all say the same thing. A part number helps when buyers actually search for it, alongside the product name.
Alt text, title and caption: what is the difference?
They are three different fields, and they often get mixed up, even in CMS admin panels.
| Field | Who sees it | What it is for |
|---|---|---|
| Alt text | Screen readers, browsers when the image fails to load, search engines | Replaces the image with a description of its content or function |
| Title attribute | Usually shown as a tooltip when the mouse rests on the image; keyboard and touch users may never see it | Optional extra information. MDN states that it is not a substitute for alt text and should not repeat the same text, because some screen readers would read it twice |
| Caption | Everyone, below or next to the image | Visible context; Google uses it, along with titles, to understand what the image is about |
| File name | Almost nobody, but it appears in the image URL | According to Google, it gives very light clues about the subject |
In WordPress and WooCommerce the media library shows all of these fields together: the one that matters for accessibility and search is "Alternative Text".
Does the European Accessibility Act require alt text?
For many online stores, yes, indirectly. Directive (EU) 2019/882, known as the European Accessibility Act, applies accessibility requirements to e-commerce services from 28 June 2025. In Italy it was transposed by Legislative Decree 82/2022, which lists "e-commerce services" among the services covered. Providing a text alternative for non-text content is success criterion 1.1.1 of WCAG, the international web accessibility guidelines.
Two clarifications:
- The Italian decree defines e-commerce services as those provided online at the request of a consumer. A portal reserved for resellers and business accounts is not the typical case, but plenty of B2B companies also sell to consumers.
- Microenterprises providing services are exempt; the decree defines them as businesses with fewer than 10 staff and annual turnover or balance sheet total of no more than 2 million euros.
Alt text is only one part of the requirements, alongside contrast, keyboard navigation and checkout. If you sell into other EU countries, check each national transposition; if your case is unclear, ask a lawyer. Writing alt text is worth doing anyway.
File names, WebP and placement: what matters beyond alt text
Alt text is one signal among several. Google's image guidelines list practices that translate into specific checks for an online store.
| Element | What to do | Example |
|---|---|---|
| File name | Short and descriptive, words separated by hyphens | black-ergonomic-chair-front.webp instead of IMG_4521.jpg |
| Format | WebP or AVIF for photos, with an extension that matches the file type | Lossy WebP images are 25-34% smaller than JPEGs of equivalent quality |
| Markup | Product images belong in <img> or <picture>, not in CSS backgrounds | Google does not index images loaded as a CSS background-image |
| Responsive images | With srcset or <picture>, always provide a fallback image in the src attribute | Google recommends it because some browsers and crawlers do not understand srcset |
| Placement | Close to the text about that product | Gallery next to the title, description and specs |
| Structured data | The image property filled in on the page's structured data | Google lists it as a required field for an image to get a badge or rich result in Google Images |
| Discovery | An image sitemap for photos Google might not find on its own | Images served from a CDN on a domain other than the store's |
Shopify already serves images as WebP or AVIF to browsers that support them; on WooCommerce it depends on your theme and optimisation plugins. File names, on the other hand, are up to you at upload time: on Shopify, the help center notes, a file name cannot be changed once the image has been uploaded.
How does alt text help visual search on Google?
It helps when the image and the text say the same thing. Google works out what a photo shows from the image itself, the alt text, the caption and the nearby text: the more consistent they are, the more likely the photo is to show up for the right query in Google Images.
For Google Shopping, the main feed image in Merchant Center must be clean: no promotional text, watermarks or borders. Google recommends 1500×1500 pixels or more, and from 31 January 2027 the minimum will be 500×500. Graphics with prices stay on your site and social channels, with their own alt text.
A well-described catalogue is also easier to interpret for AI-driven search engines, which read the page text.
How do you add alt text on Instagram and LinkedIn?
On social media, alt text plays a different role than on your website: it serves screen reader users, other members do not see it, and the platforms present it as an accessibility feature. For a B2B company posting trade shows, facilities, products and software screenshots, it still takes only a few seconds and is worth doing.
- Instagram: since 2018 it has generated automatic alternative text with object recognition, listing items the photo may contain. When you upload, you can write your own custom alt text, richer and more precise: for a product or event photo it is almost always better than the automatic one.
- LinkedIn: after uploading the image, on desktop you click "Alt.text" below the photo and save; in the app you tap "ALT" below the image. LinkedIn may add automatic alt text to images that lack it and only alerts you when you upload from a desktop computer, so it is worth checking. You can also add alt text to single image ads in Campaign Manager.
In company posts the split is simple: the caption gives the context and the benefits, the alt text describes what is visible. "Expert panel at the annual environmental sustainability conference" is good alt text; why it was worth attending belongs in the post copy. For the channel as a whole, see the B2B social media strategy guide.
How do I find images without alt text on my site?
Before rewriting anything, you need to know where to start. These tools flag images with no alternative text:
- Lighthouse by Google: one of the checks behind its accessibility score is "Image elements have [alt] attributes".
- axe by Deque, with the image-alt rule: it checks that every image has alternative text or is marked as decorative.
- WAVE by WebAIM, available online by entering a page address or as an extension for Chrome, Firefox and Edge.
- The Shopify products CSV, where rows with no value in the alt text column are the images to fix.
These checks tell you whether alt text exists, not whether it is any good: "IMG_0045" passes. Quality needs spot checks, ideally by listening to the page with a screen reader.
Putting it into practice on Shopify and WooCommerce
Take a typical scenario: an office furniture store with 600 products and about 3,000 images, almost none with alt text. Rewriting them one by one is not realistic; working with templates and priorities is.
- Take inventory. On Shopify, export the products CSV: it has a column for each image's alt text and can be re-uploaded to update them in bulk; variant images have a separate column, so check them separately. On WooCommerce, alt text lives in the "Alternative Text" field of the WordPress media library, and variation photos need checking one by one too.
- Write one template per category. For chairs: type + upholstery + colour + view. For technical spare parts: type + material + size or part number + view. Write it down for whoever uploads products, together with a glossary of the terms to use.
- Start where it pays off. Use GA4 and Search Console to find the categories and products with the most traffic or sales, and begin with their main photos.
- Automate the draft, review by hand. Shopify's media editor can already suggest alt text for images that have none. On large catalogues, an n8n or Make workflow has an AI model suggest alt text from the title, attributes and photo; a person checks it before publishing. It is the kind of e-commerce automation worth building once and reusing: more examples in the guide to business process automation, in the article on AI in content management systems and, for multilingual catalogues where alt text needs translating too, on AI translation tools.
- Make the rule permanent. No new product goes live without alt text and a descriptive file name. Spot-check with a screen reader (VoiceOver or NVDA) and track Google Images impressions in Search Console.
If your catalogue needs rethinking along with your site, see the websites and e-commerce service. To fit image work into a wider SEO plan, read how to choose SEO consulting; for market context, the future of B2B e-commerce.
Mistakes to avoid
- Stuffing alt text with keywords. Google treats it as a poor user experience and a possible spam signal.
- Writing generic alt text. "Product", "photo 1" or "screenshot" tell nothing to listeners or searchers.
- Copying the product title onto every photo. Ten images with the same alt say nothing new; describe the view or the detail.
- Turning alt text into a slogan. If the text does not match what the photo shows, screen reader users get false information.
- Giving decorative images an alt. Backgrounds, dividers and repeated icons need an empty alt, or the screen reader reads every one of them.
- Using the title instead of alt, or duplicating them. The title does not replace the alt, and the same text in both fields may be read twice.
- Putting key information only inside the image. Size charts, prices and specs must also exist as text on the page.
Frequently asked questions (FAQ)
How long should product image alt text be?
One short sentence, usually within 125 characters, as Shopify recommends (the field accepts up to 512). Anything more belongs in the page description.
Does alt text really improve product image SEO?
It helps, because Google uses alt text together with computer vision and page text to understand what an image shows. On its own it is not enough: file name, placement on the page, structured data and photo quality matter too.
Do decorative images need alt text?
No. For purely decorative images the W3C guidance calls for an empty alt attribute, so screen readers ignore them. Any image that carries information useful for the purchase should be described.
Are alt text and the title attribute the same thing?
No. Alt text replaces the image for people who cannot see it and is the field that matters for accessibility and search; the title is optional extra information shown on mouse hover. Do not use the title instead of alt text, and do not repeat the same text in both.
Does the European Accessibility Act apply to B2B e-commerce?
The Italian decree that transposes it covers e-commerce services offered to consumers, with an exemption for microenterprises providing services. A portal reserved for business customers is not the typical case; if in doubt, get legal advice.
Can I generate alt text with AI?
Yes, as a first draft from product photos and attributes, which helps on catalogues with thousands of images; Shopify, LinkedIn and Instagram already offer automatic text. Human review is still needed, because a model can get the colour, material or trade name wrong.
Should I rename image files that are already live?
Only selectively: renaming changes the image URL, so it makes sense for the main photos in your most important categories. For new images, use short, descriptive, hyphenated names from day one.
Sources
- Google Search Central: image SEO best practices
- W3C WAI: alt decision tree
- W3C WAI: functional images
- W3C: WCAG 2.2, success criterion 1.1.1 non-text content
- MDN Web Docs: the img element
- Italian Legislative Decree 82/2022 transposing Directive (EU) 2019/882, Normattiva
- Shopify Help Center: adding alt text to product media
- Shopify Help Center: the product CSV file
- Shopify Help Center: images and supported formats
- Google Merchant Center: image link requirements
- Google for Developers: the WebP format
- Instagram: automatic and custom alternative text
- Instagram Help Center: automatic alt text
- LinkedIn Help: add alternative text to images
- Chrome for Developers: Lighthouse accessibility checks
- Deque University: axe image-alt rule
- WebAIM: WAVE Web Accessibility Evaluation Tools
If you want to know where to start with your catalogue, book a free assessment.
Build a digital ecosystem that works for you.
Subscribe to receive exclusive strategies and automations straight to your inbox.