Skip to content
RankThat

Mixed content

Mixed content happens when a page loaded over HTTPS includes images, scripts, stylesheets or other files loaded over insecure HTTP. Browsers block or upgrade these requests and may show security warnings.

A page is only as secure as the least secure thing it loads. If the page itself comes over HTTPS but pulls in a script, stylesheet, image or iframe from an http:// address, that’s mixed content. The insecure file could be read or tampered with on its way to the visitor, which undermines the encryption on the rest of the page.

What browsers do about it

Modern browsers are strict:

  • Scripts, stylesheets, iframes and fonts over HTTP are blocked outright. The page may lose its styling or functions such as a booking widget or a map.
  • Images, audio and video over HTTP are automatically upgraded to HTTPS by Chrome and other browsers. If the file isn’t available over HTTPS, it fails to load.
  • Forms that submit to an HTTP address trigger a warning before the data is sent.

Why it matters

The symptoms often look like random bugs. Coastline Plumbing moves to HTTPS, and a week later the “Request a quote” form stops working on some pages. The cause: an old embed code loads the form script from http://, so the browser blocks it. Nobody notices until leads drop. Elsewhere, a few blog images are missing because they were hard-coded with http:// URLs to an old server.

Search engines don’t penalize mixed content directly, but broken layouts, missing images and failing forms hurt the visitor experience and conversions.

How to fix it

  1. Find it. Open the page in Chrome, press F12, and look at the Console tab for “Mixed Content” warnings. Each one names the file.
  2. Change http:// to https:// in the source: theme files, page builder settings, widget embed codes and content.
  3. On WordPress, a search-and-replace across the database (with a tool such as Better Search Replace, after a backup) updates old http://yourdomain.com URLs in posts and settings.
  4. Replace third-party resources that aren’t available over HTTPS at all.
  5. As a safety net, the Content Security Policy header upgrade-insecure-requests tells browsers to request every resource over HTTPS:
Content-Security-Policy: upgrade-insecure-requests

This helps, but it’s a backstop. Fixing the URLs at the source is cleaner.

Common mistakes

Fixing only the homepage. Mixed content often lives in old blog posts, footer widgets or a single landing page built years ago. Another mistake is forcing HTTPS before checking that every third-party script supports it.

How to check

RankThat’s Site Audit flags mixed content on every page it crawls, and on WordPress the Bridge plugin can fix mixed content as a reviewable change you can undo in one click. Adding HSTS afterwards makes sure browsers never fall back to HTTP for your own domain.

Do this month’s SEO in an afternoon.

Start free trialCheck a site free