What is Mixed Content? How Does It Affect SEO?
Mixed Content is when a web page with secure connection (HTTPS) loads resource from unsecure connection (HTTP), even if it’s just one resource or one content.
This resource may be an image, CSS file, JS file, XML file, iframe, video, etc.
A page opened from HTTPS connection is considered to be safe from sniffing attack or what we known as a man-in-the-middle attack. This connection is encrypted and has authentication. So nobody can peek on your traffic data transfer.
This secure connection is pretty important for a website which has login feature, password usage and payment data. Users security can be more assured because they opened the right website with HTTPS connection.
When a website with HTTPS connection loads resource or content from HTTP connection, the resource can be a weak spot and can be exploited.
That’s why most of internet browsers that we use now will display a mixed content warning if we happened to access this kind of page.
Mixed Content Warning Example
This is a Mixed Content Page Example. This page has non-secure contents that are an image and a CSS file (it’s not dangerous). We’ll try to access this web page on a Chrome browser and see what the warning will look like.
We can see the mixed content warning on the right side of the address box. It is a shield icon with red x mark on it. If we click that icon, it’ll pop-up information box that says insecure content has been blocked. It means that the insecure content does not loaded on the page.
There is also an option to Load unsafe scripts. This way we can still load the non-secure content on the page.
Note: Display on another browsers may be different. But the bottom line of the warning display is basically the same.
There are two types of mixed content: passive mixed content and active mixed content. When we access the passive one, any content that are image, video or audio can still be displayed on the page. On the other hand, the active non-secure content like JS, CSS, iframe, flash, object or any kind of script will be blocked right away. This because active mixed content can manipulate a web page in a certain way.
Some browsers will give us option to unblock such content. The non-secure content will still be displayed or loaded. But it’s also mean we load them with our own risk.
If we opt-out to unblock the non-secure content, the browser will display another warning, says if the page is Not Secure.
How Does Mixed Content Affect SEO
In my opinion, mixed content does affect SEO in the way of it affects the user experience.
- The mixed content displayed on the browser my decrease user’s trust to the visited website.
- The important resource (even if it’s loaded from insecure connection) may change how the web page will be displayed and it can prevent the page to load a certain content to the users.
If users data is not secure, or if the users don’t get the content they looking for, or if they can not “consume” content like the way it’s supposed to be, then web page become not relevant to the users.
Search engine like Google may read this as signal to not rank that page on their top search results.
At the end of the day, search result position has direct effect on number of traffic, page views, ad views and also sales.
Note: According to this news, starting on December 2019, Chrome browser will gradually block all mixed content by default
How to Find Mixed Content on Our Website
To find mixed content, first we have to crawl our website. We scan all pages and all contents. Then we identified hich page has mixed content.
For me, there are two tools fit for this task.
1. Missing Padlock – SSL Checker (Free)
This tools spesifically built to find mixed content. Visit this site and put your URL on the provided entry box, then click Crawl My Site. This tool will crawl your site for a moment.
When it finished, we can see the result on the Active Mixed Content tab and Passive Mixed Content tab. It will tell you which page and which resource is the non-secure content.
2. Screaming Frog (Free and Paid)
Sceraming Frog is a general website crawling tool. This desktop application is familiar to lots of SEOs . You have to download it and install it on your computer if you want to use it. So it’s not like Missing Padlock which you access on web browser.
To show the crawl result on mixed content, first you open the Reports tab > Insecure Content.
The downloaded report is a worksheet/spreadsheet. You can see all pages that has mixed content. Unfortunately you have to manually check which resource is the non-secure content. You can check this with the Inspect page feature on your browser.
How to Fix Mixed Content
Mixed content issue can be fix with replacing all resource that loaded from HTTP connection to HTTPS connection. To put it simply, update all http:// resource link to https:// link. You have to be sure if the resource is available in https:// URL. Otherwise it wont work.
If the resource is not available on the https, you better not using that resource at all. Or you can move that resource to a secure website and then use the link.
For example, we have a CSS file that loaded from an HTTP connection like this:
<link rel="stylesheet" href="http://mikhailnasa.com/non-secure.css" type="text/css"/>
When we are sure we can load that file from the https URL, then we can change the http URL into https. Like this:
<link rel="stylesheet" href="https://mikhailnasa.com/non-secure.css" type="text/css"/>
If the resource doesn’t exist in https connection but we are still using the link, then there will be no resource loaded on the page.
True we have to handle all of this manually. We have to replace all the http resource on our website one-by-one. But I believe it will come to fruition in a lot of ways (not just for SEO) if we can provide better user experience.
Well, if you know how to do URL replacement in an automatic bulk way, I would love to hear it.