Https Mixed Content Errors And How To Fix Them

Recently I ran an audit on my website https://hangtenseo.com and came across a bunch of errors pertaining to Https Mixed Content.

To be honest I wasn’t exactly sure what Mixed Content Errors were, so I Googled it.  Turns out it means that if your website is running with a secure socket (HTTPS) and any elements on a page are not using HTTPS, it could lead to security issues.

Moreover, browsers will warn users about loading un-secure content, and this may negatively affect the user’s experience and reduce their confidence in your website.

OK so hopefully I haven’t lost you.  In layman’s terms it usually means that the website is referencing URLs that are “http” instead of “https”.  Most notably this usually means the website is referencing images from another site that isn’t https.

In WordPress you can post an image by referencing it’s URL.  If that URL is http instead of https, that would cause a mixed content error.

How To Fix Https Mixed Content Errors

Obviously you need to know you have mixed content errors before you can fix them.  One way is simply look at the address bar, like in the image above.  If you have an issue, it will show a warning message next to your URL.

A better and more thorough way is to use an website audit program.   I use a program called SEMRush to run Audits on websites.  As part of the Audit, SEMRush checks the site for Mixed Content errors.  As you can see below, my website had a host of Mixed Content errors.

By doing the audit I discovered another problem.  Many of the URLs were referencing “http://hangten2.wpengine.com” instead of “https://hangtenseo.com”.   That would certainly cause a Mixed Content Error.

When transferring HangTenSEO’s website from Godaddy to WPEngine, some of the URLs were changed to the WPEngine’s URL scheme and had not properly been renamed to “https://hangtenseo.com” once the site went live.

I am not sure what caused these issues, but I didn’t realize it had occurred until I ran the Audit.

Fix Incorrect URLs

To fix the incorrect URL issues, I used a plugin called Better Search Replace.  The plugin allowed me to rename any occurrences of “http://hangten2.wpengine.com” with “https://hangtenseo.com”.

After running the Search and Replace my Mixed Content Errors were reduced from 260 to 11.  Now we’re talking.

As you can see the remaining errors pertain to images and iframes.  To fix the image issues I can save the images, upload them to my server and then repost them with the proper https designation.  The iframes might be a little more tricky, but the same principle applies.

Once all the pages are fixed, when you load your website you should get a secure connection with a green lock.

FIXING AdSense Ad Code To Support SSL | Mix Content Errors

AdSense ad code supports secure ad serving through Secure Sockets Layer (SSL) on all pages, including Hypertext Transfer Protocol Secure (HTTPS) pages. This means that publishers with secure sites, i.e., sites that are served over the HTTPS protocol, can use AdSense ad code to serve SSL-compliant ads. All sites should be secured with HTTPS — HTTPS provides critical security and data integrity both for your sites and for the people who entrust your sites with their personal information.

Some important things to know about the SSL-compatible ad code:

HTTPS-enabled sites require that all content on the page, including the ads, be SSL-compliant. For most users, AdSense ad requests are always SSL-compliant and always served over HTTPS, even when the surrounding site is HTTP. The same ads compete in the auction, so switching your site to HTTPS will have no effect on the ads most users see, or on auction pressure. The only exception is for users located in countries that block or otherwise degrade HTTPS traffic.

How Fix Google SSL-compatible ad code

If your site can be accessed over HTTPS, then you may need to update older versions of AdSense ad code to avoid the AdSense script being blocked as mixed content. If your AdSense ad code has a script starting with “http://”, then you should update it to “https://” instead:

<script src=”https://pagead2.googlesyndication.com/pagead/show_ads.js“>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js“>

Note: The SSL-compatible ad code also works on HTTP sites and doesn’t change how ads are served on these sites.

<script>
google_ad_client=“ca-pub-xxxxxxxxxxxxxx”;
google_ad_slot=“yyyyyyyyyyy”;
google_ad_width=300;
google_ad_height=250;
</script>
<script src=”https://pagead2.googlesyndication.com/pagead/show_ads.js“></script>
Asynchronous ad code
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js“></script>
<ins class=”adsbygoogle”
style=”display:inline-block;width:300px;height:250px”
data-ad-client=”ca-pub-xxxxxxxxxxxxxx”
data-ad-slot=”yyyyyyyyyyy”>
</ins>
<script>
(adsbygoogle=window.adsbygoogle || []).push({});
</script>