Image Alt Text for SEO: How to Write It, and When to Leave It Empty

You upload a product photo, the site shows it, and it looks fine. Then an SEO audit lists it under "Missing alt text", or a customer searches Google Images for exactly what you sell and finds a competitor's photo instead of yours.

Google can look at an image, but it leans on the words around it to decide what the image is about and which searches it fits. The most important of those words is the alt text: a short description inside the image tag that most people never see. This guide covers what alt text is, what Google actually says about it, how to write it, when it should be empty, why file names like IMG_4523.jpg matter less than people claim, and how to fix all of it on plain HTML, WordPress, Shopify and Next.js.

It is the fifth part of my SEO checklist series, after page titles, meta descriptions, canonical tags and H1 tags. Near the end I run a checker on every image on this site, and it passes one test and fails another.

The short answers

• What is alt text? A text description of an image, written in the alt attribute of the <img> tag. Screen readers read it aloud, browsers show it when the image fails to load, and search engines use it to understand the image.
• Does alt text help SEO? Yes, mostly for Google Images. Google says it uses alt text along with computer vision and the page's content to understand an image. For normal web search it counts as part of the page's text.
• How long should alt text be? Usually a few words to one short sentence. There is no 125 character limit: that number is a myth (more below).
• Should every image have alt text? Every image needs an alt attribute. Images that carry meaning get a description. Purely decorative images get an empty one, alt="".
• Do file names matter? A little. Google calls the file name a "very light" clue. Rename new uploads, but don't rename old ones just for SEO.
• Should I put keywords in alt text? Only when they honestly describe the image. Stuffing keywords into alt text can get a page treated as spam.

What alt text is

Alt text lives in the alt attribute of an image tag:

<img src="/images/red-silk-saree.jpg" alt="Red Banarasi silk saree with a gold zari border">

Nobody sees it in the normal page. It shows up in three places:

1. Screen readers. A blind or low-vision visitor hears "Red Banarasi silk saree with a gold zari border, image" instead of nothing, or worse, "IMG underscore 4 5 2 3 dot jpg".
2. Broken images. If the image fails to load on a slow connection, the browser shows the alt text in its place.
3. Search engines. Google reads it to understand what the image shows and which searches the image, and the page, are relevant to.

Alt text is not the same as the title attribute (the tooltip some browsers show on hover) or the caption (the visible text under an image). All three can help, but only alt text is read out by screen readers in place of the image.

What Google actually says about alt text

Google's image SEO guide is short and specific. The key line:

Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.

So Google does look at the pixels, but it doesn't rely on them alone. The words on and around the image count too: the alt text, the caption, image titles, and the page itself. The same guide says to place images "near relevant text and on pages that are relevant to the image subject matter".

Google also gives its own good and bad example:

And the warning that comes with it: keyword stuffing "results in a negative user experience and may cause your site to be seen as spam."

For normal web search (not Google Images), John Mueller explained back in 2018 that alt text is "seen as a part of the text on the page", and that "it does play a big role for image search though". In 2019 he added that pages can rank in web search for content that's in their image alt attributes. So alt text is not a secret ranking lever for your page. It is how your images get found in image search, and a small extra bit of page text.

Why it matters more than it looks

Image search is a separate way in to your site. Someone searching "brass diya set of 12" or "nextjs folder structure diagram" in Google Images can land on your page from the image itself. If Google can't tell what your image shows, the image has little chance of matching that search, however good the photo is.

It matters even more for the people it was made for. A screen reader user on a shop with no alt text hears a list of file names, or nothing at all, and can't tell one product photo from another. Accessibility audits flag missing alt text for the same reason SEO audits do.

How to write good alt text

Describe what the image shows, in the context of the page, the way you'd describe it to someone on the phone.

1. Be specific. "Shoe" says little. "Women's white leather sneakers with a gum sole" says what it is.
2. Keep it short. A few words to one sentence. Put long explanations, such as what a chart means, in the page text or a caption.
3. Write for this page. The same photo of a family can be "Family of four on a beach at sunset" on a travel blog and "Family of four, covered by one health plan" on an insurance page.
4. Use keywords only if they're true. If the photo is a red silk saree and you sell red silk sarees, say so. Don't add city names, "best price" or "buy online".
5. Skip "image of" and "picture of". Screen readers already say it's an image. Do say the type when it matters: "Screenshot of…", "Diagram of…", "Logo of…".
6. Don't repeat the caption or nearby text word for word. A screen reader will read both.
7. Give text in images the same text. If the image is a banner that says "Diwali sale: 30% off", the alt text should say that too, because Google and screen readers can't be relied on to read it from the pixels.

Some examples:

For a product with several colours, give each variant its own alt text. "Blue running shoe" and "red running shoe" tell Google, and a screen reader user, which photo is which.

When alt text should be empty

Some images carry no information at all: a background swirl, a divider line, an icon next to a text label that already says the same thing. For these, use an empty alt attribute:

<img src="/images/divider-wave.svg" alt="">

Google's John Mueller said in 2022: "if it's purely there just for aesthetics, then it's better to just leave the alt text empty." The W3C's accessibility tutorial says the same: decorative images get alt="" so assistive technology skips them.

The important part is that alt="" and no alt are not the same thing:

That is why audit tools treat them differently. "Missing alt attribute" is always a bug. "Empty alt text" is a question: is this image really decorative? A product photo with alt="" is a bug. A divider with alt="" is correct.

One more case: an image that is the only content of a link or button needs alt text that says what the link or button does, unless the link or button already has a label of its own. On this site, the "Continue with Google" button image has alt="" because the button itself carries aria-label="Continue with Google". Without that label, the empty alt would leave the button with no name.

File names: IMG_4523.jpg vs red-silk-saree.jpg

Every phone names photos the same way: IMG_4523.jpg, PXL_20261012_093512.jpg, WhatsApp Image 2026-10-12 at 09.35.12.jpeg. Most of them get uploaded as they are.

Google's guide asks for better: "use filenames that are short, but descriptive", and avoid generic ones like image1.jpg, pic.gif and 1.jpg. Its example is that my-new-black-kitten.jpg is better than IMG00023.JPG.

But read the next line before you rename a thousand files. Google says the file name "can give Google very light clues about the subject matter of the image." Alt text, captions and the page carry far more weight. So:

• For new uploads, rename before uploading. It costs five seconds: red-banarasi-silk-saree.jpg.
• Use hyphens between words, not underscores or spaces. Google's URL guidelines recommend hyphens because they clearly mark where one word ends, while underscores can join words together.
• For old images, don't rename them just for SEO. Renaming changes the image URL, so every page and every external link that uses the old URL has to change too, and Google has to discover the new address. The gain is too small.

Mistakes audits find again and again

1. Product photos with no alt text

The most common one, on every platform. Images get uploaded in bulk and the alt field stays blank. WordPress, for example, fills an upload's title from the file name but leaves its alt text empty, so the image goes out with alt="".

2. Decorative images described in detail

The opposite mistake: every icon, background and divider gets a description, sometimes stuffed with keywords. Screen reader users hear "decorative blue wave shape best web design agency Mumbai" between every section.

3. Alt text that is the file name

alt="IMG_4523" or alt="DSC00012.jpg" is worse than nothing. Some upload tools and plugins copy the file name into the alt field automatically.

4. The same alt text on every image

A gallery of ten photos all called alt="Our products". It tells Google and screen reader users that all ten are the same thing.

5. Text that only exists in the image

Offers, prices and headlines baked into a banner image. Google and screen readers can't be relied on to read text from the pixels, so put it in the alt text, or better, in real text on the page.

6. Important images set as CSS backgrounds

Google's guide is blunt: "Google doesn't index CSS images." A hero photo added with background-image in CSS can't appear in Google Images and can't have alt text. If an image matters, use an <img> tag (or <picture>).

7. The theme ignores the alt text you wrote

You fill in alt text, and the audit still says it's empty. This is a template problem. In Shopify's Dawn theme, for example, the main product gallery falls back to the product title when the alt field is blank, but the thumbnails and collection cards print the alt field as is, so a blank alt shows up as alt="" there. Right-click the image, choose Inspect, and look at the alt in the <img> tag to see what the page really outputs.

Alt text myths

"Keep it under 125 characters or screen readers cut it off." Repeated in many guides, and not true. Screen readers read the whole alt text; JAWS, for example, splits long alt text into chunks rather than dropping the rest. Keep alt text short because a long description is tiring to listen to, not because of a limit. If an image needs a paragraph to explain, put the paragraph in the page.

"Alt text is a ranking factor for my page." Only in a small way. For web search it counts as part of the page's text, and it matters far more for image search.

"Every image needs a description." Every image needs an alt attribute. Decorative images should have an empty one.

"The title attribute does the same job." It doesn't. Screen readers don't reliably read it, and touch screens never show it. Use alt.

"Google can see my image, so alt text doesn't matter." Google uses computer vision, but in its own words, "along with" alt text and the page, not instead of them.

How to see the alt text on a page

1. Right-click an image and choose Inspect. The <img> tag is highlighted, with its alt attribute.
2. To list every image on a page at once, open DevTools (F12), go to the Console, paste this and press Enter:

console.table([...document.images].map((img) => ({
  file: img.currentSrc.split('/').pop().split('?')[0],
  alt: img.getAttribute('alt'),
  size: `${img.naturalWidth}x${img.naturalHeight}`,
})))

A blank alt cell means alt="". null means the attribute is missing.

3. In Chrome's Lighthouse tab, the Accessibility report lists "Image elements do not have [alt] attributes".

How to fix alt text

Plain HTML

Add the attribute to every <img> tag:

<!-- content image -->
<img src="/images/brass-diya-set-12.jpg" alt="Set of 12 brass diyas on a wooden tray" width="1200" height="800">

<!-- decorative image -->
<img src="/images/divider.svg" alt="" width="1200" height="24">

WordPress

• New images: after uploading, click the image in the Media Library and fill in Alternative Text on the right. The Title field is not the alt text.
• Images already in a post: in the block editor, select the Image block and fill in Alternative text in the block settings sidebar.
• The Media Library and the post are separate. The block editor copies alt text into the post when you insert an image. Adding alt text in the Media Library later doesn't change images already placed in posts, so update those in the editor.
• For many images at once, an accessibility checker plugin can list every image with missing alt text across the site.

Shopify

• Product images: open Products, choose a product, click an image, and use Add alt text.
• Theme images (banners, slideshows, collection images): click the image in the theme editor and look for the alt text field.
• Check the output. Some themes print an empty alt in collection cards and thumbnails even when the main product image falls back to the product title. Inspect the live page. If the theme drops the alt text you wrote, the fix is in the theme's Liquid template, where the image tag should use the image's alt text.

Next.js (App Router)

next/image treats alt as a required prop, and Next.js warns you in development when it's missing:

import Image from 'next/image'

export default function Product({ product }) {
  return (
    <>
      <Image src={product.image} alt={product.imageAlt} width={1200} height={800} />
      {/* decorative */}
      <Image src="/divider.svg" alt="" width={1200} height={24} />
    </>
  )
}

The common bug is alt={product.name} on every image of a product, so a gallery of six photos all have the same alt text. Store alt text per image in your CMS or data, the same way you store the image itself.

Check every image on your site

DevTools shows one page. To check a whole site, I use a small Node script. It reads your sitemap, opens every page, and lists each image with a problem. It needs Node 18 or newer and nothing else:

// check-images.mjs — usage: node check-images.mjs https://example.com
const site = process.argv[2].replace(/\/$/, '')
const locs = (xml) => [...xml.matchAll(/<loc>(.*?)<\/loc>/g)].map((m) => m[1])
let urls = locs(await (await fetch(`${site}/sitemap.xml`)).text())
if (urls.some((u) => u.endsWith('.xml'))) {
  urls = (await Promise.all(urls.map(async (u) => (await fetch(u)).text()))).flatMap(locs)
}

const attr = (tag, name) => {
  const m = tag.match(new RegExp(`\\s${name}\\s*=\\s*("([^"]*)"|'([^']*)')`, 'i'))
  return m ? (m[2] ?? m[3]) : null
}
const fileName = (src) =>
  decodeURIComponent(src.match(/[?&]url=([^&]+)/)?.[1] ?? src).split('/').pop().split('?')[0]
const vague = /^(img|dsc|pxl|image|photo|pic|screenshot|whatsapp[ _-]?image)[-_ ]?\d|^\d+\.|^[0-9a-f]{16,}/i

for (const url of urls) {
  const html = await (await fetch(url)).text()
  for (const tag of html.match(/<img\b[^>]*>/gi) ?? []) {
    const alt = attr(tag, 'alt')
    const name = fileName(attr(tag, 'src') ?? '')
    const page = url.replace(site, '') || '/'
    if (alt === null) console.log('NO ALT     ', page, name)
    else if (!alt.trim()) console.log('EMPTY ALT  ', page, name, '(fine if decorative)')
    else if (/\.(jpe?g|png|webp|gif|avif|svg)$/i.test(alt)) console.log('ALT = FILE ', page, alt)
    else if (/^(an? )?(image|picture|photo) of\b/i.test(alt)) console.log('IMAGE OF   ', page, alt)
    if (vague.test(name)) console.log('VAGUE NAME ', page, name)
  }
}

It only reads the HTML the server sends, so images added later by JavaScript won't show up. For a site that builds its pages in the browser, use the DevTools snippet above on the key pages.

What it found on this site

I ran it on txtnode.com: 85 pages and 214 images.

• Missing alt attributes: 0. Every image had an alt.
• Empty alt: 86. All of them were the same "Continue with Google" button image, repeated on every page. That one is correct: the button has its own label, so the image is skipped on purpose.
• Vague file names: 128. Every image uploaded to the blog is stored under a database ID, like 6ad9dfb9e4f3c02fc4ac5885-1.webp. That's the server's naming, not mine, and it's the website equivalent of IMG_4523.jpg.

So the alt text passed, and the file names failed. Given Google's "very light clues" line, renaming the existing files isn't worth breaking their URLs for. The fix that is worth it is in the uploader: save new images under a name made from the article, like h1-tags-cover.webp, so everything uploaded from then on gets a descriptive name for free.

A quick image SEO checklist

1. Every <img> has an alt attribute.
2. Images that carry meaning have a specific, short description written for this page.
3. Decorative images have alt="".
4. No keyword lists, no "image of", no file names as alt text.
5. Text inside images is repeated in the alt text or on the page.
6. Important images use <img> or <picture>, not CSS backgrounds.
7. New uploads get short, descriptive file names with hyphens.
8. Each image sits next to the text it illustrates.
9. The live page outputs the alt text you wrote (check with Inspect).

Questions people ask

How long should alt text be? As long as it needs to be, which is usually under a sentence. There's no character limit in the HTML standard or in screen readers.

Is alt text the same as an alt tag? Yes, people use both names. Strictly, alt is an attribute of the <img> tag, not a tag of its own.

Should alt text include my keyword? If the keyword truthfully describes the image, yes. If you have to bend the description to fit it in, leave it out.

Do I need alt text on my logo? Yes. Use the company name, or where the logo links to: alt="txtnode home". Don't write "logo".

Does alt text help in Google Images? Yes. That's where it matters most. Google uses it, with computer vision and the page, to understand the image.

Can I use AI to write alt text? It's a useful first draft, especially for a large catalogue, but check each one. A tool can describe what it sees; only you know why the image is on that page.

What about image captions? Google uses captions too, and people actually read them. Use a caption when the image needs explaining to everyone, and alt text to describe the image to people who can't see it.

Next in the checklist

This is part 5 of the SEO checklist. Part 1 covers page titles, part 2 covers meta descriptions, part 3 covers canonical tags, part 4 covers H1 tags, and the full list is in the SEO audit checklist.

If the checker gives you a long list of images to fix, paste it somewhere you can tick each one off. txtnode opens a notepad at any URL you type, without an account, and Files keeps notes in folders when you sign in.