Skip to content
BACK TO BLOG
Websites

Alt text and product image SEO for e-commerce

23 September 2026 at 12:01 — Fabio Marinangeli

Share
Fallback image for the article: Alt text and product image SEO for e-commerce

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.

ImageAlt text to avoidAlt 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 variantThe 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.

FieldWho sees itWhat it is for
Alt textScreen readers, browsers when the image fails to load, search enginesReplaces the image with a description of its content or function
Title attributeUsually shown as a tooltip when the mouse rests on the image; keyboard and touch users may never see itOptional 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
CaptionEveryone, below or next to the imageVisible context; Google uses it, along with titles, to understand what the image is about
File nameAlmost nobody, but it appears in the image URLAccording 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.

ElementWhat to doExample
File nameShort and descriptive, words separated by hyphensblack-ergonomic-chair-front.webp instead of IMG_4521.jpg
FormatWebP or AVIF for photos, with an extension that matches the file typeLossy WebP images are 25-34% smaller than JPEGs of equivalent quality
MarkupProduct images belong in <img> or <picture>, not in CSS backgroundsGoogle does not index images loaded as a CSS background-image
Responsive imagesWith srcset or <picture>, always provide a fallback image in the src attributeGoogle recommends it because some browsers and crawlers do not understand srcset
PlacementClose to the text about that productGallery next to the title, description and specs
Structured dataThe image property filled in on the page's structured dataGoogle lists it as a required field for an image to get a badge or rich result in Google Images
DiscoveryAn image sitemap for photos Google might not find on its ownImages 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

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.