How To Enable HTTPS For Your Blogger/Blogspot Blog

If you’d notice, my blog loads on https (with the green lock icon in the address bar). I have recently implemented that when I re-launched this blog. This is due to Google’s announcement in August 2014 that HTTPS will be recognized as a ranking signal. Okay, I said I’d like to help Google so this is another way of helping out: making the internet safer. But, more importantly, what I really want is to make my site more “appealing” to Google Search’s “eyes” (better search engine ranking).

What is HTTPS?

HTTPS (HTTP over TLS, HTTP over SSL, and HTTP Secure) is a protocol which ensures that any information a site visitor sends to a webpage (ie a form, sign-in, etc) is encrypted/secured, so no one could “eavesdrop” and know what those information are. 
If you have a contact form on your site, or you have a  online storefront, you don’t want just about anyone “listening” to and capturing what your site visitors/buyers are sending over, right? This is where HTTPS (or HTTP over Transfer Layer Security)  comes in.

Why do I think you need it? Just think of the situation like this:

HTTP: You and a very close friend are talking about some seriously confidential stuff while inside a locked room. But somehow, a chismosa (a gossip monger) was right outside the door, listening to whatever you’ve been talking about. The locked door didn’t prevent her from listening, right? This happens in the case of HTTP. There’s nothing that could protect confidential information, even a locked door.
HTTPS:  You and your friend are discussing highly classified information and you’re inside a sound-proofed room. Also, there’s another feature of the room which makes everything you say sound all gobbledygook, so anything you and your friend say is unintelligible. That’s what secure is, right? This is how HTTPS works.

But I don’t sell or collect anything on my blog. What’s this all about then?

If you are a blogger who’s been using Blogger/Blogspot (from Google) and concerned about Google’s announcement about HTTPS being a ranking signal affecting your blog’s search engine ranking, this might just be the solution you need.

While there is a built-in HTTPS feature (in Settings>Basic), it only works for blogs using the blogspot.com addresses. If you’re using a custom domain name on your blog, but would like to implement HTTPS/SSL, I’ll show you how it is done. First off, for the benefit of those who are not using HTTPS yet for their Blogger/Blogspot blogs, you can turn SSL on by following these steps:

HTTPS on Blogger

  1. Log in to your Blogger account and go to Settings>Basic on the sidebar panel.
  2. Scroll to the “HTTPS (HTTPS Redirect)” section, click the drop-down, and select “Yes“.
Now that you have enabled the HTTPS option, your blog address ie http://example.blogspot.com will be served on browsers in https ie https://example.blogspot.com.

For Blogger blogs using custom domains, follow these steps:

What you need:
  • Your domain registrar’s DNS panel
  • CloudFlare account
Warning: Use this at your own risk!

Steps: Adding Your Domain to CloudFlare

1. Login to your CloudFlare account and add your domain to it.

Point domain to CloudFlare DNS
2. Wait for the scan to complete and click “Continue Setup”.

3. The DNS records that you have previously set up in your domain registrar panel would be “imported” over to CloudFlare.

4. Make sure that the DNS records that connect your domain to your blog are activated via CloudFlare’s CDN (Content Delivery Network) — read: orange cloud. Click the cloud to turn the CDN on. In my domain’s case, I only have the “www” CNAME pointing to Google’s server for Blogger, and the root is using the registrar”s default IP.

Activate domain on CloudFlare CDN (Orange cloud)

Note: The cloud/CDN needs to be enabled so the traffic would pass through CloudFlare’s servers, and the SSL to be applied.

5. On the next screen, tick the “Free Website” radio button and hit “Continue”. —

While on a self-hosted blog such as WordPress sites, it requires the website owner to purchase, sign, and upload the SSL certificate into the hosting provider’s servers; this functionality is not available with Blogger so we’re using the free SSL solution from CloudFlare which does not require signing and uploading to servers.

6. Copy the nameservers provided by CloudFlare and change your domain’s current nameservers to CloudFlare’s. Note: Please be cautious about changing nameservers; if you have custom domain emails, the emails may stop working until the new nameservers are fully set up.

7.  Expect a delay (around a few minutes up to several hours) before the domain becomes active in CloudFlare. Now that the domain’s added to CloudFlare, we’ll need to edit some settings in there to see that secure badge for your blog. See the following steps:

Activating SSL in CloudFlare

1. Head on to the “Crypto” menu and select “Flexible”.

2. Go to the “Page Rules” at the top menu, then click the “Create Page Rule” button.  A dialog box will come up, where you’ll set the rule up. In the URL field, type in your domain in this form: http://www.yourdomain.com/*.

On the “Pick a setting” drop-down menu, select “Always Use HTTPS”. Then click the “Save and Deploy” button.

3. Awesome! You’re all set. All you need to do now is wait for the new settings to fully take effect (could last up to 48 hours). During this period, you may experience security errors when you try to access your blog using https as the SSL and DNS setting are saving in multiple locations across the globe (WTH am I saying? hahaha). Just, wait and be patient.

*Clearing your browser’s cache and cookies could also do the trick. Good luck and cheers to a secure   (and hopefully, high-ranking) blog!

Note: I tried this on Tumblr (yeah, like it’s not enough having just one blog), but it looks like Tumblr has it’s own CDN so it conflicts with that of CloudFlare’s. Thus, error messages show up and CloudFlare SSL doen’t work at all.

Send in any feedback about the setup if you have any!

Related Links: