Introduction

Alt Text Seo Explained

View contents

Alt Text for SEO: Making Images Discoverable and Accessible

Introduction

Every image on your website is either helping or hurting your SEO. Alt text (alternative text) is the invisible description that tells search engines and screen readers what an image contains. Without it, Google can’t understand your visual content.

The UXR SEO Analyzer checks your alt text coverage because missing or poorly written alt text represents a significant missed opportunity for both accessibility and search visibility.

What Is Alt Text?

Alt text is an HTML attribute that provides a text description of an image. It’s added using the alt attribute on the <img> element:

<img src="blue-running-shoes.jpg" alt="Blue Nike running shoes with white sole">

When an image can’t load, browsers display this text instead. More importantly, screen readers read this text aloud to users with visual impairments, and search engines use it to understand image content.

Why Alt Text Matters for SEO

1. Google Images Traffic

According to Google’s own documentation, images can drive significant search traffic. Google Images accounts for approximately 20% of all Google searches. Without proper alt text, your images won’t appear in these searches.

2. Contextual Understanding

Search engines can’t “see” images the way humans do. While Google uses machine learning for image recognition, it still heavily relies on alt text to understand image context and relevance to search queries.

How Google Uses Alt Text:
┌─────────────────────────────────────────────────┐
│ Image Recognition  +  Alt Text  =  Understanding │
│        30%         +    70%     =     100%       │
└─────────────────────────────────────────────────┘

3. Ranking Signals

Alt text helps Google determine:

  • What the image depicts
  • How it relates to surrounding content
  • Which search queries it should appear for
  • The overall topic relevance of your page

4. Accessibility Compliance

Beyond SEO, alt text is a legal requirement under accessibility laws (ADA, WCAG). Missing alt text makes your site inaccessible to millions of users with visual impairments.

How to Write Effective Alt Text

The Golden Rules

  1. Be Specific and Descriptive

    • Bad: alt="shoes"
    • Good: alt="Red leather hiking boots with thick rubber sole"
  2. Keep It Concise

    • Aim for under 125 characters
    • Screen readers may cut off longer descriptions
  3. Include Relevant Keywords Naturally

    • Bad: alt="shoes boots footwear hiking gear outdoor"
    • Good: alt="Waterproof hiking boots for mountain trails"
  4. Don’t Start with “Image of” or “Picture of”

    • Screen readers already announce it’s an image
    • Bad: alt="Image of a sunset over the ocean"
    • Good: alt="Sunset casting orange light over Pacific Ocean"
  5. Consider the Context

    • The same image might need different alt text depending on its purpose

Types of Images and Their Alt Text

Image Type Alt Text Approach Example
Product photo Describe the product specifically alt="Apple MacBook Pro 14-inch M3 laptop silver"
Informational Summarize the information alt="Bar chart showing 40% increase in sales Q3 2024"
Decorative Use empty alt alt=""
Linked image Describe the destination alt="Go to shopping cart"
Logo Company name alt="UXR Chile company logo"
Screenshot Describe key visible content alt="Google Analytics dashboard showing traffic sources"

When to Use Empty Alt Text

Decorative images that don’t add information should have empty alt text (alt=""). This tells screen readers to skip them:

<!-- Decorative background flourish -->
<img src="decorative-swirl.png" alt="">

<!-- Icon next to text that already describes the action -->
<button>
  <img src="search-icon.svg" alt="">
  Search Products
</button>

Important: Using alt="" is different from omitting the alt attribute entirely. Missing alt attributes are accessibility violations.

How UXR SEO Analyzer Checks This

The analyzer evaluates your alt text coverage by:

  • Missing alt attributes - Images without any alt attribute
  • Empty alt on non-decorative images - Images that need descriptions but have alt=""
  • Alt text quality - Very short or keyword-stuffed alt text
  • Alt text coverage percentage - Overall ratio of images with proper alt text

A good target is 95%+ alt text coverage for non-decorative images.

Common Mistakes to Avoid

1. Keyword Stuffing

<!-- DON'T DO THIS -->
<img alt="shoes running shoes nike shoes best shoes cheap shoes athletic shoes">

This creates a poor user experience and may be penalized by Google.

2. Using Filename as Alt Text

<!-- DON'T DO THIS -->
<img alt="IMG_4532.jpg">

This provides no useful information to users or search engines.

3. Being Too Vague

<!-- TOO VAGUE -->
<img alt="product">

<!-- BETTER -->
<img alt="Wireless noise-canceling headphones in matte black">

4. Ignoring Image Context

The same product image might need different alt text on a category page vs. a product detail page.

Quick Checklist

  • [ ] Every image has an alt attribute
  • [ ] Alt text describes the image content specifically
  • [ ] Keywords are included naturally (not stuffed)
  • [ ] Decorative images use alt=""
  • [ ] Alt text is under 125 characters
  • [ ] Context is considered for each image
  • [ ] No “image of” or “picture of” prefixes

Next Steps

For advanced techniques including alt text for complex images, e-commerce optimization, and automated alt text tools, read our comprehensive Alt Text SEO Optimization Guide.



References

  1. Google Search Central - Google Images best practices
  2. Ahrefs - Image SEO: 12 Actionable Tips
  3. MDN Web Docs - HTML img element
  4. WCAG 2.2 - Non-text Content (SC 1.1.1)

Related articles

Category hub

Hub

Images Seo Hub

Images are critical to user engagement—but they can also be your website's biggest performance bottleneck

In the same category

Introduction

Responsive Images Explained

When you serve a 2000px wide image to a mobile phone with a 400px viewport, you're wasting bandwidth and slowing down page load

Introduction

Oversized Images Explained

Downloading a 3000×2000 pixel image to display it at 300×200 pixels wastes bandwidth, slows page load, and drains mobile batteries