How to Remove Blogger's Render Blocking Comment JS

Page speed is important for user experience and how they eventually engage with a site's content. It's also said that it's an (or going to be) a ranking factor. With this in mind, it's important to optimize one's blog for faster loading.

With Blogger one has limited control over what they can optimize. Still, that's not to say there is nothing one can do. A quick test of your blog with Google's PageSpeed Insight and other tools such as GTMetrix and Varvy can give you insights on what may be slowing down your blog.

One common problem with Blogger sites as reported by the PageSpeed tool are Render Blocking Scripts. These external scripts delay the rendering of your webpage as they get loaded especially on mobile sites. One such script in Blogger is the Comment Iframe Script (comment_from_post_iframe.js) that loads the default comment form.



The Render Blocking Comment Iframe

render blocking comment js
Render Blocking Comment Form JavaScript

Pagespeed recommends one either defer or load render blocking scripts asynchronously. In the case of the latter, this resolves this issue with little difficulty as you only need to add "async" to the affected scripts. For example:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

That little piece of code will work with most external scripts that you may have in your Blogger Template. With the Comment Iframe Script however, things are a bit complicated since the script is not called in the usual way as shown in the example above.

If you check your template's you may instead notice the following line of code:
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
</script>
This code is what calls the script (xxxxx-comment_from_post_iframe.js) from Blogger's servers. This is done synchronously however adding the "async" tag to the script in this case won't work.


Removing the Render Blocking Comment Iframe

Since we cannot load the script asynchronously an alternative means would be to include the script right in the template, that is, make the script inline. To do that we need to obtain the script's code in its entirety and replace the "calling script" above with it.

Step 1: Get the JavaScript Code

The script is loaded from the following location:
https://www.blogger.com/static/v1/jsbin/xxxxxxxxxx-comment_from_post_iframe.js

The xxxxx part is a unique token that's generated from one's account. You can find the specific token by looking at the source of your blog in your browser.

To do that on Firefox or Chrome, press CTRL+U then search for:  
https://www.blogger.com/static/v1/jsbin/

You should find the code in multiple instances. Copy the series of numbers just before -comment_from_post_iframe.js then complete your link so that it looks something like this with the token added:
https://www.blogger.com/static/v1/jsbin/1234567890-comment_from_post_iframe.js

Copy this link in your browser's address bar and load it.

A piece of code should be loaded (it's quite long hence my reservations of posting it here and the reason for the above steps). Copy the code as it is and save it somewhere.



Step 2: Make the Script Inline

  • TIP: Consider backing up your template before doing the next steps.
Next enclose the code in a script with:
// <! [CDATA [
SCRIPT CODE HERE
 //]]> </ script>
So that it looks something like this (only the start and end of the code is shown.):
// <! [CDATA [
(function(){var e="function" ...
... .call(this);
 //]]> </ script>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);


Step 3:  Add the Script to your Blogger Template

Open your template in an editor or within Blogger and find the following line:
<data:post.cmtfpIframe/>
Delete that line and replace it with the script we have just made. Save your template and that's it.

Now go test your blog again in Varvy or PageSpeed and you shouldn't get the render blocking warning from this particular script. If you have any other render blocking scripts make sure to load them asynchronously as shown earlier. Cheers!

How to Import Blogger Comments into Disqus

The Blogger comment system is usually sufficient for most bloggers. It offers different location options for the comment box, comment moderation, email notifications and even supports Google+ comments. However, the system is not without its shortcomings and this often prompts some bloggers to consider switching to alternative comment systems.

In particular, is the impact the system has on page load speed. Google's own PageSpeed tool even recommends to eliminate the comment system's render blocking JavaScript/CSS resources. For other's it bugs such as the recent failure in the delivery of comment email notifications which lasted for few months before getting fixed.



Configure Disqus to Import Blogger Comments

blogger to disqus comments
Import Blogger Comments in Disqus

The most common alternative comment system for Blogger users is usually Disqus. The disqus comment system can be installed in Blogger either manually or easily without the need of editing one's template code using the Disqus gadget. Likewise, Disqus allows Blogger users to import existing comments from the Blogger Comment System easy and quick.

This assumes that you've already installed the Disqus Comment System.

Steps

1. Log in to your Disqus account then go the Admin page.

2. On the top navigation bar, select the Community option.

3. Inside the Community page, go to the sidebar and select the Import option that's below the TOOLS category.
import option
Import Option

4. In the Import comments into Disqus page switch to the Blogger option.
  • Note: If you've multiple sites under your Disqus account, make sure to switch to the intended one at the top right of the page before proceeding.
switch sites
Select the Correct Site

5. Next to One-time Import click the Import comments from Blogger button.
blogger category in disqus
Switch to Blogger and Import

6. A pop up window will open prompting you to Sign in into your Gmail Account. If you've multiple Google Accounts, make sure to sign into the one that owns your Blogger blog.
choose google account
Choose Google Account

7. Once you're logged in, you'll be prompted to select your Blogger blog. If you've multiple blogs under that account, they will all be listed.
select blog to import comments
Select Blog to Import From
8. Select the target blog then leave Disqus to complete the importing.
comments synced
Comments Synced

If the import is successful, Disqus will show you the number of comments it has synced once it's done.



After a Successfuly Importing Comments into Disqus

The total number of comments synced should match the number that's indicated in Blogger's Published Comments page.

The comments will appear in the posts they were left in originally within Disqus. All replies will however display as top level comments. This is not a bug rather it's a limitation of the import tool that Disqus acknowledges.

If your Blogger comment settings are configured to only allow only specific people to comment, the synced comments will all be shown as authored by you the blog owner. To prevent this, in the Who can comment? setting configure it to Anyone before the import.

Lastly, you can opt to sync new comments within the Disqus system with your Blogger site using the Enable Sync button in the import page. This way all the comments in Disqus will be preserved should you revert back to Blogger's Comment System. The syncing is however not without it's issues.


Disqus Comments Import Failed?

Should the import fail to sync the comments, try repeating the importation for a second time. This is what happened to me when importing the comments on three different occasion, and for some reason the second time it always worked.

Also, the import may fail if you've selected the Hide option for the comment location inside the Comment Settings.
unhide comments
Unhide Comments

So make sure to switch to the Embedded option before the importing. After you're done with the importing, you can switch back to hiding it.

How to Remove Site Name Before Post Titles in Share Snippets

In this age of social networks share buttons are a common sight on many blogs and websites. The buttons allow readers to share content they find useful to share with those in their circles. This way user engagement is increased while driving social traffic back to the site.

Depending on the kind of traffic a website attracts, the share buttons may range from popular social media sites such as Facebook, Twitter, Google Plus and Pinterest to those targeting mobile users such as WhatsApp and Telegram.



The Share Snippet

Typically, the share snippet looks almost similar across all the social networks. That is, it includes the post title, a thumbnail of the selected or first image, the post's URL and often the post description (meta). In some cases, however, the site's name is included just before the post title.

This may cause the post title to be cut off wherever it's shared reducing the attractiveness of the share and likewise it's click-through-rate. Of course, the longer the site name the more the title is cut off.
whatsapp share snippet
WhatsApp Share Snippet with Truncated Post Title

The shortening is usually much worse on smaller displays such as those on mobile and when in portrait view.


What Causes this Shortening?

I've experienced this issue since starting this blog three years ago. My assumption was that this was the normal behaviour and could do nothing to change it. That's until I noticed the same trend with AdSense's Matched Content unit prompting me to investigate the issue.

What basically happens when somebody shares a URL is that a crawler from the social media sites crawls the destination site to find data to generate the aforementioned elements in the share snippet. It generates these data from the Open Graph Tags that are included in the website's template in the same manner as the Meta Tags.

Therefore, the problem of the site name appearing before the post title is more than likely to be traced back to the Open Graph tags one has implemented.

Identifying the Responsible Open Graph Tag

The open graph tags come in a wide variety. One however need not use all them. The essential tags that need to be implemented include:
  • og:title - title of the post
  • og:type - the type of content being shared e.g video, article
  • og:image - the image used in the snippet
  • og:url - the URL of the webpage being shared

Optional tags may however be included depending on what data you wish to be included in the snippet. An example is the site name. The site name is specified by the open graph tag: og:site_name.

That's our culprit. What will likely be happening is that the og:site_name tag is occurring more than once and is specified as part of the title tag. To ascertain what's actually happening test a URL of one of your posts on OpenGraphCheck or scrape it using the Facebook Share Debugger.

For example, the Facebook Share Debugger generated the following based on the tags I had im my template (not all tags are shown):
facebook share debugger tags
Before: Facebook Share Debugger Tags
Based on these tags, the generated share snippet looked like this:
facebook share snippet
Before: Facebook Share Snippet
The above is on desktop. On smaller mobile displays the entire title wouldn't be visible.



Removing the Duplicate og:site_name

I take the solution is obvious now: just remove the og:site_name tag that's either duplicated or included as part of the post title. If you don't need to display the site name in the snippet you can choose to remove the tag entirely.

The edit is quite simple but if you're unsure of what to delete and keep, I recommend consulting your web developer to do the change for you. If you're on WordPress, there are plugins which can add the necessary OG tags in your site such as the WP Facebook Open Graph protocol plugin.

If you're on Blogger such as myself you can use the following tags to guide you on what to edit or just replace your old tags with the second set that I currently use:

Original Tags


<!-- Start Open Graph Tags --> 
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='article' property='og:type'/>
</b:if> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL FOR IMAGE TO USE WHEN POST HAS NONE' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='&quot;en_GB' property='og:locale'/> 
<!-- End Open Graph Tags -->

Highlighted are the duplicate og:site_name tags.

After Editing (use this)


<!-- Start Open Graph Tags --> 
<meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='PUT URL HERE FOR IMAGE TO USE WHEN POST HAS NONE' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='&quot;en_GB&quot;' property='og:locale'/> 
<!-- End Open Graph Tags -->

Replace the highlighted tags with values that correspond to your site's content.


The Results

After deleting the duplicate og:site_name tag, the Facebook share debugger generated the following:
edited tags
Tags after edit
The resulting snippet:
edited share snippet
Share snippet after edit
The title now includes the blog name at the end of the post title the way it ought to; and this is not just on facebook but on all other social media sites as well.

Removing Site Name Before Matched Content Recommendations

AdSense recommends the Matched Content unit as an opportunity to publishers that qualify for it. This unit functions more or less like a related posts section with one minor difference: besides recommending one's published posts, it includes the option to display ads as part of the recommendations.

The unit is not particularly a good earner however that's beside the point as its core function is to increase user engagement. This in turn translates to more impressions for the traditional ad as readers explore content they find interesting through the matched content unit.

This blog recently became eligible for the unit and I decided to give it a try since after all I was overhauling the blog's template at the time. I managed to replace the Related Post section with the unit however it's here that I noticed something peculiar: this blog's name was being appended before the post recommendations.

As a result, the post titles were truncated thereby giving little idea about what the recommended posts were about. Not good.



Isolated Issue?

matched content with site name
Matched Content with Site Name

A cursory look through some websites that have implemented the matched content indicated this wasn't the standard behaviour. Still, my web searches indicated I wasn't the exception. A few users on the AdSense Help forum expressed facing a similar issue however their threads, much like mine would, went unanswered.

The matched content support page makes no mention of this behaviour. Furthermore, unlike the layout options, the text content of the matched content is only customizable to the extent of the font used. It's from this realization that I sensed that the problem was likely coming from my end.


Finding The Culprit

Part of my blog's overhaul included implementing a WhatsApp share button that wasn't originally part of this template. It's during the testing of this button that I noticed the WhatsApp shares likewise included my blog title before the post title.

It's from here that I ventured into debugging post shares from my blog using the Facebook Sharing Debugger (after all, they do own WhatsApp). The debugger likewise generated shares with the blog title before the post. Fortunately, the scraper does tell one exactly how it comes about with the data in a share: it uses the Open Graph Tags.

The open graph tags allow the facebook crawler to generate some of the data in the share such as the post title, the blog's title, the meta description and the thumbnail. These tags are usually included in a websites code (template) often being labelled as Social Media Tags.

As it turns out, one of these tags is what's responsible for the site name appearing before the post title; and not just in Facebook share's but also in the matched content unit.



Fixing the Open Graph Tags

The open graph tag responsible for generating the site name is og:site_name. In my case, the tag was appearing twice in my website's template code. Removing one of the tags resolved my issue.

To fix this therefore, just find the tags in your template's code and remove one of them. The tags are usually just below the HEAD tag. Use the Facebook's share debugger or the one at Open Graph Check to check for the duplicate tags.

If you're unsure of which to remove, I recommend removing all the open graphs tags and replacing them with ones suitable for the platform on which your site runs on e.g. WordPress, Blogger etc.

However going by the aforementioned threads in the AdSense forum it does seem that this issue is mostly affecting users of Blogger such as myself.

So as an example, here are a sample of open graph tags one may use in their Blogger template:

<!-- Begin Open Graph Tags --> 
<meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='PUT URL HERE FOR IMAGE TO USE WHEN POST HAS NONE' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='&quot;en_GB&quot;' property='og:locale'/> 
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@yourtwitterhandle' name='twitter:site'/>
<meta content='@yourtwitterhandle' name='twitter:creator'/>
<!-- End of Open Graph Tags -->

Replace the highlighted tags with your values:
  • For the second og:image tag, paste a URL to an image that you want to be used should a post not have one.
  • For the og:locale tag replace en_GB with the language which your content uses.
  • Replace @yourtwitterhandle with your twitter usernames or those of your brand. You can however choose to remove the twitter tags (the last four) if you don't use it.

Replace the old tags with these ones. They should be below the <head> tag though be careful not to remove any meta tags if your site has them. If you are still unsure of what to actually replace leave me a comment below or leave me a message on my contact page.



The Results

With the shares the change was immediate for any new share however the matched content recommendations took a couple days to update to not show the site name.
matched content no site name
Matched Content without Site Name

I should however mention that one week later as I write this some recommendations still include my  blog name as shown below.
recommendations with site name
Few Recommendations with Site Name
It's a mix of both for now. I suppose this may take longer to update, meanwhile do check a live version of the matched content below (it may not show up) or in some of my more popular posts. Cheers!

How to Create a Subdomain for Blogger on Namecheap

If you've domain on Namecheap you can easily set up a subdomain for it. Namecheap allows you to set up to 150 or 100 subdomains for your top-level domain (TLD) depending on which DNS plan you're using. Setting up a subdomain doesn't cost you anything extra since you already own the domain.

You can use the created sub-domain to set up a custom domain for your Blogger blog. Doing this however won't have any effect on the blog or site that's already using your top-level domain.

The possibilities are numerous however on Namecheap the entire subdomain shouldn't exceed 60 characters in length.



Example:
So for instance the top-level domain for this blog is journeybytes.com.

I've set it up as a custom domain to use on my Blogger blog instead of using my original BlogSpot subdomain: journeybytes.blogspot.com.

Yours could be different depending on which TLD you're using (.net .org .xyz, .us etc.) e.g: yourdomain.com, yourdomain.net, yourdomain.org, yourdomain.us etc.

I can therefore set up a subdomains such as: blog.journeybytes.com, reviews.journeybytes.com etc.and use it on a different blog on Blogger or on a completely different platform.

Sounds good, let's see how to set up one for a blog running on Blogger.


Step 1: Creating the Subdomain on Namecheap

Move Blogger to Subdomain

1. Log into your Namecheap Account Panel then select Domain List from the menu.

2. Click the Manage button beside the domain you wish to set up a subdomain for then switch to the Advanced DNS tab.

We now need to set up a new CNAME Record for the subdomain. Existing records should be left as they're.

3. Click on the ADD NEW RECORD button and from the list select CNAME Record.
new cname record
Add New CNAME Record

4. In the Host entry enter the name of your subdomain (e.g. blog), in the Target enter ghs.google.com. then leave the TTL at Automatic. When you're done, click on the tick icon to save the changes.
host and target
Add Host and Target


Step 2: Set up the Sub-domain as a Custom Domain on Blogger

1. Log in to your Blogger and head over to your blog's Basic Settings.

2. Under the Publishing section click the +Set up a third-party URL for your blog link that's directly below your BlogSpot address.

3. In the domain box, enter the entire name of the subdomain that we've just created (e.g. blog.journeybytes.com) then click the Save button.
enter subdomain
Enter Subdomain

You should get a notification that the changes have been applied successfully. The changes take place almost immediately though Namecheap says it maya take upto 30 minutes.

Click the view blog link to see your blog on the new subdomain. Your BlogSpot subdomain (http://yourdomain.blogspot.com) should now redirect to the new subdomain (http://yoursubdomain.domain.com).



NOTE

  • You don't have to set-up redirects for posts that you had published when on the old domain. Blogger will handle that for your automatically. So if a post was published at yourdomain.blogspot.com/2012/post-url-here.html it will be automatically redirected to yoursubdomain.domain.com/2012/post-url-here.html
  • Remember to turn on HTTPs Availability and Redirect if you were using them on your original domain and wish to continue using them on the sub-domain.
  • If you had added the old domain as a property in Google's Search Console, do remember to do a Change of Address to point it to the new subdomain. You'll however have to add the subdomain first as a new property before submitting the Change of Address. Site verification won't be necessary if the top-level domain has already been added. 
  • In search console remember to add both http &https versions then select the preferred version.

Blogger Email Comment Notification Fix

For the past few months, Blogger users have not been receiving comment email notifications for comments left on their blogs. In the course of this period, the Blogger team acknowledged the issue and mentioned they'll be working on a fix.

I experienced this too and in my efforts to curtail spam comments from going unnoticed as well as respond to actual readers, I devised some few workarounds that have been working for me during this period. Two months later it does seem that long overdue fix is finally here with us now.



Get Back Your Comment Notifications

comment notification fix
1. Open Blogger and go to Email settings

2. Below the Comment Notification Email box, click the Remove link to remove any existing  email address then click the Save Settings button. This must be done, even if the email address there is what you still intend to use for this purpose.
remove email
Remove Old Email

3. Click the Add link and enter the email address to receive the comment notifications. You can add up to 10 different email addresses to receive the notifications. To do this, separate them with commas. Click the Save Settings button to finish.
add email
Add Email

4. Now head over to the inbox of the email address that you just inputted in the previous step. You should find there an email from noreply+subscribe@blogger.com inviting you to receive email notifications for comments left in your blog.

Accept the invitation by clicking the Subscribe link at the bottom of the email. You're expected to accept this invitation within two weeks

5. Clicking that link will take you to Blogger where you'll get the message that you'll now be receiving new blog comment emails for your blog.
message
Confirmation Message


Comment Moderation Notifications

The comment moderation email notifications had also been broken by this issue. To get it back again into working condition we'll need to repeat the above steps for it too.

1. Go to Blogger's Posts, Comments and Sharing settings.

2. In Comment Moderation, start by removing any existing email address that you were using previously then click the Save Settings button.

3. Set your moderation type to either Sometimes or Always then below enter the email address to receive the notifications. Click the Save Settings button.
moderation email
Enter Moderation Email

4. Go to your email inbox and accept the invitation from noreply+subscribe@blogger.com by clicking the subscribe link in the email's body.
message
Confirmation Message
5. That should take you to Blogger where you'll get the message that you'll be receiving new blog comment moderation emails for that blog.



Some Things to Note

Going by the support thread, it does seem some few people are still having problems resolving this issue even after doing the above steps. Now it’s hard to pinpoint why that's so, but it's likely that they've missed something since its working for the rest of us. If you've found yourself in that situation, here are some things you could try:

1. Make sure to remove the old email addresses, save then reload the page before entering the email address. This seems to be by far the most common solution.

2. Try using a Gmail email address if you're using a different email host. However, this is not to mean that other email hosts will not work.

3. Check your SPAM folders. Your email host may be flagging the comment notifications as spam.

4. If you're not receiving the invitation, some have suggested that entering the email address from the Choose from contact link to be what worked for them rather than entering the address manually.
contacts
Choose from contacts

Note: you'll have to add your email address (or the one you intend to use) into Google Contacts before doing this.

5. The way the solution is expressed in the thread some have interpreted it to mean that enabling comment moderation as being necessary to enable comment notifications. This is NOT so. You can enable comment notifications without having to enable comment moderation.

6. It would seem the comment notifications are now "noreply" for everybody. You therefore cannot reply directly to the commenter's email as before.