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.
August 31st, 2008 at 11:40 pm
[...] oarecum ideala si cel mai simplu de implementat o puteti gasi in articolul acesta. Modificarile sunt explicate in amanunt, daca ai ceva cunostiinte de baza de HTML nu vei avea nicio [...]
September 4th, 2008 at 1:26 pm
there are some additional tweaks that needs to be done from blogger redirection of individual posts, maybe the guide was based on classic template and i was using something like minima template.
one thing that i noticed is that, there are permalinks from blogger that is different from wordpress permalinks specially longer permalinks, which is actually being parsed and shortened somehow by wordpress algorithm, i guess it was a permalink limit from WP, i tested it with the latest WP and the older version before WP2.6. mind you as i keep on forgetting things easily.
one good thing about redirection from blogger to wordpress is that WP does not care if you have htpp://vertito.blogspot.com/2008/8/abc-efg.html from blogger and you have http://www.ilovetux.com/2008/08/abc-efg.html from wordpress (did you see the difference there?), this is where wordpress works best. But WP fails on longer blogger permalinks.
if you may, the code you have to redirect individual posts is only around 90% to 96% effective based on my redirection rigid tests, i did some small tweaks from the code to make it 100%. unfortunately, i cannot recall that i have backup copy of my template
considering that the tweak was simple for me, it’s just a matter of redirection debugging, sorry about that.
then finally, i moved back domain to blogger hosting, as i weight blogger platform with more advantage from my level of perspective, mind you.
would you be so specific to tell me which individual blogger posts for example does not properly redirect to your new domain? i could give it a try for you and post the solution here, free of charge
hope this helps.
September 4th, 2008 at 3:06 pm
here’s another one. my blogger settings terminates URL with .html but from my wordpress, it ends permalinks with / character, so here’s the tweak.
from your individual redirection code
timestamp = timestamp[2]+’/'+timestamp[0]+’/'+timestamp[1];
var new_page = new_domain + ‘/’ + title + ‘/’;;
in order to adapt my WP settings, i remember i have to tweak it to look like
timestamp = timestamp[2]+’/'+timestamp[0];
var new_page = new_domain + ‘/’ + timestamp + ‘/’ + title + ‘.html’ ;;
see the difference? this is for my template case, which works out absolutely fine for me.
this was the solution from my recent comment, since we only need the year and the month, excluding the day of the month. and considering that WP permalinks does not end with .html by default, unless you explicitly define it from WP permalink settings.
also, there should be NOFOLLOW from here for google bot not to follow existing link from old blogsite even if the blogspot redirects, google bots are smart, they can even try to crawl and see files that are not even declared from any of your site pages, blog posts or links. so i have decided to include it here as well to look like
it is also advisable to only display a single post from old blogspot, to make the loading and redirection a little bit faster. secondly, your last blogspot post should refer to your new domain informing blog followers BEFORE the migration and not AFTER the migration, either atleast via post or feeds. third, you should have a customized friendly 404 WP page only as a fallback to NOT Found pages that is. your issue of double redirection to subdomain can also be solved by checking referrer value via your site index PHP page, i believe that would be less than 10 lines of PHP code inside index.php file, atleast this way, you remove 2nd redirection via subdomain. there are a lot advantage of doing this, one is that WP’s index.php statistics hits stats doubles by nature since it is an algorithm by WP that calls index.php and header.php as the kernel for all WP site operation - compared to subdomain redirecting to sunfolder (the hits from subdomain give you nothing but redirection that is). you could be needing this for any site stat reports requested by ad clients. there are lots more to add, but don’t wanna fill up the spaces around here.
i think this is all it, i have to watch the US Open now. muller is playing against federer, this young man is a promising tennis beast too.
hope it helps. cheers
September 9th, 2008 at 11:58 pm
[...] Anyway, I found a site that explained how to move from blogspot.com to WordPress really easily. You can find this document here. [...]
September 10th, 2008 at 7:51 pm
First, let me state I am a novice.
I have a blog on blogger, over 3 years old, with close to 500 posts.
I would like to export all posts & comments to a new blog on blogger (different address obviously).
I have worked out the first set of kinks, which is that if you create the new blog, then export from old blog to a file, then import the file into the new blog - all new permalinks will be totally different from the original, old permalinks.
This creates a major problem if you want to in some way be able to redirect each and every individual post.
The process you need to follow to create identical (for the most part, a few will be a bit different, but not every one!), is to instead, export your old blog to a file. Then, from the blogger dashboard, create a new blog, go the advance settings, and import from the file into the new blog you are creating. This will make most of the permalinks identical.
Now, for my question to you. Obviously, your great widget does not work on blogger to blogger redirects. I would love to have a widget that will work for my situation - a blogger to blogger redirect for individual posts. Any help you could provide would be fantastic!
Thanks!
September 11th, 2008 at 1:51 pm
@Holly,
While I can’t give you much advice on a plugin for blogger to blogger redirects, I can give you some advice on how to set up your new blog. For one, get a custom domain. Publish on the custom domain so that if you do decide to publish on another platform in the future (typepad, wordpress, whatever), then you can redirect people easily and with no fuss. Trust me on that one.
September 11th, 2008 at 3:53 pm
Thanks for your reply. Probably what I’m looking for can’t be done anyway.
October 9th, 2008 at 12:13 pm
This is SO useful. I have used it twice now to GREAT effect. Thank you for posting.
October 11th, 2008 at 1:36 pm
Hi Jimmy,
This is very useful as I was searching for a guide that used the new Blogger and was reliant on old coding.
Your guide is great for people migrating from blog.blogspot.com/post.html to blog.wordpress.com/post but I’ve used a custom domain on Blogger, and still with that domain now hosted on wordpress.org.
For about 18 months of content, Google now has duplicate content for, say:
http://www.ariwriter.com/2008/10/5-ways-social-media-is-like.html
http://ariwriter.com/2008/10/5-ways-social-media-is-like/
I set up your redirect code in my Blogger template… but the html file is coming across as a 404 error, which I’ve customized for the time being. I know I can change the Wordpress permalink setting to be html, but I don’t want that for new posts.
Am I making sense? How can your above guide work for custom domains?
November 18th, 2008 at 8:33 pm
[...] moving on and isn’t going to help you in that matter. I’ve found what I think are some good directions on what I need to do, but I am anticipating some [...]