How to Write Alt Text: Step-by-Step Guide

Writing clear alt text is about two things: helping people who use screen readers and giving search engines useful context for images. This guide on how to write alt text lays out a practical workflow — from auditing your image inventory to writing concise descriptions, adding intent-aware keywords, and rolling updates through your CMS. Read on to learn exact audit commands, 10 paired examples, CMS rollout steps, and quick QA checks teams can run in a day.

TL;DR:

Fix the top 10% of images by traffic first — expect a 20–40% faster lift in image search impressions vs. random updates.
Use short, descriptive alt text: ~5–15 words for simple photos, longer for charts; avoid keyword stuffing and repeat only when natural.
Automate with a template + batch publish cycle and run a site audit weekly using tools that flag missing alt attributes.

Step 1: Gather Prerequisites and Audit Your Image Inventory

What You Need (access, Tools, and Stakeholders)

Start with three access items: CMS admin, image library or CDN access, and analytics (Search Console and GA4). Include stakeholders: engineering for bulk edits or template changes, product/content owners for image intent, and QA for screen reader testing. Tools to prepare: a site crawler or accessibility scanner, a spreadsheet export of image URLs and current alt attributes, and a lightweight script or CMS export to map images to page templates.

How to Run a Quick Alt-text Audit

Run a focused crawl for images and alt attributes. Screaming Frog or a headless crawler can output CSV columns for img src, alt, page URL, and response code. Key columns to export:

Page URL
Image URL (absolute)
Alt text (blank if missing)
Page template or content type (product, blog, listing)
HTTP status (to catch broken assets)

A quick command example (node/python) can fetch alt attributes from a sitemap, but a visual tool often saves time for non-developers. After the crawl, compute:

% of images with missing alt
Count of images with empty alt=""
Pages with the most missing-image hits and highest organic traffic

Use a technical audit to find missing alt attributes and other image issues; for a full site audit workflow, see the technical SEO checklist. Teams wanting broader process documents can consult our guides library for prioritization workflows.

Prioritize Images to Update (high-impact Pages First)

Sort images by a blend of traffic and conversion priority. Typical priorities:

Product pages and ecommerce thumbnails
Blog hero images on top-performing posts
Category and landing-page hero images
Email/video thumbnails that drive conversions

Start with the top 10% of pages by organic traffic. Fixing those first yields a disproportionate gain in image search impressions and improves UX for the largest audience. Track updates in a spreadsheet with columns for status, editor, publish date, and verification method (screen reader check, broken-image test).

Step 2: Understand Why Alt Text Matters (accessibility, SEO, and UX)

Accessibility Requirements and WCAG Basics

Alt text is covered by Web Content Accessibility Guidelines (WCAG) as a key requirement for accessible images. WCAG focuses on providing equivalent alternatives to non-text content. University and accessibility teams recommend short, objective descriptions that match the image’s purpose; see Harvard’s accessibility guidance for tips on keeping alt text helpful and concise (one to two sentences) — useful when deciding what to include in an alt attribute.

If an image is purely decorative, the correct approach is an empty alt attribute (alt="") so screen readers skip it. If the image conveys content not present in the surrounding text (e.g., chart or infographic), provide a descriptive alt plus a long description elsewhere (aria-describedby or linked text).

How Search Engines Use Alt Text

Search engines use alt text to understand the content of images and their relevance to a page’s topic. Google’s technical writing guidance for alt text recommends short, descriptive phrases that describe the image’s essential content; this helps for image indexing and may improve performance in image search results.

That said, alt text is a signal among many: captions, surrounding copy, structured data, and page title all combine to define context. Use alt text to fill gaps rather than to repeat the page title.

Business Impacts: Discoverability and User Experience

Accessible sites reach more users and reduce legal risk in regulated contexts. Search-wise, improving missing or poor alt text on high-traffic pages often leads to measurable uplifts in image search impressions and can bring incremental organic traffic. From a UX angle, alt text that describes function (e.g., "add to cart button icon") helps users relying on assistive tech perform tasks.

Balance: where an image is decorative, an empty alt attribute improves the reading experience for assistive technologies and reduces noise.

Step 3: Write Clear, Useful Alt Text (best practices and Examples)

Core Rules: Describe Function, Be Concise, Avoid Repetition

Write alt text that describes what the image is or does in the context of the page. Keep it short for simple images (aim for ~5–15 words), longer for complex images like charts (25–50 words or use longdesc). Avoid repeating adjacent visible text such as captions or surrounding paragraph content. If an image is actionable, describe the action: "download brochure PDF" or "play product video".

Use the alt attribute for content-equivalent text. For purely decorative images, use alt="". For non-HTML images (background-image in CSS), ensure an ARIA alternative exists or add a content image in the DOM.

Good Vs. Bad Examples — 10 Paired Examples

Below are paired bad → improved alt text examples across common image types.

Bad: "IMG123.jpg"
Improved: "white ceramic coffee mug on wooden table"
Bad: "product photo"
Improved: "men’s navy waterproof running shoe, side view"
Bad: "team"
Improved: "customer support team standing in office, four people smiling"
Bad: "chart"
Improved: "bar chart showing quarterly revenue rising from $1.2M to $2.3M"
Bad: "logo"
Improved: "Acme Co. logo" (useful when logo conveys brand identity) — decorative logos used only for branding can be alt=""
Bad: "thumbnail"
Improved: "video thumbnail: how to set up a Shopify store"
Bad: "icon"
Improved: "shopping cart icon indicating add to cart"
Bad: "screenshot"
Improved: "screenshot of dashboard showing traffic by channel"
Bad: "floorplan"
Improved: "two-bedroom apartment floor plan with 1,050 sq ft"
Bad: "hero image"
Improved: "woman typing on laptop at home desk, remote work setup"

Those last examples are a model for product pages, team bios, charts, and thumbnails. For image-heavy sites, consult the image SEO for photographers guide for portfolio-specific checks.

How to Handle Complex Images, Charts, and Decorative Images

For charts and infographics, the alt should summarize the main takeaway and link to a longer description if needed. Example alt: "line chart: active users grew 35% year over year; see full breakdown below." Then include a caption or a

description with full data. WebAIM and scientific publishers recommend a long description for intricate visuals; Springer Nature’s guidance emphasizes highlighting the key data rather than repeating all chart labels.

Decorative images should use alt="". If an image is part of a button, the alt should describe the button function (e.g., "subscribe to newsletter").

A quick tip: when images appear in galleries or pages with many similar images, avoid duplicate alt text. Instead, differentiate images by a unique attribute (color, angle, model number). For gallery structure and linking, see how images fit into broader internal linking strategies.

Watch this step-by-step guide on writing image alt text for SEO (so easy!):

Step 4: Optimize Alt Text for Keywords and Search Intent

When to Include Keywords and Where to Prioritize Intent

Keywords belong in alt text only when they naturally describe the image. The priority is accurate description and accessibility; SEO is secondary. For images that directly match a search intent (product images, tutorial screenshots), include a concise modifier that matches search intent: for example, "small blue running shoe for trail running" rather than "running shoe — best shoes 2026" which would read as stuffing.

Use keyword research and intent classification to decide which images are likely to appear in image search for relevant queries. For that, consult the finding keyword intent guide before bulk edits.

Combining Descriptive Language with Search-relevant Terms

A practical pattern: start with the objective description, then add a natural modifier. Examples:

"organic multigrain loaf, sliced" (good for bakery product photos)
"desktop microphone for podcasting, cardioid" (good for ecommerce specs)
"floor plan 2-bedroom 1,050 sq ft, downtown Seattle" (helps local discovery)

Avoid repeating the page title or adding marketing claims that don’t match the image. For programmatic consistency across thousands of images, use template patterns that incorporate attributes like color, size, and use case; see programmatic patterns in content structure best practices.

Testing and Measuring Impact

Measure changes with a small test cohort. Track image search impressions in Google Search Console for the pages you update and monitor organic traffic changes to those pages in GA4. For template-level changes, A/B testing on a subset of pages or using a staged rollout is prudent. If revisions are programmatic, monitor for duplicate content issues that arise from identical alt across many pages — see the duplicate content fixes guide for remediation steps (/blog/fix-duplicate-content-step-by-step).

Step 5: Add Alt Text at Scale and Publish (CMS Workflows and Automation)

Batch-editing Strategies and Templates

Work in batches. Export your image inventory with columns: image URL, current alt, page URL, template, suggested alt. Create standard templates for common image types, for example:

Product: "{color} {product type} — {brief distinguishing feature}"
Team headshot: "{name}, {role} — company team photo"
Blog hero: "{main idea of article} — hero image"

Examples:

Product template: "navy waterproof running shoe, men’s size 10"
Team template: "Maria Lopez, customer success manager, Acme Co."

Populate templates programmatically using product metadata or CSV merges. For more on standardizing formats across templates, see the page template tool.

CMS Publishing Workflows and QA Checklist

Publish in controlled sprints:

Export and map images to page URLs.
Apply template-generated alt text or manual edits.
Push updates to a staging environment and run automated tests.
Run screen reader spot checks and broken-image audits.
Schedule publish and monitor analytics for unexpected drops.

QA checks:

Verify tags have alt attributes (not background-image CSS).
Run a broken-image report to catch 404s.
Do screen reader spot checks with NVDA or VoiceOver on key pages.
Confirm translations for multi-language sites (see below).

For course sites and education platforms, apply templates consistently — the course creator SEO tips article shows patterns for scaling thumbnails and lesson images. For video thumbnails, follow guidance in optimizing video thumbnails.

Automation: Programmatic Approaches and Translation Considerations

When automating:

Keep a human-reviewed seed set for each template.
Monitor for duplicated alt text across many pages.
Ensure translated alt text reads naturally in target languages and follow local accessibility guidelines.

Step 6: Common Mistakes and Troubleshooting Missing or Bad Alt Text

Mistakes to Avoid (keyword Stuffing, Redundant Captions)

Common errors:

Using filenames as alt text (e.g., "IMG987") — fix by writing a descriptive phrase.
Keyword stuffing — avoid repeating target keywords unnaturally.
Repeating the page title or visible caption in alt text — instead, complement or omit if redundant.
Leaving informative images with empty alt="" — only decorative images should use empty alt.

If duplicate alt text appears across many pages, follow the duplicate content fixes workflow: adjust templates or add unique attributes (model number, location) to differentiate entries (/blog/fix-duplicate-content-step-by-step).

How to Fix Common Edge Cases (icons, Decorative Images, Background Images)

Icons used purely for decoration: alt="".
Icons used as buttons or to convey meaning: descriptive alt (e.g., "remove item" for a trash icon).
Background images in CSS: move essential visuals into tags with alt text or provide ARIA descriptions.
Decorative logos used for layout: usually alt="" if the brand is visible elsewhere; otherwise "Brand name logo."

If an icon is repeated across a product listing, verify whether the icon is informative or decorative. If informative, ensure each instance has a relevant alt.

Troubleshooting Checklist for image SEO Problems

Run this checklist:

Check broken-image reports and fix 4xx assets.
Verify markup: vs. CSS background images.
Confirm translated alt text presence for multi-language pages.
Monitor Search Console image impressions before and after changes.
If image traffic drops after edits, revert a sample and A/B test; check robots.txt and noindex directives.

For competitor insights on image opportunities, use a backlink and content gap analysis to spot topics where better imagery and alt descriptions could improve visibility (/blog/analyze-competitor-backlinks-step-by-step). Local businesses can check local-image optimization guides for sector-specific fixes, for example, restaurant menu images or hotel room photos (/blog/SEO-for-restaurants-the-complete-guide, /blog/SEO-for-hotels-complete-guide). Real-estate sites should refer to listing-image best practices for alt text on floorplans and exteriors (/blog/SEO-for-real-estate-agents-complete-guide).

The Bottom Line

How to write alt text well: prioritize accessibility and accurate description first, add search-relevant modifiers only when natural, and roll changes out by priority templates. Start by fixing high-traffic templates, automate template generation for scale, and verify impact via Search Console and screen reader testing.

Frequently Asked Questions

Should alt text include SEO keywords?

Include keywords only when they naturally describe the image. The primary goal is an accurate, brief description that helps assistive technology users; SEO is a secondary benefit. For product images, adding intent modifiers like size, color, or use case can help image search without stuffing.

What should I do for decorative images?

Use an empty alt attribute (alt="") so screen readers skip decorative elements. If the decorative image also conveys information, move that information into an accessible textual element or use a descriptive alt.

How long should alt text be?

For simple photos, aim for about 5–15 words. For charts or infographics, use a concise alt summarizing the main point (25–50 words) and provide a longer description in the page body or via aria-describedby if needed. University guides recommend keeping alt text concise and aligned with surrounding content.

How do I test alt text with screen readers?

Run spot checks with NVDA (Windows) or VoiceOver (macOS/iOS). Navigate the page using keyboard-only input and listen for how images are announced. Test both desktop and mobile flows and verify that decorative images are skipped while informative images are read with your new alt descriptions.