Watch out for mixed-content warnings on SSL-sites

Lately, I have been performing a number of SEO Audits for clients. One category of issues that I see very frequent these days is SSL-related issues. Probably because of the availability of cheap and free SSL certificates (Let's Encrypt), everybody seems to be installing them just like that. However, you should carefully plan this. Otherwise, you are doing just as bad as you previously were....

 The errors I see are basically 2-fold:

  1. Simply installing an SSL certificate without enforcing SSL-access
  2. Installing and enforcing SSL-access and then think you are ready

Let's take a quick look at both issues.

Enforce SSL

This one is really a no-brainer if you read my blog. If you only install the certificate, but you don't enforce SSL-access, your site available both with and without SSL: and First of all this creates duplicate content, as every URL is available in 2 versions and secondly, it does not enforce the secure access you want, everybody can simply choose which version to access in the browser. The solution is simple: enforce SSL-access in the Joomla Global Configuration (also see my blogpost about this):

global configuration ssl

Avoid Mixed-Content warnings in your browser

Most people get it righgt sofar. Then they do a quick check on their homepage and if they see a nice green padlock in their browser, they think they are ready. However, in the majority of cases, this is not the case, especially in older websites. The big issue is that if you access a website over SSL, all resources the page loads should also be SSL. Now with most resources, this is probably fine. The majority of images, CSS and Javascript files are loaded with a path relative to the main (https) URL: no problem.

logo 500

The problem starts with hardcoded resources. As an example: if you ever inserted an image with a hardcoded path and this was an http-path, this will cause you problems, regardless whether you load the image from your own domain or an external domain. First of all, your browser no longer shows the green padlock:

unsafe browsing

 Even more, when you try to fill in a form on a page like this, browser-warnings become even more severe. So, obviously all this should be avoided.

Causes for Mixed-Content

Next to the mentioned hardcoded images, there are a number of other issues that I often see:

  • Embedded video's from Youtube. Until a few years ago, youtube embedded video's were served from http, so the old -embed code is insecure. You can easilyy fix this: simply change http to https, everything will remain functioning correctly. Basically, this counts for all embed- and iframe snippets.
  • Bad templates pulling hardcoded resources. This can even be local resources, but more often it concerns http-references to Google Webfonts or remote Jquery libraries. You will have to update the template to use https-references.
  • Crappy form extensions: I have seen some forms that pull in local Javascript validation files over http. This is something that you will have to ask the developer for.
  • Scripts to load ads or tracking scripts.
  • There are more exotic issues I sometimes see, but these are the most frequent.

How to find all of these issues

Finding all of these problems is often the hardest bit. If you have a small site of no more than a few dozen pages, it is easy enough: simply browse all pages and keep an eye on the green browser padlock. However, this is undoable if your site has a few hundred pages or more. Happily, there are some tools to help you with this, and they are often free to use:

Screaming Frog SEO Spider

I have mentioned this tool many times on my blog. It scans your site for many SEO issues. A little bit hidden, under the Reports section, you find an option to check for SSL-pages with insecure content:

insecure content screaming frog

It will produce a CSV-file with all erroneous URL's. This tool is free to use for sites up to 500 URL's and you can download it here.

Website Auditor by SEO Powersuite

I use this tool myself. It offers similar functionality as Screaming Frog, but the interface is a little more friendly and easier to use. Also, it displays all URL's with insecure content without having to download a CSV file. It is listed directly under HTTPS pages with mixed content issues:

website auditor

This is a very easy way to find all pages with issues. The tool is free to use if you don't want to save your projects, otherwise it's a relatively cheap one-off fee. You can download it here (note that the suite contains 4 tools, of which the website auditor is one).

So now you have the list of pages with insecure content. Next, you will have to check which insecure item there is to fix on these URL's. This is pretty straight-forward: browse the URL and open up your Chrome inspector. It will immediately scream the issue at you:

chrome inspector

Now that you see the issue in front of you, simply correct the resource and load it secure. With a bit of luck you only have a few of these issues. And once fixed, you are good to go, all secure and well: it keeps Google happy...

I must admit I sometimes use a Quick & Dirty technique when I have too many of these issues. It is not always applicable, but I sometimes have great results with the Regularlabs tools DBreplacer and Rereplacer. They both give you very sophisticated search and replace functionality. Use them wisely though: simpley replacing every occurrence of http with https might be too much and good damage your site and SEO. If you use it very specific, you can have nice results very quickly. Say hat I have many images with hardcoded http-paths. Most probably they all share the following path in Joomla: In such a case, you can use as your search string and as your replace string.

About this site is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.