Dealing with Google Blogger Duplicate Content and Canonical Issues

Duplicate content and canonical issues can have a serious negative impact on your position in the search engine results pages. Google Blogger’s (Blogspot’s) templates in their default setups can lead to these issues. Keep reading to learn how to fix the problem.

You might have read one of these useful tips for implementing onsite SEO in Google Blogger:

Blogspot SEO Checklist for Blogger’s Classic Template

Blogspot New XML Template SEO Checklist 

This tutorial will further extend several important onsite SEO issues that were not covered or fully illustrated in those two previous tutorials.

Example of these important issues include canonical and duplicate content related problems in the Blogger template. This affects both the classic template and layouts on the new template. These issues will be covered in this tutorial.

How to Add a Link Rel Canonical Tag Using the Blogger Classic Template 

This is tested to work only in classic templates, however the new XML template already incorporates the link rel canonical tag by default. This is a very important tag that will prevent duplicate content issues within your Google Blogger classic template.

Unfortunately, one cannot easily generate a link rel canonical tag to be pasted in your Google Blogger classic template source code. You need a strong working knowledge of Blogger conditional and scripting tags which might appear complex for an ordinary blogger.

Okay, let’s not make this difficult for you. Here is the code:

<MainPage><link href=’http://replacethiswithyourblogspotfrontpage.blogspot.com/’ rel=’canonical’/></MainPage><ItemPage><blogger><link href=’<$BlogItemPermalinkURL$>’ rel=’canonical’/></blogger></ItemPage>

How does the above code work? 

1. First it will check to see if the page requested to the Blogger server is the front page or main page URL. If it is, it will return the link rel canonical tag HTML code containing the URL of your Blogger front page. So if your Blogspot has a front page URL of http://lwat.blogspot.com/, then it will be:

<link href=’http://lwat.blogspot.com/’ rel=’canonical’/>

 

2. Next, if the requested URL to the Blogger server is NOT the front page, but instead a post URL, then it will return the blog post URL because of the use of the <$BlogItemPermalinkURL$> tag.

Example:

<link href=’http://lwat.blogspot.com/2009/12/welcome.html’ rel=’canonical’/>

 

3. There is no need to put the link rel canonical tag on the Blogger archived pages because those are non-indexable and already tagged with meta noindex to avoid duplicate content issues (refer to past onsite SEO tutorials on blogger; see reference links in the first section of this article).

How do we implement the link rel canonical code?

It is simple to implement. Follow the procedure below:

1. Log in to your Google Blogger account.

2. In the dashboard, click the "Template" link of your blog to be optimized.

3. Copy and paste this code (do not forget to change the URL to reflect your OWN Blogspot front page URL):

 

<MainPage><link href=’http://replacethiswithyourblogspotfrontpage.blogspot.com/’ rel=’canonical’/></MainPage><ItemPage><blogger><link href=’<$BlogItemPermalinkURL$>’ rel=’canonical’/></blogger></ItemPage>

 

And place it just below the <head> tag of your template source code. After pasting it, the upper portion of your blogger template source code will look something like this (the red font is the link rel canonical script):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">

<head>

<MainPage><link href=’http://lwat.blogspot.com/’ rel=’canonical’/></MainPage><ItemPage><blogger><link href=’<$BlogItemPermalinkURL$>’ rel=’canonical’/></blogger></ItemPage>

 

You might have noticed that in some instances, your front page will rank better than the exact post URLs even though the query uses key words that are prominent in the post’s title. The major reasons for this are that the queried text is also present in the Blogger front page, and your blogger front page is more authoritative (has a higher number of, or better quality, links pointing to it) than other URLs in your blog, so it is more likely to be returned in the search results, in an even higher position than your actual post URL.

The ideal situation is that, if someone searches for a keyword that contains your post URL title tag, of course the post URL will rank better than any other URLs in your blog (including your front page).

The problem is, again, duplicate content. Suppose you have a post with around 500 words and you decided to show the top three latest post on your Blogger front page. The problem is illustrated below (without the use of the "read more" link):

By minimizing the amount of post text content exposure on the front page, you decrease the chances of your front page URL ranking in Google, and thus award more page authority to the post/canonical URL.

This happens because the post page contains the detailed text and includes a link from the front page, but the front page itself no longer has the complete text of your posts on it. Instead of presenting the entire post text content, only a sample amount of text is presented and the rest can be read by clicking the "read more" link.

Unfortunately there is no "read more" tag in Blogger, unlike in WordPress (which is symbolized in WordPress as: <!–more–>), so any user of the Blogger platform will need to do some hard coding for this to be implemented.

To implement the use of the "Read more" link so that your post text content will be minimized on the front page, like this:

 

  

Different solutions exist for Blogger Classic and Blogger New XML-based templates. So let’s start with the Blogger Classic solution:

Step 1: Log in to your Blogger account.

Step 2: Click the "Template" link in your Blogger Dashboard.

Step 3: Copy and paste the following code just before the </style> in your template:

<MainOrArchivePage>

   span.fullpost {display:none;}

</MainOrArchivePage>

 

<ItemPage>

   span.fullpost {display:inline;}

</ItemPage>

  </style>

 

Step 4: Add the following code after <$BlogItemBody$>

<MainOrArchivePage><br />

 

   <a href="<$BlogItemPermalinkURL$>">Read more!</a>

 

</MainOrArchivePage>

 

Below is the implementation screen shot of Step 3 and Step 4:

 

Step 5: Now go to the post for which you need to implement the read more tag. Utilize the code:

<span class="fullpost"></span>

 

Suppose this is my post text content (start to finish):

 

The quick brown fox over the lazy dog. But the bear eats the fox and the lazy dog runs away. Suddenly the tiger fights the bear but the bear is just too strong, the tiger runs away too.

 

And I would like the read more link to display just after "Suddenly…" so it will be implemented as follows:

The quick brown fox over the lazy dog. But the bear eats the fox and the lazy dog runs away. Suddenly<span class="fullpost"> the tiger fights the bear but the bear is just too strong, the tiger runs away too.</span>

 

Tip: The </span> SHOULD be placed at the end of the post. Only <span class="fullpost"> is adjustable (based on the number of words you would like to present on the front page, also with respect to your design).

But if you are using Blogger’s New XML based template (also named "Layouts" by Google), the steps are as follows:

Step 1: Log in to your Blogger account.

Step 2: Click the "Design" link in your Blogger Dashboard.

Step 3: Click Edit HTML.

Step 4: You will then be presented with "Edit Template" and its source code. Check "Expand Widget Templates."

Step 5: Add the following source code just below the <head> tag:

<style>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

   span.fullpost {display:inline;}

<b:else/>

   span.fullpost {display:none;}

</b:if>

</style>

 

Step 6: Add the following code just after <data:post.body/>

<b:if cond=’data:blog.pageType != "item"’><br />

 

   <a expr:href=’data:post.url’>Read more!</a>

 

</b:if>

Here are the related screen shots for steps 5 and 6:

 

Step 7: Go to your post and implement the <span class="fullpost"></span> tag (the same procedure and technique with the Classic templates discussed previously).

Google+ Comments

Google+ Comments