Image alt text is a short written description of a picture, placed in the alt attribute of the <img> tag. Screen readers read it aloud to blind and low-vision visitors, browsers show it when the image fails to load, and Google uses it to understand what the image shows. Google’s image documentation calls alt text the most important attribute for image metadata.
What is image alt text?
It is one attribute in your HTML:
<img src="/img/dalmatian-puppy-fetch.jpg" alt="Dalmatian puppy playing fetch in a garden" width="800" height="533">Google’s own examples run from a missing alt, to a vague one, to a good one: “Dalmatian puppy playing fetch”. The good version names the subject and the action, and it fits the page the image sits on.
Why does alt text matter for SEO?
Here is what it does for you:
- Image search. Google reads alt text, the filename, the caption and the surrounding text to decide what an image is about. Without alt text, the image depends on the text around it.
- Linked images. When an image is a link, Google treats its alt text like the anchor text of a text link. A logo that links home needs the brand name in its alt.
- Accessibility. Screen reader users get the content of the image through alt text. This is the original purpose of the attribute and it also keeps you on the right side of accessibility law in many markets (see accessibility).
- Fallback. If a file is blocked or slow, the alt text shows in its place.
The effect on web rankings is small. The effect on image search and on accessibility is direct, which is why the impact here is Medium and the work is cheap.
How do you write good alt text?
Google asks for “useful, information-rich” text that fits the page. The web.dev accessibility course adds that you should capture the relevant visual information and stay succinct. These rules cover most cases:
| Image type | What to put in alt |
|---|---|
| Informative photo | What it shows, in a short phrase: “Barista pouring oat milk into a flat white” |
| Product photo | Product name plus the detail a buyer needs: “Black leather weekender bag, side view” |
| Image that is a link or button | Where it goes or what it does: “Download the price list (PDF)” |
| Decorative image (divider, background flourish) | Empty alt: alt="" |
| Chart, map or infographic | A one-line summary in alt, and the full data in the text or a caption beside it |
Keep it around 150 characters or fewer; web.dev gives that figure as common advice to avoid reader fatigue, not as a hard limit. Skip “image of” and “photo of”, because screen readers already announce that it is an image.
How do you add alt text across a site, step by step?
- Crawl your site and list every image. Run Screaming Frog (free up to 500 URLs) and open the Images tab, then filter on “Missing Alt Text”. Export the list.
- Sort images into three groups. Informative, functional (inside links and buttons) and decorative. Decide the group before you write a word.
- Write alt for informative images first. Start with the images on your top pages: homepage, product pages, best articles. One plain sentence fragment each.
- Describe the action on functional images. A magnifying glass button gets “Search”, not “magnifying glass”.
- Set
alt=""on decorative images. A missing attribute is a different thing: some assistive tools then read out the filename. An empty attribute tells them to skip the image. - Handle complex images properly. Put a short alt on the chart and the full explanation in the body text, a
<figcaption>or a linked description. - Rename files while you are there. Google recommends short, descriptive filenames such as
my-new-black-kitten.jpgoverIMG00023.JPG. - Make it a publishing rule. Add an alt text field to your editorial checklist and your CMS upload flow, so new images never go live empty.
How do you measure the result?
Alt text does not have its own report, so measure around it:
- Search Console, Performance report: set the Search type to Image and watch impressions and clicks for the pages you fixed.
- Re-crawl: the count of images with missing alt in Screaming Frog should drop to your decorative images only.
- Lighthouse and WAVE: the accessibility score and the “image elements have alt attributes” check should pass.
- Listen once. Open a page with VoiceOver or NVDA and let it read through. Repeated, vague or keyword-heavy alt text is obvious when you hear it.
What mistakes should you avoid?
- Keyword stuffing. Google’s documentation warns against filling alt attributes with keywords. It reads as spam to users and to Google (the keyword density page covers why).
- Identical alt on every image. Ten product photos named “buy shoes online” help nobody. Each alt describes its own image.
- Alt text on decorative images. Reading “blue wavy line” aloud on every section wastes a screen reader user’s time.
- Putting text in images without repeating it. Google does not read your headline from a PNG reliably. Put the words in HTML, and keep the heading structure real.
- Images added by CSS. Google does not index CSS background images, so nothing there can carry alt text or rank in image search.
- Skipping the file size. Great alt on a 4 MB photo still slows the page (see image file size and formats).
Where can you learn more?
The W3C Web Accessibility Initiative has the most complete image decision tree, and the free digital marketing module of the Fe/male Switch startup school covers the on-page groundwork for a new site. Next steps: list your images in an image sitemap if they matter for traffic, and add a check for missing alt to your regular site audit.