Alt Text for Product Images: Examples and Rules

Alt text for images describes what a customer would miss without seeing the picture. For product photos, write a short phrase naming the product and its visible colour or view. Give each image a description that matches the information it adds.

What Image Alt Text Does

Alt text is the short written description of an image that screen readers can speak and search engines can use to understand the image. It sits in the image’s HTML alt attribute and can also appear when the image fails to load.

A customer using a screen reader needs the product information the photo conveys. A rear view might show a dress’s tie fastening. A close-up might show the texture of a lampshade. Repeating the product title on both images misses those differences.

Google uses alt text together with computer vision and the surrounding page content to understand an image. Its image SEO guidance recommends useful descriptions and warns against keyword stuffing. Alt text helps describe the image’s subject, but it doesn’t guarantee a ranking improvement.

AI tools that read a page’s text can use the description as image context. Whether a particular tool reads alt text depends on how it retrieves the page. Alt text alone doesn’t guarantee that an AI shopping tool will find or recommend your products.

Image search engine optimisation (SEO) also includes short descriptive filenames and compressed files that retain useful detail. Product structured data supplies separate facts, such as price and availability. Use the guide to product schema to describe those facts without packing them into the image description.

The Australian Human Rights Commission’s digital accessibility guidelines identify missing alternative text as a barrier for screen-reader users. A useful description helps a customer understand the product before buying.

How to Write Alt Text for Product Images

Describe the product, colour and view in one short phrase when those details are visible and useful. You need access to the product images and permission to edit their text in your store’s admin.

1. Open the exact image you’re describing. Identify what it adds beyond the product title and nearby text.
2. Name the product naturally. Use a model or product name when it identifies the pictured item, then add the visible detail the customer needs.
3. Describe the relevant colour or view. For example, write “Navy wrap dress, rear view showing waist tie”. Don’t guess a material from appearance alone.
4. Read the phrase without looking at the picture. Check that it explains the image’s contribution and remove sales language or extra search terms.
5. Save the text and inspect the product page. Confirm that the main image and each gallery image carry the intended description.

A product name is useful for SEO when it describes the photo. Adding “best”, “cheap” or unrelated category keywords makes the description harder to hear. You don’t need to begin ordinary product alt text with “image of”.

If every gallery image has identical text, review what each view shows. If an audit still reports missing alt text after you save it, inspect the rendered image. A theme or gallery component might use a different image field.

Alt Text Examples

These hypothetical examples describe different product images. The stronger version identifies visible details without making a sales claim.

Product photo	Poor alt text	Useful alt text	Why it works
Apparel: front of a green shirt	Best shirt cheap shirts sale	Olive button-front shirt with short sleeves	Names the garment and its visible features
Apparel: back of a dress	Dress	Navy wrap dress, rear view showing waist tie	Explains what the rear view adds
Homewares: lamp on its own	Beautiful lamp for every home	Cream table lamp with pleated shade	Describes the pictured item without praise
Homewares: close-up of a mug	Mug image	Blue mug, close-up of handle and speckled glaze	Identifies the detail in this view
Electronics: side of headphones	Wireless noise-cancelling headphones Bluetooth audio best	Black over-ear headphones, side view of control buttons	Focuses on visible information
Electronics: laptop connection panel	Laptop	Silver laptop, left side showing two USB-C ports	Gives the detail a customer would otherwise miss

Use the actual product name where it helps identify the image. Keep features such as battery life or water resistance in the product description unless the image itself communicates them.

When to Leave Alt Text Empty

Use empty alt text, written as alt="", when an image is decorative and adds no information or function. A background flourish beside a complete heading is one example. Empty alt text lets a screen reader skip the decoration.

The W3C WAI alt decision tree distinguishes informative images from decoration and images used as controls. Decide from the image’s purpose on that page. An empty attribute is different from a missing attribute.

A product photograph usually supplies information, so it usually needs a description. An image that is the only content of a link needs text explaining its destination. A search icon used as an unlabelled button needs an accessible name for the search action. Don’t mark either as decorative simply because it is small.

If an image contains information already written beside it, consider whether describing it would repeat the same information. If it contains a size chart or other detailed instructions, provide the full information as readable page text.

Adding Alt Text on Shopify and WooCommerce

Add alt text to the image’s own field. A caption or media title is a separate field and doesn’t replace the alt attribute.

Shopify

Shopify’s Help Center gives this desktop workflow for product media.

1. Open Products in your Shopify admin and select the product.
2. Select the product media item to open its preview.
3. Choose Add alt text and enter the description.
4. Choose Save alt text, then close the preview.
5. Open the storefront product page and check the corresponding image’s description. Repeat for gallery images that add different information.

Shopify’s media editor can suggest text when the field is empty. Review the suggestion before accepting it. A generic description of a white background doesn’t explain a product’s fastening or controls.

WooCommerce

WooCommerce uses images from the WordPress Media Library for product images and galleries. WordPress stores the description in the image’s Alt Text field.

1. Open All Products under Products and select the product.
2. Select Set product image or open the existing product image. Choose the correct attachment in the Media Library.
3. Enter the description in Alt Text in the attachment details. WordPress automatically saves changes in this view.
4. Confirm the selected product image. Use Add product gallery images to select and describe the other gallery attachments.
5. Save the product changes and inspect the storefront page. Check the rendered main image and a gallery image, since the theme controls their output.

If the wrong description appears, match the attachment to the displayed image before rewriting it. A duplicate upload can have a separate Alt Text field even when the pictures look identical.

Alt Text at Scale

Start with missing descriptions on active product pages, especially photos that show differences between variants. Then review gallery views that explain a detail customers use to choose. Track each image with its product identifier and description so text doesn’t move to the wrong variant.

AI alt text generators analyse an image and draft a description. Some also use catalogue context to supply product names. A person must check the pictured colour and product identity before publishing. A plausible sentence can still describe the wrong item.

Choose a workflow according to how much review and store integration you need.

Option	Suitable task	What to check
Manual Shopify or WordPress image fields	A small set of products needing careful descriptions	Each view gets text appropriate to its purpose
Shopify media editor suggestions	Filling an empty field while editing an image	The suggestion identifies the product and the visible detail
AltText.ai	Generating descriptions with product context and store integrations	Product names match your catalogue and generated text reaches the correct image
A free starting allowance or single-image generator	Trying an AI generator on a small sample	The allowance covers generation, and you can edit or export the result

AltText.ai lists a free starting allowance and integrations for Shopify and WordPress. Treat free generation as a way to assess the output before choosing a catalogue-wide workflow. Compare bulk processing and review controls, plus whether the tool preserves existing descriptions.

Before generated text goes live, compare it with the original image and its catalogue record. Remove invented materials or features. Check branded colour names against what the photo shows, and add the view when it distinguishes gallery images. Keep decorative images empty where appropriate.

Process a small batch first. Inspect the descriptions on the storefront and read them with a screen reader. The expected result is a useful description for each informative image, with decoration skipped. If names repeat or variants get mixed up, correct the mapping and review process before generating the next batch.