How to Write Alt Text for Images: SEO + Accessibility

Alt text is a short written description added to an image with the HTML alt attribute. It does three jobs at once: it tells screen-reader users what an image shows, it gives Google the text it needs to understand and rank your images, and it stands in when an image fails to load. Write it well and you win image traffic, dodge accessibility risk, and reinforce the relevance of the whole page — all in a few seconds per image.

Most sites get this wrong in one of two ways: the alt attribute is missing entirely (the image becomes a black box), or it is stuffed with junk like IMG_20240315.jpg. Neither helps a human or a crawler. This guide fixes both, with copy-paste examples for every image type and every major CMS.

What Alt Text Actually Is

Alt text (alternative text) lives inside the <img> tag. Here is what a properly written image looks like:

<img
  src="/images/blue-running-shoes-nike.webp"
  alt="Nike Air Zoom Pegasus 43 blue running shoes on a forest trail"
  width="800"
  height="600"
/>

When a screen reader hits this image, it announces the alt text aloud: "Nike Air Zoom Pegasus 43 blue running shoes on a forest trail." When Googlebot crawls the page, it reads the same string to understand the image and decide which image searches it should appear in. When the image fails to load on a slow connection, the browser shows that text instead of a broken-image icon.

Strip the alt text out and all three audiences lose. The screen reader just says "image." Google sees an unnamed file it cannot confidently index. The slow-connection visitor sees a gray box. Adding the alt attribute also keeps your HTML valid — it is a required attribute on the `<img>` element per the WHATWG/MDN spec.

Why Alt Text Matters for SEO and Accessibility

Alt text is not an optional accessibility checkbox. It feeds two channels that most site owners ignore.

Google Image Search and visual discovery. Google's own image SEO documentation states plainly that alt text helps Google understand the subject matter of an image. Descriptive alt text is the main way your product photos, infographics, and diagrams qualify to appear in Google Images, Google Lens, and Discover. Without it, you are not competing in that channel — you are absent from it.

On-page relevance. Google uses alt text as a signal for both the image and the page it sits on. When an image genuinely relates to your topic and your alt text describes it naturally, it strengthens the page's topical relevance. This is a low-effort, low-risk reinforcement of the work you already do in your title tags and heading structure.

Accessibility and legal exposure. The Web Content Accessibility Guidelines (WCAG) require a text alternative for non-text content under success criterion 1.1.1. Accessibility law in many jurisdictions — the ADA in the US, the European Accessibility Act in the EU — treats WCAG conformance as the practical benchmark. Missing alt text on informational images is one of the most common violations flagged in accessibility audits and demand letters.

Run a free SlapMyWeb audit to see exactly how many of your images are missing alt text and which ones use generic or stuffed descriptions.

How to Write Alt Text That Works

Good alt text balances accuracy, context, and natural keyword use. Work through these five rules in order.

1. Describe what the image actually shows

Paint a mental picture for someone who cannot see it. Name the subject, the action, the setting, and any detail that matters. Vague labels help nobody.

• Good: Two women comparing laptop screens at a coffee shop table with lattes
• Bad: Photo
• Bad: Image of people

2. Include the keyword only where it fits

Alt text SEO works through relevance, not repetition. If the image genuinely relates to your target term, the keyword will slot in naturally. If you have to force it, the image probably does not belong on that page.

• Good: WordPress dashboard showing the Yoast SEO heading-analysis panel
• Bad: heading tags SEO heading tags best heading tags for SEO ranking heading tags

3. Match the alt text to the page context

The same photo can need different alt text on different pages. A coffee mug on a product page needs alt text about the mug's features and finish. The same mug in a blog post about morning routines needs alt text about the lifestyle scene. Write for the job the image is doing on this page.

4. Keep it concise

Aim for roughly 80–125 characters. Many screen readers truncate around the 125-character mark, and a long alt string read without pause is a worse experience than a short, sharp one. If an image needs a real explanation — a chart or a diagram — push the detail into a <figcaption> or the surrounding body text, not the alt attribute.

5. Skip "image of" and "photo of"

Screen readers already announce "image" before reading your alt text. Writing image of a sunset makes the user hear "image, image of a sunset." Drop the prefix and describe the thing directly: Sunset over the Pacific from Malibu pier.

Good vs Bad Alt Text, By Image Type

Concrete examples for the image types you actually publish:

<!-- PRODUCT IMAGE -->
<!-- Bad: generic -->
<img src="shoe.jpg" alt="shoe" />
<!-- Bad: keyword stuffed -->
<img src="shoe.jpg" alt="buy shoes online best shoes cheap shoes running shoes" />
<!-- Good: descriptive with a natural keyword -->
<img src="shoe.jpg" alt="Adidas Ultraboost 23 black running shoe with Boost midsole" />


<!-- INFOGRAPHIC -->
<!-- Bad: useless -->
<img src="stats.png" alt="infographic" />
<!-- Good: summarize the takeaway -->
<img src="stats.png" alt="Bar chart comparing average load time across four CMS platforms" />


<!-- TEAM PHOTO -->
<!-- Bad: over-described -->
<img src="team.jpg" alt="image of our amazing incredible team photo taken on Tuesday" />
<!-- Good: contextual -->
<img src="team.jpg" alt="SlapMyWeb engineering team at the 2026 Lahore tech conference" />


<!-- SCREENSHOT -->
<!-- Bad: filename as alt -->
<img src="screenshot.png" alt="IMG_20240315_screenshot_final_v2.png" />
<!-- Good: describe what it shows -->
<img src="screenshot.png" alt="Search Console Core Web Vitals report with all URLs passing" />

A quick reference for the decisions you make most often:

Special Cases You Will Hit

Decorative images

Images that carry no information — background patterns, dividers, ornamental borders — should have an empty alt attribute, not a missing one:

<!-- Decorative image: empty alt (intentional) -->
<img src="decorative-border.svg" alt="" role="presentation" />

<!-- WRONG: missing alt attribute entirely -->
<img src="decorative-border.svg" />

<!-- WRONG: describing a purely decorative element -->
<img src="decorative-border.svg" alt="blue wavy line border decoration" />

The distinction is critical. alt="" tells a screen reader "skip this on purpose." A missing alt attribute can make assistive technology fall back to announcing the filename, which is jarring and useless. This is exactly the kind of nuance the WCAG non-text-content guidance is built around.

Product images for e-commerce

Product alt text should help both the shopper and the crawler. Lead with brand, product name, color, variant, then a feature:

• Samsung Galaxy S26 Ultra phantom black 256GB front and back view
• Handmade ceramic coffee mug in ocean blue glaze 12oz with handle
• Women's North Face Thermoball jacket in rose pink size medium zipped

For multiple shots of the same product in a gallery, describe each specific angle — side view, close-up of stitching, bottom tread pattern — never copy-paste the same string across all of them. For a deeper play on store images, pair this with e-commerce SEO and the Shopify SEO checklist.

Infographics and complex images

For a chart or diagram, summarize the key point in the alt attribute and put the full detail in a caption:

<figure>
  <img
    src="seo-growth-chart.png"
    alt="Line chart of monthly organic image traffic before and after adding alt text"
  />
  <figcaption>
    Organic image traffic before and after adding descriptive alt text to the catalog.
    Full data in the <a href="/case-study/alt-text-results">case study</a>.
  </figcaption>
</figure>

Logos

For your own logo, the alt text is your company name — not "logo":

<!-- Good -->
<img src="logo.svg" alt="SlapMyWeb" />

<!-- Bad -->
<img src="logo.svg" alt="logo" />
<img src="logo.svg" alt="SlapMyWeb company logo image PNG" />

If the logo links to the homepage, the wrapping <a> provides the navigation context, so the alt text only needs the brand name.

Adding Alt Text in Your CMS

Every major platform exposes the alt attribute through a simple field:

• WordPress: In the media library, fill the Alt Text field in the right sidebar when you insert an image. For existing images, go to Media → Library, open each one, and add it there. See the broader WordPress SEO guide for image-handling tips.
• Shopify: In the product editor, click an image and enter text in the Alt text field. Theme image blocks have their own alt-text setting in section settings.
• Wix: Select an image, open image settings, and fill "What's in this image?" — Wix calls it an image description but it maps directly to the alt attribute.
• Custom HTML / React: Add the alt prop directly. In Next.js, the next/image component requires alt and will warn at build time if you omit it.

After you've described your images, make sure they're not also slowing the page down — work through image optimization and lazy loading so your visual content helps both rankings and Core Web Vitals.

Common Alt Text Mistakes

• Missing alt attributes. The single most common issue in any audit. Every informational image needs a description.
• "Image of" / "photo of" prefixes. Redundant — the screen reader already says "image."
• Keyword stuffing. Repeating your target term across every image is a spam pattern. Use the keyword where it fits and write genuine descriptions everywhere else.
• Alt text that is a paragraph. Long strings read poorly. Keep it under ~125 characters and push detail to a caption.
• Filenames as alt text. DSC_0042.jpg tells nobody anything.
• Identical alt text on a gallery. Six shots of one shoe need six descriptions of six angles.

Frequently Asked Questions

How long should alt text be for SEO?

Aim for roughly 80–125 characters. That is long enough to describe the image and include a natural keyword, but short enough that screen readers will read the whole thing — many truncate near the 125-character mark. If an image needs more explanation, use a <figcaption> rather than a longer alt attribute.

Does alt text help with Google Image Search rankings?

Yes. Google's image SEO documentation states that alt text helps Google understand what an image is about, which is what qualifies it to appear in Google Images, Lens, and Discover. Descriptive, relevant alt text is one of the lowest-effort, highest-leverage image SEO improvements you can make.

Should decorative images have alt text?

No — they should have an empty alt attribute (alt=""), which tells screen readers to skip them. Never omit the attribute entirely, because a missing alt can cause assistive technology to fall back to reading the filename. Empty alt and missing alt are not the same thing.

Can AI tools write alt text automatically?

AI tools can produce a usable first draft, but they regularly miss page context, brand-specific detail, and the right keyword. Use AI to draft at scale, then review each description for accuracy and natural keyword fit. For large catalogs, AI-drafted alt text with human review is the most practical workflow.

Is alt text the same as a title attribute or a caption?

No. The alt attribute is the text alternative read by screen readers and crawlers when the image is the content. The title attribute shows a tooltip on hover and is largely ignored for accessibility and SEO. A <figcaption> is visible text that complements the image for everyone. Use alt for the description, figcaption for added detail — not the title attribute.