A little while back we transitioned from Blogger to a self hosted WordPress solution. We did this for a variety of reasons, not least of which was SEO. But that’s for another post. What I want to talk about is how we forwarded Blogger to WordPress. I had to wade through a lot of blogs to find out a good way of doing this. Most of the entries about this process are dated to last summer, some account for Blogger 2.0, some don’t. Some account for SEO, some don’t. Some have good, well explained code, most don’t. One thing that really irked me is that none mention the new redirect window that Blogger uses.

Initially we wanted to just forward everything that went through blogspot to the new blog address, but we immediately realized that blogger won’t allow you to forward to a folder. This means that blogger absolutely will not allow you to forward to libertyinteractivemarketing.com/blog. However, they will allow you to forward to blog.libertyinteractivemarketing.com. I find this ridiculous because google gives more weight to the former example, but I digress. So we made the subdomain, and then 301 redirected from the subdomain to libertyinteractivemarketing.com/blog. So there are two redirects happening, one when you come to our Blogger (using their Custom Domain), and another when you hit the subdomain. This should be fine because no matter what, Google should take into account the final redirect as being the correct one.

The problem ended up being that there are still links on Google and the other search engines referencing our Blogger blog. We also realized that the Blogger custom domain thing made it so any hits to our blogger blog were faced with this:

This is why we can't have nice things

What we wanted

We decided we wanted the blog to remain in existence but only as a forwarding tool and we wanted to NOINDEX it so that Google wouldn’t penalize us for duplicated content. We also wanted each link for a specific Blogger post on the search engine (and in the blog itself) to forward to that same post on our new WordPress. And finally, we wanted the main Blogger page to forward to our new WordPress installation. We wanted to do this using SEO best practices, but as you’ll find, blogger makes this insanely difficult.

How We Did It

Setup Redirects

First off, you are going to want to be working in your Blogger template editor, which can be found by going to the Layout tab, and then clicking on Edit HTML.

To Redirect the front page of the blog, you cannot use any 301 good stuff. You must use HTTP refresh simply because if you try to use Blogger’s forwarding you’ll have to see that screen above asking permission to redirect. I think that’s bull poo, but so far I have no good solution to this. Put this in between your head tags.

<meta content='6;url=http://yournewblog.wordpress.com/' http-equiv='refresh'/>

Display Message to Users

You might want to theme this like your new blog's colors, perhaps not so spammy?

To make it so the user isn’t surprised when they are suddenly sent to the new page, a message is highly recommended. Put this right after your first body tag. Remember to swap out the information in there with yours.

<div style='position: absolute; top: 30px; left: 30px; border: solid 2px #333; color: #000; background-color: yellow; padding: 5px; width: 400px; z-index: 5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: large;'>
<p><strong>My blog has moved!</strong></p>
<p>You should be automatically redirected in 6 seconds. If not, visit<br/> <a href='http://yournewblog.wordpress.com/'> <strong>http://yournewblog.wordpress.com</strong></a> <br/> and update your bookmarks.</p>
</div>

Avoid Duplicate Content Penalties

We NoIndexed the blog itself, which was easy enough. Just throw the following code in between your head tags.

<meta name="ROBOTS" content="NOINDEX"/>

Forward Individual Posts

In order to make every post forward correctly you have to use very specific code. This code specifically assumes you are using SEO best practice and organizing your posts only by page title. That means www.yourblog.com/post-title. If you’re not, I recommend you head over to Procrastiblog as his solution takes into account the Blogger timestamp.

Look for this code in the Blogger Template:

<b:section class='main' id='main' showaddelement='no'>

Enter the following right after you find the above code. Make sure to replace “YOUR_BLOG_URL_HERE” with your new blog address.

<b:widget id='Redirector' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<div id='redirectorTitle' style='visibility:hidden'><data:post.title/></div>
<script type='text/javascript'>
var new_domain = 'YOUR_BLOG_URL_HERE'
 
function utf8_uri_encode( str ) {
  var high_code = new RegExp(/[\u0080-\uffff]+/);;
  new_str = str;;
  while( m = high_code.exec( new_str ) ) {
    new_str = new_str.replace(m,encodeURIComponent(m));;
  }
  return new_str;;
}
 
var title = document.getElementById('redirectorTitle').innerHTML;;
// [INCOMPLETE] Keep percent signs that aren't part of an octet?
title = title.replace(/&lt;[^&gt;]*?&gt;/g,'');; // remove tags
title = title.replace(/&amp;.+?;/g,'');; // remove entities
title = utf8_uri_encode(title);; // handle UTF-8 characters
title = title.toLowerCase();;
title = title.replace(/[^%a-z0-9 _-]/g,'');; // remove punctuation
title = title.replace(/\s+/g,'-');; // turn spaces into hyphens
title = title.replace(/-+/g, '-');; // collapse runs of hyphens
title = title.replace(/^-+/g,'');; // remove prefixed hyphens
title = title.replace(/-+$/g,'');; // remove suffixed hyphens
var timestamp = '<data:post.timestamp/>';
timestamp = timestamp.split('/');
timestamp = timestamp[2]+'/'+timestamp[0]+'/'+timestamp[1];
var new_page = new_domain + '/' + title + '/';;
document.location.href = new_page;
</script>
</b:loop>
</b:if>
</b:includable>
</b:widget>

Examples of how this worked for us:

Front page message and HTTP refresh redirect:
http://libertyinteractive.blogspot.com

Forwarded Post
http://libertyinteractive.blogspot.com/2008/03/functionality-before-optimization-web.html

In Conclusion

While insanely useful, especially for established blogs, one unfortunate thing is that if you had only published on yoursite.blogspot.com and you have many people linking to you, you will not be able to pass on link juice. Your page rank may suffer as a result. While you’ll be able to get your users where you want them to (post by post) and therefore improve bounce rates, you wont get the page rank benefits. Make sure to remove and noindex your old blog from Google using Google webmaster tools and next time either use a custom domain or don’t use a hosted solution. Even Typepad suffers from this.

Thanks to: Procrastiblog, and Laffers.net, as they have by far the most up to date and working examples of this stuff. They just needed a little more.