Image Alt Text: The Complete Guide for SEO and Accessibility

Alt text (alternative text) describes an image’s content and function in words. Search engines can’t see images — they read alt text to understand what an image shows and whether it’s relevant to a search query. It’s also essential for accessibility: screen readers read alt text aloud to visually impaired users.

Why Alt Text Matters

For SEO

• Google Image Search uses alt text as a primary signal for ranking images.
• Page relevance gets a boost when images have alt text that reinforces the page’s topic.
• Rich results like image packs in search results depend on proper alt attributes.

For Accessibility

• Screen readers read alt text to describe images to users who can’t see them.
• Slow connections show alt text when images fail to load.
• WCAG 2.1 compliance requires meaningful alt text on all non-decorative images.

For User Experience

Images without alt text display a broken image icon and nothing else when they fail to load. Alt text gives users context even when the image isn’t visible.

How to Write Good Alt Text

The Formula

Good alt text answers: What does this image show, and why is it on this page?

Keep it concise (under 125 characters), descriptive, and relevant to the surrounding content.

Examples by Image Type

Product photo:

<!-- Bad -->
<img alt="shoe" />

<!-- Good -->
<img alt="Nike Air Max 90 in white and grey, side profile view" />

Screenshot:

<!-- Bad -->
<img alt="screenshot" />

<!-- Good -->
<img alt="Google Search Console performance report showing 15% traffic increase over 3 months" />

Chart or graph:

<!-- Bad -->
<img alt="chart" />

<!-- Good -->
<img alt="Bar chart comparing Core Web Vitals scores: LCP 2.1s, FID 45ms, CLS 0.08" />

Team photo:

<!-- Bad -->
<img alt="team" />

<!-- Good -->
<img alt="The seoutils.dev founding team at their office in Portland" />

Infographic:

<!-- Bad -->
<img alt="infographic" />

<!-- Good -->
<img alt="SEO audit flowchart: start with meta tags, then check headings, links, and technical issues" />

When to Use Empty Alt Text

Decorative images that add no information should use empty alt text (alt=""), not missing alt text.

<!-- Decorative divider — correct -->
<img src="divider.svg" alt="" />

<!-- Decorative background pattern — correct -->
<img src="pattern.png" alt="" role="presentation" />

An empty alt="" tells screen readers to skip the image. Missing the alt attribute entirely causes screen readers to read the filename, which sounds like “image underscore DSC zero four three seven dot jpg” — a terrible experience.

Scenario	Alt Text
Meaningful image	Descriptive text
Decorative image	alt="" (empty)
Image is the only content in a link	Describe the link destination
Image has a visible caption	Alt text should add info the caption doesn’t
Icon next to text	alt="" (the text already provides context)

Alt Text Mistakes to Avoid

1. Starting with “Image of” or “Photo of”

Screen readers already announce “image” before reading alt text. Starting with “Image of” results in “Image: Image of a dog” — redundant.

<!-- Bad -->
<img alt="Image of a golden retriever playing fetch" />

<!-- Good -->
<img alt="Golden retriever catching a tennis ball mid-air" />

2. Keyword Stuffing

Alt text should be natural, not a keyword dump.

<!-- Bad -->
<img alt="SEO audit tool free SEO checker SEO analysis website audit tool" />

<!-- Good -->
<img alt="SEO audit results showing scores for meta tags, headings, and technical checks" />

3. Using Filenames as Alt Text

CMS platforms sometimes auto-fill alt text with the filename. DSC_0437.jpg or hero-banner-v2-final.png tells no one anything.

4. Leaving Alt Text Blank on Meaningful Images

Every image that conveys information needs descriptive alt text. If you’re not sure whether an image is meaningful, ask: “Would the page make less sense without this image?” If yes, it needs alt text.

5. Making Alt Text Too Long

Screen readers will read the entire alt text without pausing. Keep it under 125 characters. If an image needs a longer description, use aria-describedby to link to a text description elsewhere on the page.

Alt Text for Linked Images

When an image is the only content inside a link, the alt text should describe the link destination, not the image.

<!-- Image link to homepage -->
<a href="/">
  <img src="logo.svg" alt="seoutils.dev homepage" />
</a>

<!-- Image link to a blog post -->
<a href="/blog/meta-title-description-seo">
  <img src="meta-tags-thumb.jpg" alt="Read: How to Write Meta Titles for SEO" />
</a>

How to Audit Your Alt Text

Checking alt text manually means right-clicking every image on every page and inspecting the HTML. For a site with hundreds of images, that’s not realistic.

What seoutils.dev checks: Our free audit scans all images on your page and reports the total count, the percentage with alt text, and the specific images that are missing alt attributes — so you know exactly what to fix.

Run a free audit to check your image alt text coverage.

---

This is part of our Complete SEO Audit Checklist. Related: Heading Structure Best Practices.