# Alt Text (Alt Attribute): What It Is and How to Write It

> What alt text is, what Google and screen readers use it for and how to write it on your product pages.

URL: https://clione.ai/glossary/alt-text/
Lang: en

In your store admin it shows up as a small field next to each photo, "Add alt text," and in audits as "images missing alt." Plenty of people call it the "alt tag," but it is not a tag: it is **an attribute of the `img` tag**, the text that takes the image's place when the image is not seen. It matters to a store because of two readers at once: the shopper using a screen reader and the search engine trying to understand what is in the photo.

## How it works

The HTML specification defines it as the text that acts as an alternative to the image, for whoever cannot see it. The practical rule it proposes is a question: **if you removed the image, what text would you put in its place?** The cases follow from it:[^whatwg-alt]

- **An image that carries information**: the text says what it contributes, not what the file is.
- **A decorative image**, which adds nothing: the attribute is empty, `alt=""`. Empty is not the same as missing: empty tells the machine it can ignore the image.
- **An image that is the only content of a link or a button**: the text describes where it leads or what it does, not the drawing.
- **An image with a caption next to it**: the alt text does not repeat the caption.

The W3C's accessibility guidelines (WCAG 2.2) make it a level A requirement, the most basic: **all non-text content that is presented to the user has a text alternative that serves the equivalent purpose**, and what is purely decorative is marked so that assistive technologies can ignore it.[^wcag-111]

### What Google does with it

Google explains that it uses alt text, **along with computer vision algorithms and the contents of the page**, to understand what an image is about. If the image is a link, the alt text works as the link's anchor text. What it asks for is useful, information-rich text that uses keywords appropriately and in the context of the page.[^google-images] Its example, with a photo of a puppy, goes from worst to best: no attribute; a string of words like "puppy dog baby dog pup pups puppies doggies"; "puppy"; and, best, "Dalmatian puppy playing fetch." About the string it warns that **it results in a negative user experience and may cause your site to be seen as spam**.[^google-images]

There is a second Google rule that affects stores that generate text in bulk. Its guidance on AI-generated content asks you to review everything generated by hand before publishing it, and **extends that review to metadata, including the alt text of images**, because it can appear in search results.[^google-genai-content] A model that describes a photo badly produces an [AI hallucination](/glossary/ai-hallucination/) just as if it got the [product description](/glossary/product-description/) wrong.

## In a store

A **fictional example**: the [product page](/glossary/product-page/) of a camera backpack, with four images.

| Image                                   | Weak alt text                                   | Useful alt text                                                      | Why                                                                                                       |
| --------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Main photo, the backpack from the front | `IMG_4031.jpg`                                  | Gray 20-liter camera backpack, front view with the rain cover stowed | Says what is seen and what sets this product apart                                                        |
| Detail of the interior                  | `backpack backpack camera backpack photography` | Interior with padded dividers: one camera body and three lenses      | A string of words describes nothing, and Google warns it may make it see the site as spam[^google-images] |
| Size chart as an image                  | `dimensions`                                    | Exterior dimensions: 12 × 7 × 18 in, weight 3 lb                     | If the image has text, the alt text provides it; better still, write it on the product page too           |
| Decorative icon between sections        | `icon`                                          | (empty)                                                              | It is decoration: it is marked `alt=""` so the screen reader skips it[^whatwg-alt]                        |

In the code, the difference between the last two rows is this:

```html
<img src="backpack-dimensions.png" alt="Exterior dimensions: 12 × 7 × 18 in, weight 3 lb" />

<img src="divider.svg" alt="" />
```

In Shopify, each product image's alt text is written from the file preview, on the product page in the admin. **The field takes up to 512 characters, and Shopify recommends staying at 125 or fewer**, with brief, descriptive text.[^shopify-alt]


That alt text is a slot for keywords. It is a description for someone who cannot see the image, and Google says it without detours: stuffing the attribute with keywords gives a negative user experience and may make it consider the site spam.[^google-images] The other frequent confusion is thinking every image needs text: **a decorative one takes an empty attribute**, and describing it only adds noise for whoever is listening to the page.[^wcag-111]


## How to check it

1. **Open a product page's source code and search for `<img`.** Every image should have `alt`: with text if it informs, empty if it decorates.[^whatwg-alt]
2. **Separate the three cases**: no attribute, empty and with text. An image with no attribute is a failure; an empty one is a decision.
3. **Read the texts aloud without looking at the photos.** If you would not know which product it is or what each image shows, the text does not stand in for the image.
4. **Look for images with text inside**, like size or dimension charts: that information has to be in text as well.
5. **If an AI wrote the texts, review a sample by hand** before publishing them.[^google-genai-content]

## Related concept: caption and meta title

Alt text gets confused with other texts around an image. The **caption** is seen on the page, next to the image, and the HTML specification asks that the alt text not repeat it: each does a different job.[^whatwg-alt] The **file name** does not count as alt text either: in Google's example, an image with its file and no attribute is the bad case.[^google-images] And none of them is the [meta title](/glossary/meta-title/), which does not describe an image but the whole page.

To keep going, the [catalog and entities reading path](/learn/catalog-and-entities/) orders the rest of the product page terms.