Advertisements

HTTPS for Blogger Custom Domain: Mistakes You Can't Afford

Hello Blogger!

We have got great news. Blogger.com now has its custom free SSL certicate for custom domains.


Contents:

How to Enable Https for Blogger Custom Domain

Let's say you've got your custom domain working properly on blogger and all you want to do is enable https.

To setup https for blogger custom domain, follow the steps outlined:
  1. Go to draft.blogger.com
  2. Go to settings
  3. Turn on HTTPS Availability
  4. Turn on HTTPS Redirect
  5. Go to blogger.com
  6. Go to Settings
  7. Wait for Https to activate
  8. Reload page to see if it's done
  9. Set HTTPS Availability to Yes
  10. Turn on HTTPS Redirect

That's it! Your blogger blog is now on HTTPS.

To ensure that all redirects are working properly, make sure you add all A records - 4 in number.

If you are on Cloudflare, here is how to take your website off Cloudflare without messing things up.

If you cannot get a green padlock, try to fix mixed content or drop a comment below and we will help you sort it out.
Webmasters at howtoshout and bloggerguider have done a great job. All credit to them.

Why Your Website Needs https RIGHT NOW
When moving from a .blogspot.com URL to a custom domain, your Domain Authority (DA) drops back to zero. Yes! We had a DA of 90+ at electronicsdiaryy.blogspot.com but when we got a custom domain, we had to start building it from nothing - Zero.

Coming back to Google, if they have anything like DA, I bet that even if you have a custom domain already - one with http - when you get the SSL certificate - https - for that domain, your DA with Google will also drop to zero.

Custom domain https is good for rankings
Google made it clear that they have started using https as a ranking signal: they will start giving preference to websites with SSL certificates (https) on SERP.

According to Google; "security is a top priority." But some of the good websites without SSL certificates are still doing better on SERP anyway but we don't know how long before someone else with https kicks them out of that position.

Chrome will stamp "not secure" on http websites
Also, Chrome started showing the "not secure" warning January this year on websites with password and credit card input fields. 

But when I scrolled down to the comments session on the announcements page, I noticed that even websites without passwords and credit card input fields could also get the "not secure" stamp.

This could easily scare visitors and force them to leave the website immediately.
From July, Chrome will start putting the "not secure" tag on all websites using http.

Getting https for every bit of your website is tedious
Another very important reason is that moving to https does not just affect the 'parent' URLs. Once you move, to avoid mixed content error, you must integrate ‘https’ into every bit of your website: from links to sign up forms to javacripts to video and image URLs.

So the sad truth: if you do not start working on it now, you will have a ton of work to do when you finally decide to make the move.


Using Cloudflare's Free SSL Certificate For Blogger Custom Domain

Thinking of using Cloudflate's free SSL certificate (https) on your blogger custom domain? Not a bad choice actually but you must be sure it is okay for your blogger website and you must make the changes properly.

Otherwise you will succeed in getting a free SSL certificate from Cloudflare but you will also succeed in destroying your website.
 
blogger https precaution

We will point out a few things that will help you decide if you should really make use of Cloudflare's free SSL certificate. Yes, because that's what we used before blogger turned on https.

We will also show you how to enable https (hypertext transfer protocol secure) for you custom domain the right way.

The rate at which users are destroying their blogs in trying to activate Cloudflare https on their blogger website is quite alarming.

What’s the worst part? Most of them do not have any idea what they have done to their website. But don’t worry. 

We have used this feature for some time now and we will help you make use of it hassle free.

There are a few well-meaning websites out there who try to guide you on how to successfully make use of Cloudflare's free SSL certificate on your blogger third party URL (that is, custom domain). 

But then, there are also some very important things most of them have left out and some of those posts are simply outdated. I tried to contact them but got no reply.

Cloudflare CDN will make your web pages load faster
Apart from the free SSL certificate, Cloudflare CDN will also make your website load faster (especially for desktop). The same thing would have happened for mobile pages but the blogger mobile page redirect slows things down a bit.

Nevertheless, your mobile pagespeed increases significantly after few weeks of using Cloudflare.

Pagespeed on mobile devices will be used in ranking from July, Cloudflare can help you rank better as it reduces page load time. Cloudflare will also protect your website from attack.

Now if you decide the make the move - which is a good decision - there are some mistakes you cannot afford to  make and there are some things you must not miss out when implementing the SSL certificate on your custom domain. 

Everything will be addressed as we take you through the process.

Before you even start
Make sure your custom domain is set up on blogger and is fully functional. 
 
If you are not sure how to set up custom domain for your blogger site, ask your domain name provider: Namecheap, Godaddy, Hostgator, which ever company you chose. 

The Problem With Using Cloudflare's Free SSL
Every redirect from your hosted URL to the new one (the custom domain with cloudflare https) will not work: your new custom domain will be working fine with https but you will not be able to get a redirect from your blogger hosted URL to your new custom domain. 

Once you hit this snag, if you do not revert to blogger custom domain https, all your pages on search engine will lose their place and every single backlink you have will become useless.

* If your website depends heavily on links from your .blogspot.com URL, You should not use this method to get SSL certificate because you will not be able to redirect your blogger hosted URL to your custom URL. 

When you try to load the former blogspot address, you will find something similar to what you have in the image below. 

This blog is not hosted by Blogger


So, if your custom domain is in place, let's see how to implement Cloudflare free SSL certificate.

The process is simple!


How to implement CloudFlare free SSL Certificate on Blogger
  • To start, sign up on Cloudflare by visiting cloudflare.com
  • Next; add your website and scan DNS Records
  • Once the scan is complete, click continue
Next step is crucial

On the next page, you will find your DNS records and cloudflare will ask you to confirm them. Delete and record that does not make meaning to you. Add the ones needed by google for the redirect and your email Forwarding Records if you have any.

Cloudflare panel DNS for blogger

Next; Select your plan. You can decide to go pro or simply select the free plan.

Select plan, Fill out the required contact information and click on continue.

The next page gives you the Nameserver settings. Make changes - I mean replace - to your current domain name registrar's nameservers ( Namecheap, godaddy, hostgator or any you are using).

When you are done with this, click continue on Cloudflare. 

Changes may take some time - about 24 hours or 48 hours or as little as 5 minutes - to propagate.  Make sure the nameservers are correctly changed and click on recheck Availability.

If the settings are correct but nameserver is still inactive, leave it alone, wait around for some time - few minutes - and then come back to it.

Note: While you wait for nameserver changes to propagate, your website will still be working well. Throughout this process of enabling SSl certificate (https), your website will still be functioning properly.

Once your site (status) is active on cloud flare, you can now enable the SSL certificate.
  • Locate the crypto tab and click on it
  • Change settings to Flexible. If it's there already, leave it alone,  you are good to go.
  • Next go to Page Rule tab
  • Click on "Create Page Rule" to create
  • Click on Add a setting and Select Always Use HTTPS 
  • Click on Save and Deploy
google Blogger https


Replace electronicsdiary.com with your website URL. The Next will be to set up 301 redirect for your URL. 

Now you should have 2 page rules left.

  • Click On Add page Rule
  • Enter URL as shown in the image below

301 permanet redirect on cloudflare

  • Click on Add a setting; click on pick a setting
  • Select URL forwarding
  • At status code, use 301- permanent redirect.
  • Add third page rule as shown below

third page rule for blogger

  • Locate the Firewall tab at Cloud flare
  •  Scroll down to security level and set it low
Once you are done, with the three page rules, your website will start redirecting to Https. If you are thinking about making use of your pillow, there is something very important you need to do before you decide to rest.

*Add a canonical link tag to blogger html
*If you are using blogger default template, then you need to set page title and description
*Irrespective of the template source, check and make sure you have the tags for page title and page description

Firstly, to add a canonical link;
  • Goto Blogger dashboard
  • Goto Theme
  • Select Edit HTML
  • Look for the code below 
(To find code, copy the code. In blogger html, press crtl+F on your keyboard, paste it in the search bar that appears and hit Enter)


<b:include data='blog' name='all-head-content'/>

Once you find the code, replace it with the one below
 
<link expr:href='data:blog.canonicalUrl.https' rel='canonical'/>
<meta content='width=1100' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='https://www.mywebsite.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.homepageUrl.https' rel='canonicalHomepageUrl'/>
<link rel="alternate" type="application/atom+xml" title="Website Title - Atom" href="https://www.mywebsite.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Website Title - RSS" href="https://www.mywebsite.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Website Title - Atom" href="https://www.blogger.com/feeds/BLOGID/posts/default" />
<link rel="openid.server" href="https://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="https://www.mywebsite.com/" />
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/35781802-ieretrofit.js"></script>
<![endif]-->
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta  expr:content='data:blog.url.https' property='og:url'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Be sure to replace mywebsite with the  URL of your website and Website Title with the title of your website. Replace BlogID with your blogger blog ID.

Next, Search for the code below

<title><data:blog.title/></title>

Replace it with the one below

<title>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
            <data:blog.pageTitle/>
        <b:else/>
            <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
                <data:blog.pageName/> - <data:blog.title/>
            <b:else/>
                ERROR 404 - <data:blog.title/>
            </b:if>
        </b:if>
    </title>


Next; edit your robot.txt
  • Goto Blogger Dashboard
  • Goto Settings
  • Goto Search preferences
  • Under Crawlers and indexing, Edit Custom robot.txt
  • If there is a code, replace it with the one below
User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.mywebsite.com/atom.xml?redirect=false&start-index=1&max-results=500

Replace mywebsite.com with your custom domain URL.

If you use Google Search Console too, Head over there and update your robot.txt with the code above. Alright now if you need to rest, you can do so now and pick it up later.

You have successfully (and safely) enabled https for your blogger custom domain and you won't have any problems with search engines now. 

Fix "mixed content error"
The next thing you want to do is to fix mixed content error. Even when you have set up https for your website, some part of your website may still be using http: this is what brings up the mixed content errors. So what you want to do now is to change those http links to https.

Mixed content error may arise from image URLs or javascript links. 

If you are having this mixed content issue:

  • Open your Google Chrome Browser
  • Load your website
  • Press ctrl+shift+J

Once you do that, a window will appear on the right hand side of the browser with information about your website’s mixed content. From there you can fix them or drop a comment below to get help.

Next, make the links on your popular post widget use https. Even if the links on your homepage, labels and popular post widgets do not give mixed content error, you may still want to make them use https links. (Ignore this if you are using blogger.com https!)
 
To implement this:
Go to Blogger html
Search for popular-posts
In the content, look for the code below

<a expr:href='data:post.href'>

Add .https to href
The result will be the code below

<a expr:href='data:post.href.https'>

If you find the code twice, add .https to both of them. Save template, reload your website and you will see that the links on your popular post widget will now be using .https

If you have an understanding of what is going on, you can use this same method to make your labels and homepage links https enabled. Check out our homepage and labels and you will see what I mean.

Also if you have an active account with Google AdSense, head over there and make sure the URLs are properly set. See the AdSense Guide for HTTPS Websites.

Also, head over to Analytics and other outside resources and correct the URLs.

It may have been long but for things like this, there is just no way out of it. So after the set up is complete, it is advisable to watch your website closely for few weeks to make sure everything is fine.

Alright, that's it! Drop a comment below. Share this post with friends.

21 comments:

  1. Message translated by Google Translate:

    Hello, I was doing the steps you indicate in this tutorial, but it tells me that it is not safe, that is, I do not get the green padlock, I do not know what I did wrong, can you give me some idea of how to solve this?

    ReplyDelete
    Replies
    1. Hello Duvan, sorry for the late reply. If I'm correct, you are saying you got the padlock - you have enabled https - but the padlock is not green. If that is the case then you have mixed content error. The next thing you want to do is to fix mixed content error. However, give me the website URL so I can see what actually went wrong.

      Delete
    2. I think I have managed to solve the issue of the lock, what bothers me now is that there comes a time where a message comes out saying "you can not connect to the website" and it bothers me because I handle social traffic and I'm not going to lose that traffic because of cloudflare, can you help it to not continue happening at least not so often?

      Blog Significado de los sueños

      Delete
    3. I visited your website; I also performed a lookup for your URL. Everything is fine. However I must ask: When did you complete the setup? Cloudflare only gives such messages when there is a mistake (and from your comment, I think you made a mistake somewhere). But few minutes after you fix it, everything goes back to normal. Your website is okay. Everything is fine now.

      Delete
    4. The configuration I did yesterday, I hope then that you do not keep showing me the message

      Delete
  2. hello, i followed your instructions, now my blog ranking is dying. The search structure of my blog is no more.[ie if i search my domain name, it will not arrange in google search as in Home, about, contact here is the blog Goodiestech.com

    ReplyDelete
    Replies
    1. They will arrange themselves with time. Everything seems to be fine but your template should be checked. Check page title code. Use the the code in the article to correct it. Your title is too long. Apart from that, everything is fine and any minor changes would be from google as they crawl your pages, all those pages will be rearranged in few hours but low traffic pages like contact or peivacy policy may take few days.

      Delete
  3. I don't know what i did wrong, the https appears but the padlock isn't visible,instead there is still the Exclamation mark with the warning. What is the mistake, Please help me.
    www.xpertofficial.com

    ReplyDelete
    Replies
    1. Hello Andrew, good to hear from you. I'm sorry this reply took while - because it is a special weekend.

      What you are dealing with is called mixed content. All the outgoing links on your site are on http, as well as your image links. Try to load your http links as https and see if they work. If they work, change the outgoing links, image links to https and you will get a green padlock. This post also covers how to fix mixed content. Please scroll back up and read about it.

      Delete
  4. I got what you meant here. Thanks for the tips. About cloudflare, shall I use cloudflare cloud on?

    ReplyDelete
    Replies
    1. The word cloud could mean a lot of things. If it's the grey/orange cloud on the items in Cloudflare's website DNS, you need to grey cloud (turn them off) for blogger https to work. PLease reply so I can be sure I'm giving the right and complete reply.

      Delete
    2. Yes that's correct. It's the grey orange cloud that I turned off.

      Delete
    3. Okay VK,
      you need to turn them off for blogger https to work, and for your 'websitename.blogspot.com' (hosted URL) to redirect to custom domain properly. Turn off the A-records and the two 'ghs' Cname records (that is, grey cloud them).

      (If you grey cloud those settings, you should be able to enable blogger https while your site is still on Cloudflare.) Yeah, since you said you are "happy" to let your site remain on cCloudflare.

      But if you want to take your site off Cloudflare (I recommend this), follow the guide on how to take your website off cloudflare.

      Delete
    4. Ok that's perfect. I'll have a look at how it goes for now and decide to leave cloudflare or not. As I said cloudflare is super easy for dns management. My name registry company is local one so it's not that practical.

      Delete
    5. hi iam cloufalre. my website have mix content, i stil cantot solve www.technicalsantosh.com

      Delete
    6. Hello Technical Santosh, sorry about the late reply.

      Here is what we found while checking for mixed content using the google chrome browser:

      "The page at 'https://www.technicalsantosh.com/' was loaded over a secure connection, but contains a form that targets an insecure endpoint 'http://www.technicalsantosh.com/search'. This endpoint should be made available over a secure connection."

      To solve this, Head to Blogger Dashboard;
      Go to Theme;
      Open Html Editor;
      Search for the code below
      form expr:action='data:blog.searchUrl'
      Replace it with the one below
      form expr:action='data:blog.searchUrl.https'

      Delete
    7. hello i am go to html editor and search expr:action='data:blog.searchUrl'

      but couldn't find it.

      Delete
    8. Okay Santosh. Look for the following codes and replace them.

      1) Replace
      data:blog.canonicalUrl
      with
      data:blog.canonicalUrl.https

      2) Replace
      data:blog.homepageUrl
      with
      data:blog.homepageUrl.https

      3) Replace
      data:blog.Url
      with
      data:blog.Url.https

      However, using Blogger's custom domain https can save you from all that stress.

      But like Veysel Keyles, you may have a reason for wanting to remain on Cloudflare.
      Let me know how it goes.

      Delete
    9. thank you i tried as you say,, mix content problem is decrease,, but
      still no pad lock

      Delete
    10. I see you are doing a great job. Some links (for example og:url) are still on http. But that should not trigger mixed content.

      It is the navbar that's causing the mixed content. Here is how to fix it.

      Download your theme:
      Go to theme;
      select Backup/restore;
      Select Download Theme;
      Save it with specific name.

      Once you have saved the theme, revert your template to blogger's Simple template.

      After REverting,
      Go to Layout (on your blogger dashboard)
      Edit the Navbar: Set it to "Off"

      Go back to Theme and reupload the theme you downloaded. That will remove the navbar and the mixed content issue.

      Also, once you are done, go to theme, select the gear icon under mobile and change mobile theme from "Yes. Show..." to "No. Show..."

      Again, I noticed some other issue on your website. If you try to load your website on https://technicalsantosh.com, It won't load.
      This means your site will only do well when the www is included - not the best. Try to set your Page Rules properly on Cloudflare to remove this error.

      Delete
  5. Domain hosting wiki: for bloggers, business owners and webmasters looking for starting, maintaining and knowing more about domains and hosting
    startups and any you find on website articles

    ReplyDelete