/
/
How to write alt text that ranks (12 real examples)

How to write alt text that ranks (12 real examples)

10 min read

Good alt text serves screen readers and search engines at once. 12 before-and-after examples, the 5 rules, and the anti-patterns Google treats as spam.

Most alt-text advice is written for one audience or the other. Accessibility guides tell you to describe the image for someone who cannot see it. SEO guides tell you to work in your keyword. Both are right, and treating them as separate is why so much alt text ends up serving neither well.

Good alt text does both jobs in one sentence. It describes what the image shows, naturally, in a way that happens to include the words a search engine needs. This guide gives you the five rules, twelve before-and-after examples across the image types you actually use, and the anti-patterns that get flagged as spam. It is a companion to our complete guide to image SEO in WordPress.

What alt text actually does

Alt text is the text a browser shows when an image fails to load, the text a screen reader announces, and one of the strongest signals a search engine has for understanding what an image contains. One field, three jobs. The 2026 WebAIM Million survey found missing alt text on 53.1% of the web’s home pages, which means writing it well is one of the rare SEO tasks where the bar to beat your competition is genuinely low.

The five rules

  1. Describe, do not label. Say what is in the image, not what kind of image it is.
  2. Be contextual. The same photo needs different alt text on different pages, depending on why it is there.
  3. Stay in the 80–125 character range. Long enough to be specific, short enough that a screen reader does not drone.
  4. Skip “image of” and “photo of.” The screen reader already says “image.” Repeating it wastes everyone’s time.
  5. Let the keyword arrive naturally. If your keyword genuinely describes the image, it belongs. If you have to force it, leave it out.

12 before-and-after examples

Each pair shows weak alt text and the rewrite, across the image types you are most likely to upload.

Image typeWeakBetter
PortraitwomanBride laughing during her first dance in a candlelit barn
Productboots best priceBlack leather ankle boots with a side zip and block heel
LandscapeIMG_2241Misty sunrise over terraced rice fields in northern Vietnam
ScreenshotscreenshotFotoGrids gallery settings showing the layout picker open
InfographicchartBar chart of WebP versus AVIF browser support in 2026
Fooddelicious foodStack of blueberry pancakes with maple syrup and butter
Real estatehouse exteriorRed-brick Victorian semi with a bay window and front garden
AbstractbackgroundIndigo and navy geometric pattern used as a section divider
Architecturebuilding photoCurved glass facade of a modern office at dusk
Group phototeamSix-person design team standing in front of a studio window
Action shotsportsCyclist leaning into a wet corner during a criterium race
LogologoFotoGrids logo: a four-square grid in indigo, yellow, red, green

Do this now. Pick five images from your most important page and rewrite their alt text using the “better” column as a model. Read each one aloud — if it sounds like a natural description of the picture, it is right. If it sounds like a search query, rewrite it.

The anti-patterns to delete on sight

  • Keyword stuffing — “boots boots leather boots cheap boots 2026” reads as spam to Google and as noise to a screen reader.
  • “Image of…” — redundant; the assistive technology already announces that it is an image.
  • Empty when it matters — a meaningful image with alt="" is invisible to search and to screen readers.
  • Filename dumpsalt="DSC_0049.jpg" is worse than nothing.

One nuance worth knowing: purely decorative images — a divider, a background texture — should have an empty alt="" on purpose, so screen readers skip them. “Empty when it matters” is the mistake; deliberate empty alt on decoration is correct.

The two readers, and why one sentence serves both

It helps to picture the two audiences for alt text, because they want almost the same thing. A screen-reader user hears the alt text read aloud in the flow of the page; they want a concise, accurate description that tells them what the image contributes, without padding. A search engine reads the alt text as a labelled description of the image’s content; it wants an accurate, specific description it can match to queries. Both want the truth about the image, stated plainly. That is why a single well-written sentence serves both — and why the techniques that game one (keyword stuffing for search, or over-describing for “thoroughness”) actively harm the other. Write for a person describing the picture to a friend on the phone, and you have written for both.

Context changes the right alt text

This is the rule most guides skip, and it is the one that separates good alt text from merely present alt text. The same photograph needs different alt text depending on why it is on the page. Take a photo of a woman drinking coffee at a laptop. On a page about remote-work productivity, the relevant alt text is “Woman working on a laptop at a kitchen table with a coffee.” On a page selling that specific coffee mug, it is “Matte black ceramic coffee mug with a curved handle, held at a laptop.” On a page about a café’s interior design, it might be “Customer at a reclaimed-wood communal table in a daylit café.” Same pixels, three correct answers — because alt text describes the image’s role on this page, not just its raw contents. When you write alt text, ask what this image is doing here, and describe that.

Hard cases: infographics, charts, and text-in-images

Simple photos are easy; the genuinely tricky cases are images that carry information. For an infographic or a chart, the alt text cannot reasonably contain everything — a 125-character description of a complex chart is impossible. The right approach is a short alt text that states what the image is and its single key takeaway (“Bar chart showing WebP at 97% and AVIF at 93% browser support in 2026”), paired with the full data presented as real text or a table elsewhere on the page or in a caption. The image is the visual; the accessible, indexable version of its content lives in text. For images that contain words — a quote graphic, a screenshot of a setting — include the essential words in the alt text, because a screen reader and a search engine cannot read text baked into pixels.

Tip. Never rely on text baked into an image to be read by anyone but a sighted visitor. If a marketing graphic says “30% off this week,” that text is invisible to search engines and screen readers unless it is also in the alt text or the surrounding page. Put important words in real text, not only in pixels.

The accessibility dimension is not optional

It is worth saying plainly: alt text is first an accessibility feature and second an SEO one. For visitors who use screen readers, missing or useless alt text is not a ranking inconvenience — it is the difference between a usable page and a locked one. In many regions, web accessibility is also a legal expectation for businesses, and image descriptions are a basic, well-established requirement. The happy fact is that the accessibility-first approach and the SEO-first approach converge on the same output: an accurate, specific, natural description. Do it for the person using a screen reader, and the search benefit comes along for free — never the other way around.

AI alt-text generators: when to use them

Vision models can now write a decent first draft of alt text from the image alone, and in 2026 the good ones write contextual descriptions rather than flat object lists. They are a genuine time-saver at scale — but they do not know why the image is on your page, so the draft still needs a human pass for context.

Use them when you have hundreds of images and a blank alt-text column — the situation where writing every description by hand is the thing that stops people doing it at all. The workflow that works is generate-then-edit: let the model write a first-draft description for every image, then do a fast human pass, fixing the ones where context matters (remember the same photo needs different alt text on different pages) and accepting the ones the model got right. That turns a week of typing into an afternoon of reviewing, which is the difference between “we’ll get to it” and “it’s done.”

What the model cannot do is know why the image is on your page — it sees the pixels, not the purpose. So a generator will reliably tell you there is a woman with a coffee at a laptop; it will not know whether the page is about remote work, the mug, or the café. That judgement is the human pass, and it is why “generate and forget” produces technically-present-but-generic alt text, while “generate and edit” produces alt text that actually serves the page. If your gallery plugin includes generation, even better: FotoGrids generates a first-draft alt text for every image on upload in its Pro tiers and lets you edit any of them in place, so the draft-then-edit workflow happens inside the gallery rather than across two tools.

Editing alt text in bulk

Whether or not you use a generator, you need a way to see what is missing and fix it in batches rather than one image at a time. The WordPress Media Library has a list view with an alt-text column you can switch on through Screen Options (top-right of the Media screen). Switch to list view, enable the column, and sort by it — every blank cell is an image that is invisible to search engines and screen readers, surfaced in one place. For larger jobs, a bulk-edit plugin or your gallery plugin’s batch tools let you work through a whole album at once. The principle is the same as the generator workflow: make the gaps visible, then close them in a focused session rather than promising yourself you will get to them eventually.

Prioritise by traffic. The alt text on your highest-traffic pages and best-converting products earns its keep first; the long tail of old images nobody searches for can wait. As with filenames, the goal is impact, not a perfectly complete spreadsheet.

Do this now. Switch your Media Library to list view, enable the alt-text column, and sort by it. Everything with a blank cell is an image search engines and screen readers cannot understand. Work top-traffic pages first.

Key takeaways

  • Good alt text describes the image naturally and serves accessibility and SEO at once.
  • Aim for 80–125 characters, skip “image of,” and let the keyword arrive naturally.
  • Decorative images get a deliberate empty alt=""; meaningful images never do.
  • AI generators are great for first drafts at scale, but always edit for context.

How long should alt text be?

Aim for 80 to 125 characters. That is long enough to describe the image specifically and short enough that a screen reader does not read a paragraph for one picture.

Should I put my keyword in every alt text?

Only when the keyword genuinely describes the image. Forcing it in reads as spam to Google and as noise to a screen reader. A natural description that happens to contain the keyword is ideal.

Do decorative images need alt text?

No — give them a deliberate empty alt="" so screen readers skip them. The mistake is leaving meaningful images with empty alt, not marking decoration as decoration.

Set this up in FotoGrids · Pro Starter

AI-generated alt text, editable per image

Generate a first-draft alt text for every image on upload, then edit any of them. The fast way to clear a backlog without losing the human pass for context.

  • Vision-model alt text per upload.
  • Editable per-image override.
  • Bulk regenerate option.

In this article

Share the article
Related Articles