8 Image SEO Mistakes That Hurt Your Rankings

Image search is a real acquisition channel. In retail, recipes, travel, and home improvement, a meaningful share of organic traffic arrives through Google Images or Lens rather than through the blue links.

Most sites forfeit that traffic through eight repeatable mistakes. None of them are difficult to fix, and none of them require new photography.

How Google Sees an Image

Before the list, the model matters. A crawler cannot look at your photograph and understand it the way a person does. It infers meaning from signals around the file:

Signal	Weight	Where it comes from
Alt text	High	The alt attribute
Surrounding text	High	The paragraph and heading nearest the image
Filename	Medium	The URL path
Page title and topic	Medium	The rest of the page
Structured data	High for rich results	JSON-LD
Caption	Medium	<figcaption>
Image sitemap	Medium	Discovery, not ranking
Visual content itself	Growing	Machine vision, Lens

Every mistake below removes one of these signals.

1. Filenames That Say Nothing

IMG_4821.jpg, Screenshot 2026-03-14 at 11.02.31.png, final-v3-USE-THIS-one.jpg. These are the default outputs of a camera, a phone, and a rushed designer, and they tell a crawler nothing.

The Fix

The filename is part of the URL, and the URL is a ranking signal. Describe the subject in words, separated by hyphens.

Bad	Good
IMG_4821.jpg	walnut-desk-lamp-brass-shade.jpg
Screenshot 2026-03-14.png	chrome-devtools-network-panel-image-column.png
product1.jpg	merino-crew-neck-jumper-navy-front.jpg
hero-final-v2.webp	open-plan-office-shared-desk.webp

Rules that matter:

• Hyphens, not underscores. Google treats hyphens as word separators and underscores as joiners.
• Lowercase only. Some servers are case-sensitive, and mixed case produces duplicate URLs.
• No spaces. They become %20 and make the URL unreadable.
• Three to six words. Descriptive, not a keyword list.

Renaming Existing Images

Renaming changes URLs, so do it with redirects in place:

# Preserve link equity when you rename an image
location = /images/IMG_4821.jpg {
  return 301 /images/walnut-desk-lamp-brass-shade.jpg;
}

If a rename is not practical across a large catalogue, prioritise the images on your highest-traffic pages and leave the rest. Filename is a medium-weight signal, not a decisive one.

2. Alt Text That Is Missing, Empty, or Stuffed

Three failure modes, three different consequences.

Failure	What happens
No alt attribute	Screen readers announce the filename. Search engines get nothing.
alt="" on a meaningful image	Correctly hidden from assistive tech, so the content is invisible to everyone who cannot see it
Keyword-stuffed alt	Reads as spam to a crawler, and is genuinely painful to hear aloud

The Fix

Describe what the image shows, in the context of the page.

<!-- Missing: screen reader reads "I M G 4 8 2 1 dot J P G" -->
<img src="IMG_4821.jpg">

<!-- Stuffed: penalised and unpleasant to hear -->
<img src="lamp.jpg" alt="desk lamp buy desk lamp cheap desk lamp walnut lamp brass lamp best lamp">

<!-- Good -->
<img src="walnut-desk-lamp-brass-shade.jpg"
     alt="Walnut desk lamp with a brushed brass shade on a study desk">

When alt="" Is Correct

Decorative images should have an empty alt so screen readers skip them entirely. An empty alt is a decision, not an omission.

<!-- Decorative divider: correctly skipped -->
<img src="wave-divider.svg" alt="" role="presentation">

<!-- Image inside a link: describe the destination, not the picture -->
<a href="/collections/lighting">
  <img src="lighting-category.jpg" alt="Shop the lighting collection">
</a>

Never write “Image of” or “Photo of”. Screen readers already announce the element type. The alt text guide has the full decision tree.

3. Images the Crawler Cannot Reach

An image that renders perfectly for a human may be entirely invisible to a crawler. Four common causes:

Lazy Loading That Hides the Source

Native lazy loading is safe. JavaScript lazy loading that puts the real URL in data-src is not, unless the crawler renders the page and scrolls it.

<!-- Risky: the src is a placeholder until JS runs -->
<img data-src="product.jpg" src="placeholder.gif" class="lazyload" alt="…">

<!-- Safe: native, and the real URL is in the HTML -->
<img src="product.jpg" loading="lazy" width="800" height="600" alt="…">

Use native loading="lazy". It is supported everywhere, needs no library, and keeps the real URL in the markup.

CSS Background Images

A background-image is a style, not content. Google does not index it as an image. If the picture carries meaning, it belongs in an <img> or <picture> element.

/* Not indexable as an image */
.hero { background-image: url('hero.jpg'); }

Use CSS backgrounds only for textures, gradients, and decoration.

Blocked in robots.txt

A surprising number of sites block their own image directories, usually as a leftover from an old bandwidth concern.

# This makes every image on the site unindexable
User-agent: *
Disallow: /images/
Disallow: /wp-content/uploads/

Check yours. If your CDN sits on a separate hostname, check its robots.txt too, since that is the host serving the files.

Images Injected Only by JavaScript

A gallery that builds its DOM client-side may be indexed eventually, but rendering is a slower and less reliable path than parsing HTML. Put the important images in the initial markup.

4. Slow Images Dragging Down the Whole Page

Page experience is a ranking input, and images are the largest contributor to Largest Contentful Paint on most pages. A page that fails Core Web Vitals is competing with a handicap on every query.

The Three That Matter

Metric	Image cause	Fix
LCP	Hero image too large, lazy loaded, or JS-injected	Right-size it, fetchpriority="high", real HTML
CLS	No width/height on <img>	Set intrinsic dimensions
INP	Heavy image decode blocking the main thread	Smaller images, decoding="async"

<img src="hero-1200.avif"
     width="1200" height="630"
     fetchpriority="high"
     decoding="async"
     alt="…">

This overlaps heavily with general performance work. The Core Web Vitals guide and the 12 optimization mistakes cover the mechanics.

5. No Structured Data

Structured data is how you tell Google exactly which image belongs to which entity. Without it, rich results, Google Shopping listings, and recipe cards have no image to display.

Product

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Walnut Desk Lamp",
  "image": [
    "https://example.com/lamp-1x1.jpg",
    "https://example.com/lamp-4x3.jpg",
    "https://example.com/lamp-16x9.jpg"
  ],
  "sku": "LMP-WAL-001",
  "brand": { "@type": "Brand", "name": "Example Co" },
  "offers": {
    "@type": "Offer",
    "price": "149.00",
    "priceCurrency": "GBP",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Article

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Photograph Furniture for Online Sale",
  "image": ["https://example.com/article-16x9.jpg"],
  "datePublished": "2026-08-15",
  "author": { "@type": "Person", "name": "Jane Doe" }
}
</script>

The Three-Ratio Rule

Supply each image in 1:1, 4:3, and 16:9. Google picks whichever fits the surface it is rendering. Providing all three measurably increases eligibility for rich results.

An image CDN generates them from one master, so this costs no extra storage:

https://demo.sirv.com/lamp.jpg?w=1200&h=1200&scale.option=fill
https://demo.sirv.com/lamp.jpg?w=1200&h=900&scale.option=fill
https://demo.sirv.com/lamp.jpg?w=1200&h=675&scale.option=fill

Validate with the Rich Results Test before shipping. A single malformed property invalidates the whole block.

6. No Image Sitemap

Google discovers most images by crawling pages. That works, but it is slow for large catalogues and unreliable for images loaded through JavaScript or served from a separate CDN hostname.

The Fix

Add image entries to your existing sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/products/walnut-desk-lamp</loc>
    <image:image>
      <image:loc>https://cdn.example.com/walnut-desk-lamp-front.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://cdn.example.com/walnut-desk-lamp-detail.jpg</image:loc>
    </image:image>
  </url>
</urlset>

Two rules people get wrong:

1. The <image:loc> may be on a different hostname than <loc>. That is exactly what image sitemaps are for.
2. Verify the CDN hostname in Search Console, or Google may not trust the cross-domain entries.

Only list images you want indexed. Icons, spacers, and UI chrome should stay out.

7. Serving the Same Image From Many URLs

Query strings, tracking parameters, protocol variants, and CDN aliases all create separate URLs for one file. Signals split across them, and none of the copies ranks as well as one consolidated URL would.

Where Duplicates Come From

Cause	Example
Cache-busting parameters	lamp.jpg?v=3, lamp.jpg?v=4
Analytics parameters passed through	lamp.jpg?utm_source=email
www and non-www both serving	Both resolve, neither redirects
HTTP and HTTPS both serving	Mixed-content history
Multiple CDN aliases	cdn1.example.com, cdn2.example.com
Resize parameters treated as distinct	lamp.jpg?w=800 versus lamp.jpg?w=801

The Fix

Pick one canonical hostname for images and redirect everything else to it. Use a stable, versioned filename rather than a query string for cache busting:

# Instead of this
/images/lamp.jpg?v=4

# Do this
/images/lamp.a4f21c.jpg

For a CDN with width parameters, standardise on a fixed ladder of widths, so you generate four canonical variants rather than several hundred near-identical ones.

Send a canonical header on image responses where your CDN supports it:

Link: <https://cdn.example.com/lamp.jpg>; rel="canonical"

8. Images With No Textual Context

An image sitting alone between two unrelated paragraphs has almost no context to inherit. Crawlers weight the nearest text heavily, so an image surrounded by nothing relevant ranks for nothing.

The Fix

Use <figure> and <figcaption>. A caption is read by people, indexed by crawlers, and creates an explicit association between the image and its description.

<figure>
  <img src="walnut-desk-lamp-brass-shade.jpg"
       width="1200" height="800"
       alt="Walnut desk lamp with a brushed brass shade on a study desk">
  <figcaption>
    The brass shade pivots through 40 degrees, so the light can be
    directed at the page or bounced off the wall.
  </figcaption>
</figure>

Place images near relevant text. An image about compression belongs in the compression section, not at the bottom of the page.

Give the page a clear topic. Google uses the page’s overall subject to disambiguate an image. A photograph of a lamp on a page about lighting design is understood better than the same photograph on a generic “gallery” page.

Add a descriptive title where it helps. The title attribute is weak as a ranking signal and it is not a substitute for alt, but it does no harm on complex images.

Captions are also a strong visual search signal. The visual search guide covers Lens and Pinterest specifically.

Auditing Your Own Site

Run this on any page to list the images that lack SEO signals:

[...document.querySelectorAll('img')]
  .map(img => ({
    src: img.getAttribute('src'),
    lazySrc: img.getAttribute('data-src') || null,
    alt: img.getAttribute('alt'),
    filenameOK: /^[a-z0-9-]+\.[a-z]+$/.test((img.currentSrc || '').split('/').pop().split('?')[0]),
    hasDimensions: img.hasAttribute('width') && img.hasAttribute('height'),
    inFigure: !!img.closest('figure')
  }))
  .filter(r => r.alt === null || r.lazySrc || !r.filenameOK || !r.hasDimensions)
  .forEach(r => console.table([r]));

Then check the site-wide items by hand:

1. robots.txt on both the site host and the CDN host
2. An image sitemap exists and is submitted in Search Console
3. The CDN hostname is verified in Search Console
4. Structured data validates in the Rich Results Test
5. Google Search Console → Performance → Search type: Image shows impressions

That last one is the real scoreboard. If image impressions are near zero on a page type that should generate them, one of the eight mistakes above is the cause.

Summary

The Eight at a Glance

#	Mistake	Signal lost	Fix
1	Meaningless filenames	URL relevance	Hyphenated descriptive names
2	Missing or stuffed alt	Primary text signal	Describe the image in context
3	Unreachable images	Everything	Native lazy loading, real <img>, check robots.txt
4	Slow images	Page experience	Right-size, fetchpriority, set dimensions
5	No structured data	Rich result eligibility	Product/Article JSON-LD, three ratios
6	No image sitemap	Discovery	image:image entries, verify the CDN host
7	Duplicate image URLs	Split signals	One canonical host, versioned filenames
8	No surrounding context	Topical association	<figcaption>, relevant placement

Checklist

1. ✅ Filenames are lowercase, hyphenated, and describe the subject
2. ✅ Every meaningful image has descriptive alt text, every decorative one has alt=""
3. ✅ Lazy loading is native, not data-src based
4. ✅ Meaningful images are <img> elements, not CSS backgrounds
5. ✅ robots.txt on the site and the CDN allows image crawling
6. ✅ Core Web Vitals pass on image-heavy templates
7. ✅ Product and Article structured data lists images in 1:1, 4:3, and 16:9
8. ✅ An image sitemap exists and the CDN host is verified in Search Console
9. ✅ One canonical hostname serves images, with versioned filenames
10. ✅ Important images sit inside <figure> with a real caption

Fix 2 and 3 first. Alt text and crawlability are binary: without them nothing else you do to an image matters.