Mixed content happens when a page loaded over HTTPS pulls in images, scripts, stylesheets or frames over plain HTTP. Browsers block the insecure scripts and frames outright, and try to upgrade or block the insecure images and media, so parts of the page break and the padlock can disappear. Visitors see a warning, and you lose the security guarantee HTTPS is supposed to give.
What mixed content looks like
The page itself is secure, but a resource inside it is not:
<!-- Page served from https://example.com/pricing -->
<link rel="stylesheet" href="http://cdn.example.com/styles.css">
<script src="http://widgets.example.net/chat.js"></script>
<img src="http://example.com/uploads/hero.jpg" alt="Product dashboard">
Open the browser console on a page like this and you will see warnings such as Mixed Content: The page at 'https://…' was loaded over HTTPS, but requested an insecure script.
How browsers handle it
Modern browsers follow the W3C Mixed Content specification and treat resources in two groups:
- Images, audio and video are upgraded to HTTPS automatically. If the HTTPS version does not exist, the resource is blocked and the image is simply missing. Images set through
srcsetor<picture>, and resources on an IP address instead of a domain, are blocked rather than upgraded. - Everything else, including scripts, stylesheets, iframes, fonts and fetch requests, is blocked. A blocked stylesheet leaves the page unstyled; a blocked script can break checkout, forms or analytics.
Either way, an attacker on the network could have modified the insecure resource, which is exactly why browsers refuse it.
Why it matters for search
HTTPS is part of page experience. It does not lift rankings directly, but a page that looks broken or insecure loses visitors before they read anything. Missing images also cost image search traffic, just like images without alt text, and blocked scripts can hide content that only renders through JavaScript, which means crawlers do not see it either. AI features in Search use the same index, so content that fails to render is content that cannot be quoted.
Why mixed content happens
- HTTPS migrations. The site moved to HTTPS and redirects every HTTP URL in one hop, but old posts, product descriptions and settings still contain
http://URLs. - Hardcoded URLs in templates that were written before the move.
- Third party embeds such as old widgets, ad tags or iframes that only offered an HTTP snippet.
- Protocol relative URLs (
//example.com/file.js) copied from old documentation, which are only as secure as the page that loads them. - CDN or asset settings still configured with an
http://base URL.
How to find mixed content
- Check one page. Open the browser console and reload. Every mixed resource is logged with its full URL. The Security panel in Chrome DevTools also lists them.
- Check every page. UpCrawler scans each crawled HTTPS page for subresources loaded over HTTP and flags Mixed content on HTTPS, with example URLs from the page so you can tell a template problem from one bad post.
- Search your content. Look for
http://in your theme files and database. Most mixed content lives in stored content, not code. - Collect reports from real visitors. A
Content-Security-Policy-Report-Onlyheader that allows only HTTPS sources, with a reporting endpoint, makes browsers report every insecure request they meet, including on pages a crawl does not reach.
Search Console does not list individual insecure resources, so a crawler or the browser console is how you find them.
How to fix mixed content
- Switch every resource to HTTPS. Change
http://tohttps://in templates, settings and stored content. Use absolute HTTPS URLs rather than protocol relative ones. - Check the resource exists over HTTPS. Open the new URL directly. If the third party does not support HTTPS, host the file yourself or replace the service.
- Update stored content in bulk with a search and replace, not by hand, so old posts are fixed too.
- Add
upgrade-insecure-requestsas a safety net. This Content Security Policy directive tells browsers to request every subresource over HTTPS, which catches anything you missed. It sits alongside the other security headers every HTTPS site should send:
Content-Security-Policy: upgrade-insecure-requests
If a resource has no HTTPS version, the upgraded request fails and the resource does not load, so this is a safety net, not a substitute for fixing the URLs.
- Re-crawl to confirm no page loads anything over HTTP.
Send the directive for every route from next.config.ts:
async headers() {
return [
{
source: '/(.*)',
headers: [{ key: 'Content-Security-Policy', value: 'upgrade-insecure-requests' }]
}
]
}
Then fix the source URLs themselves. If remote images go through next/image, make sure every entry in images.remotePatterns uses protocol: 'https'.
- Under Settings, then General, set both WordPress Address and Site Address to
https://. - Replace old URLs in the database. With WP-CLI:
wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run
Remove --dry-run once the preview looks right, and take a backup first. Plugins such as Better Search Replace do the same from the dashboard.
- Check theme and plugin settings for hardcoded
http://logo, font or script URLs.
Shopify serves its own assets over HTTPS, so mixed content almost always comes from code or content you added: custom Liquid sections, Custom HTML blocks, product descriptions with pasted images, or app snippets in theme.liquid. Search the theme code for http:// under Online Store, then Themes, then Edit code, and replace each match with an HTTPS URL. Themes cannot send headers, but the same safety net works as a meta tag inside <head> in theme.liquid:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Let AI fix it, page by page.
Paste this prompt into AI with your project open. In UpCrawler, every affected page comes with a prompt like this, already filled in with its URL.
Rewrite every http:// subresource to https:// in templates and in stored CMS content. Use absolute HTTPS URLs rather than protocol-relative ones.
Frequently asked questions
What is mixed content?
A page served over HTTPS that loads at least one resource, such as an image, script or stylesheet, over insecure HTTP. Browsers block or upgrade those resources, which can break the page and remove the padlock.
How do I fix the mixed content warning in Chrome?
Open DevTools, read the console warnings to get the exact insecure URLs, and change each one to HTTPS at its source: the template, the setting or the stored content. Add upgrade-insecure-requests to catch any you missed.
Does mixed content affect SEO?
Indirectly. It breaks page experience, can hide images and script rendered content from crawlers, and makes visitors leave. Fixing it is usually a quick search and replace.
Is it safe to use protocol relative URLs?
They work on HTTPS pages, but there is no reason to use them anymore. Use explicit https:// URLs so every resource is secure regardless of how the page was loaded.
Share it with whoever runs your site’s SEO.
