Missing alt text means an <img> element has no alt attribute. Screen readers then announce the file name or skip the image, and search engines lose one of the clearest descriptions of what the image shows. Every meaningful image needs a short, literal description, and every purely decorative image needs an empty alt="", so assistive technology knows to ignore it.
What alt text is
The alt attribute holds a text alternative for the image:
<!-- Missing: screen readers may read out "IMG_4821.jpg" -->
<img src="/images/IMG_4821.jpg">
<!-- Meaningful image: describe what it shows -->
<img src="/images/trail-runner-side.jpg" alt="Grey trail running shoe with a deep lug sole, side view">
<!-- Decorative image: empty alt, so it is skipped -->
<img src="/images/divider-wave.svg" alt="">
The text is read aloud by screen readers, shown when the image fails to load, and used by search engines to understand the image and the page around it.
Why it matters
- Accessibility. WCAG success criterion 1.1.1 requires a text alternative for all non-text content. Missing alt text is one of the most common accessibility failures, and it is also flagged by Lighthouse's accessibility audit.
- Image search. Search engines use alt text together with computer vision and the page content to understand an image. Without it, the image has less chance of ranking in Google Images.
- Linked images. When an image is a link, its alt text acts as the anchor text for that link. Describe where the link goes or what it does, such as "Example Store home" for a linked logo. A linked image without alt is a link with no label.
- AI search. AI features in Google Search build on the same index and page understanding. Images with clear alt text are easier to match with the text they illustrate.
Good alt text, bad alt text
| Image | Bad | Good |
|---|---|---|
| Product photo | alt="shoe" | alt="Grey trail running shoe with a deep lug sole, side view" |
| Chart | alt="chart" | alt="Line chart: organic clicks grew from 2,000 to 9,000 between March and August" |
| Team photo | alt="best seo agency seo experts seo services" | alt="Five members of the support team at a standing desk" |
| Linked logo | alt="logo" | alt="Example Store home" |
| Banner with text | alt="banner" | alt="Summer sale: 20% off all trail shoes" |
| Decorative divider | alt="divider image" | alt="" |
Describe what the image shows and why it is on the page. When the image contains text, the alt contains that text. Do not start with "Image of", because screen readers already announce it as an image, and do not stuff keywords, which reads as spam and helps nobody.
Why images end up without alt text
- Uploads without a description. The CMS has an alt text field, but nobody fills it in.
- Components that do not pass it through. A custom image component or theme snippet that drops the
altattribute even when the CMS has one. - Content pasted from elsewhere, such as images copied from a document into a rich text editor.
- Old content created before alt text was part of the publishing checklist.
How to find images without alt text
- Check one page. In DevTools, run
document.querySelectorAll('img:not([alt])')in the console. Each result is an image with no alt attribute. Lighthouse's accessibility audit lists them too. - Check every page. UpCrawler flags Images missing alt attribute on every crawled page that has at least one image without an
altattribute, with the number of images and examples from the page. It reports missing attributes, not the quality of existing alt text, so review the wording yourself. - Look for the template. If the same image appears on every page, such as a logo or a footer badge, one fix in the layout clears the issue across the whole site.
How to fix it
- Fix shared templates first. Logos, icons and product cards appear on many pages, so they remove the most occurrences per change.
- Write alt text for meaningful images: what the image shows, in one short sentence.
- Mark decorative images with
alt="". Do not omit the attribute; an empty value is a deliberate signal. - Make alt text required in the CMS workflow, so new images cannot be published without it.
- Re-crawl to confirm the count drops.
alt is a required prop on next/image, so TypeScript already catches missing values. Pass real data through instead of a placeholder:
import Image from 'next/image'
<Image
src={product.image.url}
alt={product.image.alt}
width={800}
height={600}
/>
Use alt="" for decorative images, and do not repeat a caption that already sits next to the image. If the CMS field is often empty, fall back to something descriptive such as the product name, never to the file name.
- Open Media, then Library, select an image and fill in Alternative Text.
- The Media Library value is copied when you insert an image. Images already in posts keep their old value, so edit existing image blocks too, or use a plugin that syncs alt text into published content.
- If alt text is set but missing on the page, the theme is dropping it. Check that it uses
wp_get_attachment_image(), which outputs the alt attribute automatically.
- Open a product, click an image under Media, then Add alt text. Collections and blog posts have the same option on their images.
- Themes that render images with the
image_tagfilter output the stored alt text automatically:
{{ product.featured_image | image_url: width: 800 | image_tag }}
When the alt field is empty, image_tag falls back to the product title for product images, which is rarely a good description. Write real alt text, or pass it explicitly with image_tag: alt: …. If your theme writes <img> tags by hand, add alt="{{ image.alt | escape }}" to each one.
Let AI fix it, page by page.
Paste this prompt into AI with your project open. In UpCrawler, every affected page comes with a prompt like this, already filled in with its URL.
Descriptive alt on every meaningful image and empty alt="" on decorative ones. Fix it in the image component or template so it applies everywhere that image renders.
Frequently asked questions
Is alt text important for SEO?
Yes, mainly for image search, and as anchor text when the image is a link. Search engines use it together with the page content to understand what an image shows. It is even more important for accessibility, which is a legal requirement in many countries.
How long should alt text be?
As short as possible while still describing the image. One plain sentence is usually enough. Complex images such as charts can carry the key takeaway in alt and the full detail in the surrounding text.
Should decorative images have alt text?
They should have an empty alt attribute, alt="". That tells screen readers to skip the image. Leaving the attribute out entirely is different: some screen readers then read the file name aloud.
Does every image on a page need alt text?
Every image needs an alt attribute. Meaningful images need a description, and decorative ones need it empty. Background images set in CSS cannot take alt text and do not appear in image search, so any image that carries meaning belongs in an <img> element.
Share it with whoever runs your site’s SEO.
