Broken images, scripts and stylesheets
A broken image, script or stylesheet is a file your page loads that answers an error, usually 404 because it was deleted, renamed or moved. Put the file back at its address, or update every tag that loads it, each srcset entry included. Visitors see alt text or an empty space instead of a broken image, and a missing script or stylesheet can break the page's layout or features.
Why it matters
When a browser cannot load an image, it may show the image's alt text in its place, or nothing at all. A missing stylesheet leaves unstyled whatever it styled, and a missing script takes its features with it: a menu, a form, a gallery.
Google does not use the content of a URL that answers a 4xx code, so a missing image gives Google Images nothing to index. Google renders pages with an evergreen Chromium and says content that is not in the rendered HTML cannot be indexed: if the missing script was the one that adds text to the page, Google does not see that text either.
An image's srcset lists several files, and the browser picks one at its discretion, by screen size and conditions. A missing candidate can break the image for some visitors while it looks fine on your screen.
SERPCompass rates both findings as warnings and counts the pages that load at least one broken file. One missing logo in a shared header is counted on every page that shows it, which is also why fixing it once clears them all.
The audit findings this guide fixes: Pages with broken internal images; Pages with broken internal scripts or stylesheets.
Find every page with this problem
Run the free scan on your domain. For every page it crawls, it collects the images (each <img> src and srcset candidate, and the srcset of <source> elements in a <picture>), the scripts (<script src>) and the stylesheets (<link rel="stylesheet">) the page loads. It requests each file on your own domain and its subdomains once, following redirects, up to 176 files in the free scan; files on other domains, such as a site builder's or a CDN's, are not checked, and neither are CSS background images. A file that answers 400 or above, or whose host refuses the connection or does not exist, is broken; one that times out is not counted. The scan shows your most urgent findings with the number of pages each affects; the Gap Report and a SERPCompass workspace list, for each affected page, up to 10 of its broken files. To look at one page yourself, open your browser's developer tools, choose the Network panel, filter by Img, JS or CSS and reload: the Status column shows each file's code, and the Initiator column shows what requested it.
How to fix it on your platform
WordPress
- Read the broken file's address in the audit's details. WordPress keeps themes, plugins and uploads in its
wp-contentdirectory, usually in folders namedthemes,pluginsanduploads(a site can move or rename them), so the address tells you whether your theme, a plugin or your media uploads hold the file. - For an image in a post or page, open it in the editor, select the Image block, click Replace in the block toolbar and choose an image from the Media Library or upload one. If the image is no longer wanted, remove the block. Update the post.
- For a missing file in a theme's or plugin's folder, it is that theme or plugin that asks for it: take the file's address to its developer.
Sources: Editing wp-config.php (WordPress advanced administration handbook); Determining plugin and content directories (WordPress plugin handbook); Image block (WordPress documentation).
Shopify
- If the broken file is one you uploaded to Content > Files, check its current address there. When you change a file's URL, its previous URL stops working, and when you replace a file, its name stays the same but its link changes.
- Click the Link button beside the file to copy its current address, and paste it where the old address is used: the theme code, a product description or a page.
- A script left behind by an app can be one of the broken files: Shopify says uninstalling an app does not automatically remove its code from your theme, and that you may need the app developer's instructions to remove it.
Sources: Files (Shopify Help Center); Improving your online store performance (Shopify Help Center).
Plain HTML
- Open the page with your browser's developer tools on the Network panel and reload. The Status column shows 404 for a missing file, and the Initiator column shows what requested it.
- Put the file back at its address, or correct the address in the tag. A relative address is resolved against the page's own address, or against its
<base href>when it has one, soimages/logo.pngon/blog/post/asks for/blog/post/images/logo.png. Start it with/to mean your site's root. - Check the
srcand every candidate insrcset: browsers pick any candidate. Google recommends always giving asrcas the fallback. - Remove
<script>and<link rel="stylesheet">tags for files your site no longer has, such as those of a removed plugin or widget.
Sources: Network features reference (Chrome for Developers); The Document Base URL element (MDN); The Image Embed element (MDN); Google image SEO best practices (Google Search Central).
Examples
-
Bad
<!-- on /blog/first-post/ --> <img src="images/logo.png" alt="Example Bakery">A relative address: on this page it asks for
/blog/first-post/images/logo.png, which does not exist. -
Good
<img src="/images/logo.png" alt="Example Bakery">A leading slash: the same file from every page.
-
Bad
<img src="/img/cake-800.jpg" srcset="/img/cake-800.jpg 800w, /img/cake-1600.jpg 1600w" sizes="100vw" alt="Chocolate cake">If
cake-1600.jpgwas deleted, wide screens get a broken image while a phone shows the cake. -
Bad
GET /wp-content/plugins/old-slider/slider.js 404 Not Found loaded by: every pageA script of a plugin that was removed, still printed by the theme: every page that loads it is counted.
Common mistakes
- Deleting or renaming a file in the media library without updating the pages that use it.
- Fixing an image's
srcand forgetting the files in itssrcset. - Writing relative addresses that only work from the page they were written on.
- Uninstalling an app or plugin and leaving its script or stylesheet tags in the theme.
- Testing only on your own screen. Your browser may show a copy from its cache, and it downloads just one
srcsetcandidate.
Questions and answers
Do broken images affect SEO?
A missing image cannot be indexed: Google does not use the content of URLs that answer a 4xx code. For the page itself we make no ranking claim. Visitors see an empty space or the alt text instead of the picture, and a broken script can take content with it that Google then does not see when it renders the page.
Why does the scan list an image that looks fine to me?
Your browser may be showing a copy from its cache, or it picked a different srcset candidate from the missing one. A firewall or CDN that refuses our crawler is another cause, since a 403 answer counts as broken. Request the file's address directly, for example with curl -I, to see what it answers.
Does the scan check images hosted on other websites?
No. It checks files on your own domain and its subdomains. Images that a site builder or a CDN serves from its own domain are not requested. Links to other sites that fail are a separate finding, covered in the broken links guide.
How do I find which page loads a broken file?
The Gap Report and a SERPCompass workspace list, for each affected page, up to 10 of its broken files. For one page, open the Network panel of your browser's developer tools and reload: the Status column shows 404 for a missing file, and the Initiator column shows what requested it.
More guides
- Broken links to pages that answer an error
- Images that are too large or in an older format
- Redirect chains, loops and other redirect problems
- All guides
- Free tools: checks for robots.txt and llms.txt that need no account.
Sources
- How HTTP status codes, and network and DNS errors affect Google Search (Google Search Central)
- Understand the JavaScript SEO basics (Google Search Central)
- Google image SEO best practices (Google Search Central)
- The Image Embed element (MDN)
- The Document Base URL element (MDN)
- Network features reference (Chrome for Developers)
- Editing wp-config.php (WordPress advanced administration handbook)
- Determining plugin and content directories (WordPress plugin handbook)
- Image block (WordPress documentation)
- Files (Shopify Help Center)
- Improving your online store performance (Shopify Help Center)
Start with a free scan of your site.
Two to five minutes, no account. You get your three most urgent findings, and the exact count of everything else.