May 6, 2018

How to Turn on HTTPS for Blogger Blog with Custom Domain

Updated 24 Jun 2018 - Bonus tip for setting up non-www to www redirection

Google has been offering HTTPS for subdomains under blogger (e.g. https://techrantz.blogspot.com). As for custom domains, for sometime, the only available methods were either to use alternative means like Cloudflare or an unannounced method involving Blogger in Draft mode. These methods, while working, were not so ideal. 

It took a while, but Google has now finally and properly extended HTTPS to blogger websites using custom domains too.


To turn on, simply go to Settings > Basic. Look for the "HTTPS" section, there will be two settings as shown below.



Picture showing where to turn on HTTPS for custom domains in blogger websites
Turning on HTTPS for custom domains in blogger websites

Both settings should be quite self explanatory with the descriptions provided and will be set to "No" initially. 


Start by turning on the setting "HTTPS availability". This should result in a message being displayed "HTTPS Availability is being processed. Try again later." Don't panic. What this means is just Blogger processing the request backend. Give it about 10 to 20 minutes before refreshing and the message should no longer be there. 





You can now also turn on the setting "HTTPS redirect" if you want to enforce HTTPS, which is highly recommended anyway.


After this, it is time to check for any issues on your website. Start by confirming that HTTPS is indeed loading. In your browser, you should see the "Secure" lock and https in the address like below.



Photo showing secure lock displayed in browser after turning on HTTPS for custom domain
Secure lock displayed in browser after turning on HTTPS for custom domain

Next, check the website for any Mixed Content errors, like the one below. If you are using Chrome, you can use the Developer Console (Ctrl-Shift-J) to check. 



Photo showing an example of Mixed Content error after turning on HTTPS for custom domain
Mixed Content after turning on HTTPS for custom domain

For most cases involving image and video links to external websites, you can simply change the address from HTTP to HTTPS. 


If you still see any Mixed Content errors, it could be a site wide link in the template. Simply go to the template (Theme > Edit HTML) and change any HTTP to HTTPS. You can also refer to the Google Page for other suggested Mixed Content fixes


If you are using Google Search Console, remember to add a new property for the https version of your website, as the Search Console treats http and https separately.


The only issue I have discovered so far is the Mixed Content error message in the screenshot above for http://img1.blogblog.com/img/anon36.png does not seem to be solvable directly, as it is embedded within https://www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js and called by the blogger template. Not sure if a change in template will resolve. Something that I will have to test separately.


Bonus Tip: How to redirect from non-www to www


If you want to redirect the non-www version of your domain to the www (i.e. redirect from http://techrantz.com to http://www.techrantz.com), follow these steps:



  1. Go to Blogger website (Settings > Basic > Publishing > Blog Address). 
  2. Click on "Edit" beside your domain name.

    Photo showing where to turn on www redirection
    To turn on www redirection, go to Publishing > Blog Address, click on "Edit"

  3. In the expanded section, check the box for "Redirect <domain>.com to www.<domain>.com" like the photo below. 
  4. Click on the Save button.

Photo showing where to turn on www redirection and error message "You have not been authorized to use this domain. Please follow the settings"
Error message when turning on www redirection "You have not been authorized to use this domain. Please follow the settings"

If you encounter the error message "You have not been authorised to use this domain. Please follow the settings instructions.", then take note of the two CNAME records as above. The first line for ghs.google.com will be standard, while the second line item will be unique to your blog.





You have to setup these CNAME records in your domain name registrar. There are some standard steps provided for some common registrars here. If you use Namecheap like me, which is not listed, then follow these steps:



  1. Login to your Namecheap account.
  2. In the Dashboard page, look for your domain and click on the Manage button.
  3. Go to Advanced DNS > Host Records. Remove any CNAME records there and add the following. You may need to add one CNAME record first before you can remove the old entries.
  • CNAME Record (Host: www, Value: ghs.google.com, TTL: 30 min)
  • CNAME Record (the unique CNAME record for your blog, TTL: 30min)
  • A Record (Host: @, Value: 216.239.32.21, TTL: Automatic)
  • A Record (Host: @, Value: 216.239.34.21, TTL: Automatic)
  • A Record (Host: @, Value: 216.239.36.21, TTL: Automatic)
  • A Record (Host: @, Value: 216.239.38.21, TTL: Automatic)


Photo showing the DNS settings for Google to enable in Namecheap to enable www-redirection in Blogger
Google Blogger DNS settings in Namecheap

With the above done, now it's back to Blogger.



  1. If you have set "HTTPS availability" and "HTTPS redirect" (Settings > Basic > HTTPS), put back to "No" first.
  2. If you have set up a custom domain for your blog (Publishing > Blog Address), click the cross button beside your domain name to remove it first. Otherwise go to next step.
  3. Click on "Set up a third-party URL for your blog"

    Photo showing how to setup custom domain in Blogger
    How to setup your custom domain in Blogger and enable www redirect

  4. Type in the domain domain, check the box for redirect, and save.
It should now save without the error message. You can now turn back on HTTPS availability and HTTPS redirect once more.




No comments:

Post a Comment