Successfully Forwarding Blogger to Wordpress
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(/<[^>]*?>/g,'');; // remove tags title = title.replace(/&.+?;/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.
Tags: 301, blog, blogger, forwarding, redirect, seo, Wordpress
July 19th, 2008 at 1:36 pm
Hi Jimmy,
Great post! Thanks for this very clear and easy tutorial. This is exactly what I needed for my client’s site.
My client only had a few posts (about 8), so I manually (copy/paste) transfered the posts to her new self hosted Wordpress blog. The site is a website with a blog, built using Wordpress as a CMS. I am wondering though, if I was to use your tutorial to move the posts to her blog, would it still work? I am asking this because the front page of my client’s site is a custom/static home page and not the blog. Her blog is “domainname.com/blog”. I hope you will have time to answer this. I could find out by doing it, but I’m afraid of screwing up the site by doing it as the site is already live.
Thanks for your time in creating this wonderful and very helpful tutorial.
July 19th, 2008 at 1:39 pm
By the way, I found your blog by googling: “how to redirect blogger blog to a new site?”. I was taken to another site, “showinabox….”, where you had commented and decided to use your tutorial instead.
Cheers!
July 19th, 2008 at 4:01 pm
Nirz,
It will absolutely still work. Just fill in the blog address for all the code shown above, it doesn’t have to be the root domain or a subdomain. If you’ll notice, that’s exactly how our site here is functioning.
Make sure your new wordpress is using just titles to organize it’s posts. For example, you’re posts should look like this in the address bar: http://www.yoursite.com/blog/post-title. If you are still using a timestamp, you’ll have to follow the link to procrastiblog to see his example. See http://yoast.com/articles/wordpress-seo/ for information on optimizing titles and such. You can also use the Wordpress All-in-One SEO pack to help you optimize titles.
Thanks for coming by and letting us know how you got here
July 20th, 2008 at 5:26 am
@Jimmy
After carefully going through your and your friends post, I have observed that…
You are using Javascript to calculate wordpress post URLs. This will fail for search engine as they have javascript disabled. So using your way all SEO juice will be gone!
Next it puts restriction on Wordpress Permalink structure. Also there may be date mismatch as mentioned by Chris. This all means your solution is not fullproof.
Also read this official article from Google on Javascript redirects, which further makes it clear as why one should not use your codes.
So buddy if you are newly moved better use my plugin to save your PageRank and normal traffic!
Blogger to Wordpress Traffic & PageRank Redirect Plugin
July 21st, 2008 at 9:00 am
Thanks!
July 21st, 2008 at 11:48 am
Rahul,
I had taken a look at your plugin before ultimately deciding on my solution. Why? I can’t understand how to use your plugin and really I don’t see how it’s any different from my solution. Let me explain.
You provide little explanation of how to actually redirect posts from blogger. You simply say that the plugin “assumes that you are using ‘javascript’ or ’static links’ to redirect users to your new blog”. Most users, myself included when I was looking for guides on this, do not know what this means exactly or how it’s implemented. Beyond that, the example code you provide for redirecting blogger is javascript! You are using a javascript redirect! And it is also nofollow and noindex. How is link juice being passed?
Google may not like javascript redirects, but when you noindex your blog it doesn’t matter either way.
If your plugin works and passes on link love, I’d love to use it. I’d gladly throw away the guide I just wrote up and just use your solution. But I simply don’t see how your solution is really any different from mine. Beyond that, I feel overall my instructions are clearer than yours.
Nothing is fool proof and I’m sure your solution works. I just don’t understand how it works as you say it does.
July 22nd, 2008 at 2:43 pm
[...] to the new location, in case they’ve disabled javascript. I wouldn’t recommend using a meta tag redirect, unless you can somehow incorporate the current article’s URL into it. You don’t want [...]
July 27th, 2008 at 4:01 am
Many thanks for a most helpful tutorial.
Regards,
Matt
August 9th, 2008 at 1:25 pm
Worked beautifully for me! Thanks so much for the easy to follow guide!
August 14th, 2008 at 6:51 pm
I can’t find the statement, , in any Blogger template, including Simple II. Have they all been changed or am I missing the obvious?
August 14th, 2008 at 6:57 pm
Forget the prior comment because the statement was suppressed.
To repeat, I can’t find the statement, b: section class = ‘main’ id = ‘main’ showaddelement = ‘no’, in any current Blogger template, including Simple II. Have they all been modified?
August 14th, 2008 at 7:53 pm
@Chuck D
It’s still there as far as I know, I just took a look at our template (we use No. 897, but it shouldn’t matter). It should be near the very bottom of the Blogger code editing screen (when you go to Edit HTML). Scroll all the way down, then click the ‘up arrow’ just a few times, and you should see it right there.
If you’re still having trouble, I recommend getting a text editor like Notepad++ where you can highlight the html tags and search for terms like the one you’re having trouble with.
Let me know if you find it…
August 15th, 2008 at 12:19 am
Jimmy -
Thanks for the rapid reply. Using the editor in FireFox as well as a text editor, I don’t get a hit on either class=’main’ or section or showaddelement. Looked in both the Edit HTML source in Blogger as well as View Source on the page.
I’m sure that I am missing the obvious, but I just can’t find it. I’ll keep looking, but if you have any further ideas it would sure help. What other code is it near?
August 15th, 2008 at 11:34 am
@Chuck
You wont find it using a regular text editor or firefox. They have trouble with the code syntax. The only thing I could imagine is giving you trouble finding it is if you have your widget templates expanded. You should see a checkbox right above the HTML editing screen for blogger that says “Expand Widget Templates”. Make sure that is unchecked, and honestly it is right near the bottom of the code.
If all else fails, install Notepad++ (It’s so much better than notepad it’s a joke, it makes coding much, much better). Copy and paste all the template code into Notepad++, then go to the top menu, select ‘Language’, then select ‘HTML’. It will highlight all the HTML tags. Search for the term we’re talking about here by clicking Control+F (ctrl+f) and then searching for: “b:section class=’main’ id=’main’ showaddelement=’no’” (with the <> encapsulating it instead of quotes) and it will find it right away. Insert the code in my tutorial and make any necessary changes. Then copy and paste that code back into the blogger html edit screen.
While this seems more complicated (because you have to install Notepad++) it will make your life far easier in the future. If you ever play around with code, installing that program is the best decision you’ll make all year.
Let me know if you’re still having trouble.
August 15th, 2008 at 12:24 pm
Jimmy, you are the man! Feel like I just finished one class that was worth the whole semester. Part of my problem was that I was working in the old blogger “template” format rather than in the upgraded “layout” format. Once I made the switch, everything you said worked like a dream. Thanks for the excellent guidance.
August 15th, 2008 at 12:43 pm
Great to hear Chuck
August 21st, 2008 at 5:41 pm
it worked with a few additional tweaks as blogger now is checking some things that are not acceptable from the new codes, thanks a lot !!
August 27th, 2008 at 4:14 pm
@Vertito
Hey, let me know what those additional tweaks are so that I can update the guide. I want to keep this thing as relevant as possible.