Alt text: what it is, why it matters, and how to write it
Alt text helps search engines and screen readers understand images. Learn how to write useful, non-spammy alt text with examples and quick audits.
Alt text (short for “alternative text”) is the text you attach to an image so people and machines can understand what the image shows when the image can’t be seen. In HTML it looks like this:
<img src="/images/lcp-example.png" alt="LCP chart showing a 2.1s Largest Contentful Paint after optimization">
If you only remember one rule: alt text should describe the image in plain language, and it should make sense on this page.
Why alt text matters (and when it matters less)
Alt text helps in three practical ways:
- Accessibility: Screen readers read alt text aloud. If you write nonsense, you punish real users.
- Image understanding: Search engines use alt text as a hint to interpret the image and connect it to the page topic.
- Fallback UX: When images fail to load, alt text is the only thing left besides a broken box.
It matters most when images carry meaning: charts, screenshots, product photos, UI steps, infographics. It matters less for purely decorative flourishes.
Good alt text vs bad alt text (quick examples)
Bad (too vague):
- “image”
- “screenshot”
Bad (spam):
- “seo audit tool best seo checker free seo audit website audit tool”
Good (specific, short, matches context):
- “Screenshot of the Fennec SEO Checker audit summary showing 3 critical issues”
- “Product photo: red running shoes with white sole, side view”
- “Chart: organic traffic down 40% after a canonical tag mistake”
A simple way to write alt text that doesn’t feel awkward
I use this mental template:
- What is it? (photo, screenshot, chart, icon)
- What’s the important detail? (the thing the reader needs)
- Optional context if it clarifies (page name, number, key label)
You don’t need full sentences. You do need accuracy.
Edge cases people mess up
Decorative images
If an image is decoration only, use empty alt text:
<img src="/images/divider.svg" alt="">
That tells screen readers to skip it. Otherwise they read “divider” fifty times on a long page. It’s exhausting.
Linked images
If an image is a link, the alt text often becomes the link text. Make it meaningful:
<a href="/audit/">
<img src="/images/button.png" alt="Run a free SEO audit">
</a>
Screenshots
For UI screenshots, include the screen name and the element that matters:
- “GSC dashboard showing clicks and impressions trend for the last 28 days”
Don’t list every button. That’s not alt text, that’s a transcript.
How to audit alt text quickly
Two quick checks catch most issues:
- Missing alt:
<img ...>with noaltattribute. - Empty-but-not-decorative:
alt=""on a chart or product image.
If you’re working on a site you don’t want to inspect manually, use a crawler-based audit. If you’re reviewing a single page fast, a browser extension is usually enough.
- Try the SEO Audit Tool to scan for image-related issues at site level.
- Use the Chrome Extension when you’re checking pages as you browse.
Link back to the glossary
If you want the one-line definition, the glossary entry is here: Alt Text in the Glossary.