If you recently moved to HTTPS or you plan to do so, mixed content is something you’ll most likely have to deal with.
I’ve helped several clients move sites from HTTP to HTTPS in the last months. I thought I’d share what became my 6 favorite tools to quickly identify and fix mixed content issues.
Using them will save you a bunch of time and help you get your mixed content under control.
What is mixed content?
Mixed content happens when a HTML page is loaded over secure HTTPS and one or more resource (images, stylesheets, scripts) is loaded over insecure HTTP.
There are two types of mixed content…
Active mixed content: Usually JS scripts or CSS files that get blocked by browsers:
Passive mixed content: Images, video or audio files that the browser report as insecure but still load:
Why it matters?
Mixed content makes your site less secure, may break some of your site visual and functionalities, and negatively affect your SEO.
And now, the tools…
1. Chrome DevTools
Chrome DevTools is great to simultaneously see a page and its existing mixed content issues.
On any page, you can just right click and go to Inspect to open the console.
You'll see the mixed content counts on the upper right side (active in red and passive in yellow). Just click these notifications if the list of insecure links is not already visible below.
DevTools is great at a page level, but not the best tool to identify mixed content throughout an entire site.
Which lead us to the next tool…
2. Screaming Frog
One of my favorite SEO tools, Screaming Frog is great to identify insecure content on all pages.
You first need to run a crawl and then export Insecure Content from the Reports tab:
You now have a CSV file with all your site’s mixed content and related information that will help solve them faster.
Pages containing mixed content are listed under Source and the insecure content under Destination. I usually sort by destination and fix them in that order.
Now that you identified all insecure links, the next tools will help you fix them.
3. Search Replace DB by Interconnect IT
Search Replace DB is a great little script to mass replace URLs in WordPress databases. I use it to fix mixed content as well as updating internal URLs when migrating to HTTPS.
You’ll need FTP access to upload the script. Please be careful as it can break your site or get your site hacked if not used properly.
General safety instructions to use this script:
- Rename the script root folder so it’s not easily findable
- Backup your site & database before using
- Double check text and do a Dry Run before a Live Run
- Delete the script right after use
You can download the script here.
4. Velvet Blues Update URLs
If you don’t have FTP access or have trouble with the previous tool, the Velvet Blues plugin is a great alternative or complementary tool to switch remaining URLs to HTTPS.
It’s pretty easy to use, you’ll want to check all options except the ALL GUIDS as stated in red.
5. Better Search and Replace
Better Search and Replace is a plugin I have been using more lately. Like the name suggest, it’s been working better than other plugins like Velvet Blues in many cases.
This one lets you select tables, a great option for large database if you know which tables you want to address. The Case-Insensitive option is also really handy to include links with capital letters.
6. Sublime Text
The previous three tools help you fix links in your database, Sublime Text is a text editor that let’s you mass search and replace all files in a folder. In our case, all insecure links in your theme files.
First you’ll need to download your theme files via FTP (sometimes other folders too depending how your theme is built). In Sublime Text, open Find in Files… in the Find menu. Add your theme's folder in the Where field. You can then find and replace insecure link in all files:
Make sure you save (File > Save All), then upload updated files or the whole folder via FTP.
Bonus: Import External Images Plugin
I recently had a client with hundreds of externally hosted images throughout his site. Most of these did not load on HTTPS and therefore created mixed content.
Downloading and re-uploading each image individually would have taken hours. I was skeptical I’d find a quick fix but was pleasantly surprised when I tried Download External Images In Posts.
Just need to activate it and external images will “magically” get uploaded and images links switched to be served from your server. If your WordPress settings are HTTPS, all related mixed content will now be fixed.
That's it, I hope this helps. Do you have other tools to recommend or questions? Let me know in the comments.
Related article: SSL Certificate Options for SEO