Mixed content
What is mixed content?
Mixed content is when a page served over HTTPS loads some of its resources, such as images, scripts, stylesheets, fonts or iframes, over plain HTTP. The page itself is encrypted, but those files are not, so they can be read or tampered with in transit. Browsers treat it as a security problem and block or upgrade much of it.
Browsers split it into two kinds. Active mixed content, such as scripts, stylesheets, iframes and fetch requests, can change the whole page, so modern browsers block it outright. Passive or display content, such as images, audio and video, is less dangerous; current versions of Chrome and other browsers try to load it over HTTPS automatically and block it if that fails.
Why mixed content matters for SEO
Blocked resources break pages. A blocked script can stop a menu, form or checkout working; a blocked stylesheet leaves the page unstyled; a blocked image leaves a hole. Search engines that render the page may see the same broken version.
It also undermines a move to HTTPS. Visitors can see a warning or lose the padlock, and the site sends mixed signals about which protocol it really uses. Mixed content is one of the most common leftovers after an HTTPS migration.
How to fix mixed content
- Find it: open the browser console on HTTPS pages, which logs every mixed content warning, or crawl the site with a tool that checks resource URLs.
- Change hard-coded http:// URLs in templates, content and the database to https://, or to relative URLs for files on your own site.
- For third-party files, check the provider serves them over HTTPS. If it doesn’t, host the file yourself or replace it.
- As a safety net, send the
Content-Security-Policy: upgrade-insecure-requestsheader, which tells browsers to request every resource over HTTPS. - Re-crawl to confirm nothing is left.
Mixed content example
<!-- On https://www.example.com/ -->
<!-- Mixed content: loads over plain HTTP -->
<script src="http://cdn.example.net/widget.js"></script>
<img src="http://www.example.com/images/logo.png" alt="Example">
<!-- Fixed -->
<script src="https://cdn.example.net/widget.js"></script>
<img src="/images/logo.png" alt="Example">Mixed content FAQ
Does mixed content affect SEO?
Indirectly. It can break how pages render and look, for visitors and for search engines, and it weakens the security benefit of HTTPS. It is worth fixing on any HTTPS site.
How do I find mixed content?
Open the browser’s developer console on a page: every insecure request is logged as a mixed content warning. For a whole site, use a crawler that checks the URLs of images, scripts and stylesheets.
Related SEO terms
HTTPS is the encrypted version of HTTP. It protects data between browser and site, and Google uses it as a lightweight ranking signal.
HSTS (Strict-Transport-Security)
HSTS is a response header that tells browsers to only connect to a site over HTTPS, so they never load it over insecure HTTP.
Security headers are HTTP response headers that tell browsers how to handle a site’s content safely, blocking common attacks.
Rendering is when a search engine runs a page’s HTML, CSS and JavaScript to build the page as a browser would, so it can see the final content.
Technical SEO is making sure search engines can crawl, render and index your site, covering speed, redirects, canonicals, sitemaps and mobile.