Image alt text: how to write it for SEO and accessibility

Alt text is the alt attribute on an <img> tag, and it should say in a short phrase what the image shows or does in the context of the page. Good image alt text reads like something you would say to a friend who can't see the screen. Decorative images get an empty alt="", linked images describe where the link goes, and keywords appear only when they genuinely describe the picture.

The same text serves two readers. Screen readers read it aloud, and Google says alt text is the most important attribute for giving it metadata about an image, used together with computer vision and the page around it.

How to write good alt text

Describe what the image means on this page, starting with the subject. Ask what a reader would miss if it failed to load.

Four habits fix most bad cases:

• Skip "image of" and "picture of". Screen readers already announce that it is an image, and the W3C's Web Accessibility Initiative (WAI) says words like "image", "icon" or "picture" are usually unnecessary.
• Never leave the file name or a camera code as the alt.
• Say what the image means here. A photo of a laptop on a review page needs the model name. The same photo on a "remote work" post is probably decoration.
• Put the data in the alt for a simple chart. For a complex one, keep the alt short and explain the figures in the text or a caption.

Image alt text and keywords

Use a keyword in alt text only when it is the honest description of the image. Google's image SEO guide shows the progression with a puppy photo. No alt is bad. alt="puppy" is better. alt="Dalmatian puppy playing fetch" is best. Its bad example is a long list of dog and puppy terms, and Google warns that stuffing alt attributes with keywords is a poor experience and may cause your site to be seen as spam.

The practical rule I use is to write the alt first, then check if the target phrase fits naturally. On a product page it usually does, because the product name is the subject. On a blog post's stock photo it usually doesn't, and forcing it in only makes a screen reader user sit through your keyword list. The on-page SEO checklist covers where keywords actually count.

Decorative images: when to use alt=""

Give an image alt="" when it adds nothing the surrounding text doesn't already say. The W3C WAI decorative images tutorial says an empty alt lets assistive technology ignore the image. Its examples include an icon next to a link that already names the destination, and a photo beside text that already describes it.

Typical decorative images:

• Background flourishes, dividers and abstract hero art.
• An icon next to a text label that says the same thing.
• A stock photo that sets a mood and carries no information.

Empty alt and missing alt are different. alt="" tells software to skip the image. Leaving the attribute off means the image is undescribed, and WAI notes that some screen readers then read out the file name instead. So every <img> should carry an alt, even when its value is empty.

<!-- Decorative: skipped by screen readers -->
<img src="/img/wave-divider.svg" alt="">

<!-- Missing: some screen readers read "wave-divider.svg" -->
<img src="/img/wave-divider.svg">

Alt text for images that are links

When an image is the only content of a link, its alt text is the link text, so describe the destination or action rather than the picture. The W3C WAI functional images tutorial uses a logo that links to the home page, with alt="W3C home". Google says it uses the alt text of a linked image as anchor text.

<a href="/">
  <img src="/logo.svg" alt="Acme home">
</a>

<a href="/cart">
  <img src="/icons/cart.svg" alt="Shopping cart, 2 items">
</a>

A linked image with alt="" and no other text inside the link is the worst case. The link has no name at all, for a screen reader or for Google. If the link already has visible text next to the image inside the same <a>, then the image is decorative and alt="" is correct.

How long should alt text be?

As short as the image allows. WAI says the alt should be the most concise description possible of the image's purpose, and if it needs more than a short phrase or sentence, use a long description method instead, such as a caption, nearby text or a linked description. WAI sets no character limit.

In practice most good alt text lands between a few words and one sentence. Anything over about 125 characters is worth a second look, not because something cuts it off, but because a screen reader reads it in one unbroken pass and long descriptions are easier to follow as a visible caption.

File size, formats, srcset and lazy loading are a separate job. The image SEO guide covers those.

Check the alt text on your pages

The Image SEO Checker reads every <img> in a page's served HTML and flags images with no alt attribute, linked images whose empty alt leaves the link without a name, alt text that is a file name or camera code, alt that reads like a keyword list, alt starting with "image of", and alt over 125 characters. It counts decorative images separately so an empty alt on a divider isn't reported as an error. The same run also checks sizing and downloads the first 12 image files.

A run costs 10 credits per URL. It reads the HTML as the server sends it, so images added by JavaScript after load and stylesheet background images are not checked, and it can't judge whether a description is accurate. That part is still yours.