What Is the Alt Attribute?

The alt attribute is a piece of text added to an HTML <img> tag that describes the content of an image. It was originally designed to display when an image fails to load, but it now serves a much broader purpose.

<img src="dashboard.png" alt="Analytics dashboard showing monthly traffic growth from January to March 2026" />

Search engines cannot see images the way humans do. They rely on alt text to understand what an image contains and how it relates to the surrounding content. Getting alt text right is one of the easiest and most impactful optimizations you can make.

Why Alt Text Matters

SEO Benefits

Google uses alt text as a primary signal for image search rankings. Well-written alt attributes help your images appear in Google Image Search results, which can drive significant traffic. Google's own documentation explicitly recommends providing "useful, information-rich content that uses keywords appropriately and is in context of the content of the page."

Beyond image search, alt text helps search engines understand the overall topic and relevance of your page, contributing to better rankings in regular search results as well.

Accessibility

Screen readers rely on alt text to convey image content to users who are blind or have low vision. Without alt text, these users miss the information entirely. The Web Content Accessibility Guidelines (WCAG) require text alternatives for all non-decorative images, and many countries have laws mandating web accessibility compliance.

Writing good alt text is not just best practice. It is a fundamental part of making the web usable for everyone.

AI Search and Generative Engines

AI-powered search tools like ChatGPT, Perplexity, and Google AI Overview analyze page content to generate answers and summaries. Alt text gives these systems additional context about your page. When your images have descriptive alt attributes, AI tools can better understand what your page covers and are more likely to reference it in their responses.

How to Write Effective Alt Text

Core Principles

Follow these guidelines when writing alt text:

Be specific and descriptive. Say what the image actually shows.
Keep it concise. Aim for 125 characters or fewer.
Use keywords naturally. Include relevant terms without stuffing.
Consider context. The same image may need different alt text depending on the page it appears on.

Good and Bad Examples

<!-- Good: specific and descriptive -->
<img src="report.png" alt="Bar chart comparing Q1 revenue across three product lines, showing Software leading at $2.4M" />

<!-- Bad: too vague -->
<img src="report.png" alt="chart" />

<!-- Bad: keyword stuffing -->
<img src="report.png" alt="revenue chart bar graph Q1 sales data product comparison business analytics" />

<!-- Bad: using the filename -->
<img src="report.png" alt="report.png" />

<!-- Bad: missing alt attribute entirely -->
<img src="report.png" />

Alt Text for Different Image Types

Product Images

Include the product name, key features, color, and size when relevant.

<img src="headphones.jpg" alt="Sony WH-1000XM6 wireless noise-canceling headphones in midnight blue" />

Photographs of People

Describe who is in the image and what they are doing.

<img src="keynote.jpg" alt="CEO Maria Chen presenting the 2026 product roadmap at the annual company summit" />

Charts and Graphs

Describe the type of chart and the key trend or takeaway. For detailed data, provide a table or explanation in the body text.

<img src="growth-chart.png" alt="Line graph showing website traffic increasing 45% from October 2025 to March 2026" />

Screenshots

Explain what the screenshot shows and why it is relevant.

<img src="settings.png" alt="User profile settings page with the notification preferences section highlighted" />

Infographics

Summarize the main point. If the infographic contains detailed information, reference the body text for the full explanation.

<img src="seo-steps.png" alt="Infographic outlining five steps to improve on-page SEO. Details described in the text below." />

Handling Decorative Images

Not every image carries meaning. Decorative elements like dividers, background patterns, and purely aesthetic icons should have an empty alt attribute.

<!-- Correct: empty alt for decorative images -->
<img src="decorative-border.png" alt="" />

<!-- Wrong: omitting alt entirely -->
<img src="decorative-border.png" />

Omitting the alt attribute entirely is different from setting it to empty. Without any alt attribute, screen readers may read the file name aloud, creating a confusing experience. An empty alt="" tells assistive technology to skip the image.

For purely decorative images, using CSS background-image is often a better approach, as it keeps decorative content out of the HTML entirely.

Linked Images

When an image is wrapped in a link, the alt text should describe the link destination, not the image appearance.

<a href="/pricing">
  <img src="pricing-banner.jpg" alt="View pricing plans" />
</a>

If the link also contains text, the image may be decorative within that context and can have an empty alt.

<a href="/pricing">
  <img src="pricing-icon.png" alt="" />
  View pricing plans
</a>

Common Mistakes to Avoid

Starting with "Image of" or "Photo of"

Screen readers already announce that an element is an image. Adding "image of" or "photo of" is redundant.

<!-- Redundant -->
<img src="office.jpg" alt="Photo of a modern office space" />

<!-- Better -->
<img src="office.jpg" alt="Modern open-plan office with standing desks and natural lighting" />

Using Auto-Generated Alt Text

Content management systems sometimes auto-fill alt text with file names like "IMG_20260318_042.jpg". Always review and replace these with meaningful descriptions.

Writing Alt Text That Is Too Long

While there is no strict character limit, excessively long alt text becomes difficult for screen readers to process. If an image requires a lengthy explanation, use the alt attribute for a brief summary and provide the full description in the surrounding text or a <figcaption> element.

<figure>
  <img src="architecture.png" alt="System architecture diagram for the payment processing pipeline" />
  <figcaption>The payment pipeline routes transactions through three validation stages before reaching the settlement service. See the technical documentation for full details.</figcaption>
</figure>

Check Your Alt Attributes with IndexReady

IndexReady's free scoring tool automatically checks image alt attributes as part of its SEO analysis. The image alt check is worth 6 points in the SEO category and measures the ratio of images missing alt text on your page. A page where all images have alt attributes earns full points, while pages with missing alt text receive warnings or errors depending on the severity.

Enter any URL to get a complete SEO and GEO audit, including alt text coverage, title tags, meta descriptions, page speed, structured data, and more.

Summary

Optimizing image alt attributes is one of the highest-value, lowest-effort improvements you can make to a website. It improves search engine visibility, makes your site accessible to more users, and helps AI systems understand your content.

Add specific, concise alt text to every meaningful image.
Use empty alt="" for decorative images.
Include keywords naturally without stuffing.
Adapt alt text to the image type and page context.
Review auto-generated alt text and replace it with proper descriptions.

Start by auditing the images on your most important pages. The impact on SEO, accessibility, and AI discoverability adds up quickly.

FAQ

Does missing alt text hurt my search rankings?

Missing alt text alone is unlikely to cause a dramatic ranking drop. However, it means you are missing out on image search traffic and providing a weaker signal to search engines about your page content. It also indicates poor accessibility, which can affect overall site quality assessments.

How long should alt text be?

There is no hard limit, but keeping alt text under 125 characters is a widely accepted best practice. This length works well with most screen readers and forces you to be concise. If an image needs a longer explanation, put the detailed description in the body text or a caption element.

Do I need alt text for SVGs and CSS background images?

CSS background-image elements cannot have alt attributes. If an image carries meaning, use an <img> tag instead. For inline SVGs, use a <title> element inside the SVG or add role="img" with an aria-label attribute to provide a text alternative.

How do AI search engines use alt text?

Generative AI tools like ChatGPT, Perplexity, and Google AI Overview parse alt text when crawling web pages. This helps them understand the visual content on your page and its relationship to the surrounding text. Descriptive alt attributes make it more likely that AI systems will accurately represent your content in their generated answers, making alt text optimization a key part of GEO (Generative Engine Optimization) strategy.