How Broken Images Hurt SEO (and Fix Them with Fallback URLs)
Understand how broken images seo impact affects crawling, Core Web Vitals CLS, and structured data. Fix broken images with onerror fallback URLs before they cost you rankings.
Broken images affect SEO in three distinct ways: Googlebot cannot index image content from broken URLs, the missing visual signals CLS to Core Web Vitals if dimensions are not reserved, and structured data markup that references broken images may be treated as invalid by Google's rich results validator.
This guide covers how broken images seo impact works in practice, how to find broken images at scale, and how fallback URLs prevent the SEO damage without requiring changes to your CMS or upload workflow.
How Google sees it
How broken images affect SEO and Googlebot crawling
Googlebot crawls images separately from page content. It follows img src attributes, srcset URLs, and og:image meta tag values. When a crawl returns a 4xx or 5xx status for an image URL, Google marks that image as unavailable for its index. Indexed images contribute to Google Images traffic and can appear as rich results for some content types.
Broken images in structured data are flagged by the Rich Results Test. If your Article, Product, or Recipe schema references an image URL that returns an error, the structured data is considered incomplete and may not generate rich results in search. The image property is required in several schema types.
Broken images do not directly cause a page ranking penalty, but they can reduce crawl efficiency. Google's crawl budget is not unlimited—spending crawl capacity on broken image URLs is waste that could be used for new or updated content.
CLS impact
CLS from missing images hurts Core Web Vitals scores
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much the page layout shifts during load. An image without width and height attributes that fails to load starts as zero height, then causes a shift when an error state renders or when a fallback image loads at its intrinsic size.
Google uses CLS as a ranking signal via the Page Experience update. A CLS score above 0.1 is in the 'needs improvement' category; above 0.25 is 'poor.' A catalog page with dozens of broken product images, each causing a small layout shift, can accumulate a CLS score that meaningfully affects rankings.
The fix at the layout level is setting explicit width and height on every img element. The fix at the content level is providing a fallback URL via onerror so the element always has a visible, correctly-sized image even when the original URL fails.
Finding broken images
Scanning for broken images at scale with crawlers and logs
Screaming Frog, Sitebulb, and Ahrefs Site Audit all detect broken image URLs during a site crawl. Run a full crawl and filter for image URLs returning 4xx or 5xx responses. Export the list and triage by page—product pages, blog posts, and category archives are typically the highest priority.
Server access logs give you the real-world picture. Filter for image requests returning 404 and group by URL path. High-frequency 404s for image URLs usually indicate a systematic problem: an upload workflow that does not create the expected filename, a CDN path change, or a CMS migration that broke image references.
Sentry and similar error monitoring tools can track client-side image errors via the img onerror event. A global error handler that logs broken image URLs provides real-user data that crawlers cannot capture, including images that fail due to CDN edge issues or client network conditions.
Onerror fallback
Using fallback URLs to fix broken images before Google crawls them
An onerror fallback URL does not change the response Googlebot gets when it crawls the original src—it still returns a 404. The fallback only fires in the browser. To fix the SEO problem completely, you need to update the actual src value or add a server-side redirect for the broken URL.
However, the onerror fallback immediately fixes the user-facing problem and prevents the CLS damage. For pages where the broken image is causing measurable CLS, adding the fallback while you investigate the root cause is the right tactical step.
For structured data, update the image property to reference the fallback URL so Google's validator sees a valid, accessible image. This is more important for Product and Article schema where the image is required for rich results.
<!-- Fix broken image with onerror fallback (prevents CLS for users) -->
<img
src="/uploads/product-photo.jpg"
onerror="this.onerror=null; this.src='https://fallback.pics/api/v1/400x400/F3F4F6/9CA3AF?text=No+Image'"
width="400"
height="400"
alt="Product photo"
/>
<!-- Update structured data to reference a valid image URL -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Product Name",
"image": "https://fallback.pics/api/v1/400x400/F3F4F6/9CA3AF?text=Product"
}
</script>Alt text
Alt text on fallback images for SEO and accessibility
The alt attribute on a fallback image should describe the content the image represents, not the fact that it is a fallback. If the fallback is for a product photo, alt should be the product name. If it is for a blog featured image, alt should be the post title or a description of the topic.
Search engines use alt text as a signal for image relevance. An empty alt on a fallback image is treated as a decorative image; a descriptive alt is treated as content-relevant. For product and editorial content where images contribute to SEO, maintain meaningful alt text even on fallback states.
Screen readers announce alt text when images are not loaded or when images fail. Users navigating with assistive technology need meaningful alt text on fallback images just as much as on real images.
Sitemap
Image sitemaps and broken image references
XML sitemaps with image extensions reference image URLs that should return 200 responses. A sitemap that lists broken image URLs tells Google to crawl URLs that return errors, which wastes crawl budget. Audit your image sitemap periodically and remove or update entries for image URLs that no longer exist.
Generate image sitemap entries programmatically from your CMS. If your CMS flags products or posts without images, you can skip those entries from the sitemap or use the fallback URL as the sitemap image reference. A fallback URL in the image sitemap is better than a broken URL—it gives Google something to index.
<!-- Image sitemap with fallback URL for products without photos -->
<url>
<loc>https://example.com/products/widget/</loc>
<image:image>
<image:loc>https://fallback.pics/api/v1/400x400/F3F4F6/9CA3AF?text=Widget</image:loc>
<image:title>Widget</image:title>
<image:caption>Product image for Widget</image:caption>
</image:image>
</url>Key takeaways
What to standardize before shipping
- Broken image URLs waste Googlebot crawl budget and exclude images from Google Images indexing.
- CLS from missing images—images without reserved dimensions—affects Core Web Vitals scores and page experience rankings.
- The onerror fallback fixes the user-facing problem immediately; fix the actual src URL to resolve the SEO problem completely.
- Update image properties in structured data to reference valid URLs so rich results validation passes.
- Maintain descriptive alt text on fallback images—screen readers and search engines both use it.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
How to Fix Broken Images in HTML with onerror
Use the HTML img onerror fallback pattern to replace broken images with stable fallback.pics URLs while preserving layout, alt text, and production safety.
From Broken Image Icon to Branded Fallback: A Production Rollout Checklist
Audit broken image states, choose branded fallback URLs, update shared components, test image failures, and monitor rollout quality.
Alt Text for Placeholder and Fallback Images: Practical Rules
Apply practical image alt text placeholder rules for loading states, error fallbacks, decorative placeholders, and screen reader accessibility across WCAG guidelines.