Wednesday, 5 February 2014

How to redirect Blogger 404 Error (Page Not Found) to homepage

When a user goes to a nonexistent URL on your blog, Blogger will display this Error 404 (Page Not Found) message at the top of your blog post area:
"Sorry, the page you were looking for in this blog does not exist."
Hmm… probably not the best first impression you’d want to give a potential reader. Before  the user hits the Back button or closes the browser’s window/tab and disappears forever, you might want to redirect the page to your homepage (or to a page of your choice) where the chances of him/her staying and reading is (presumedly) far greater.
Blogger 404 error page not found redirect
One of the ways to redirect is to use meta refresh, but the problem with this method is it breaks navigation (it wont go back to the page you came from when you hit Back button). The better method is by using Javascript, and I think I’ve found the simplest way to do this on Blogger.

It is wise to include these two components in the redirection process:
  • Redirection message - to inform that the page doesn’t exist and the user is about to be redirected. Failure to do so will make the user feels cheated when the searched information is nowhere to be found on the landing page (homepage). Here’s an example:
    "Sorry, the page you were looking for in this blog does not exist. You will be redirected to homepage shortly.”
  • Time delay - to provide sufficient time for the user to read the message prior to redirecting.
Based on the above example, this is how you add the new message and the redirect script to your blog:
  1. Go to Settings > Search preferences > Custom Page Not Found (under Errors and redirections).
  2. Click Edit and paste this:
    1Sorry, the page you were looking for in this blog does not exist. You will be redirected to homepage shortly.
    2<script type = "text/javascript">
    3//Blogger 404 Redirect v1.0 by GreenLava(BloggerSentral.com)
    4BSPNF_redirect = setTimeout(function() {
    5location.pathname= "/"
    6}, 5000);
    7</script>
    404 page not found redirect

    • The top is the message. You are free to change it.
    • To redirect to a page/site other than your homepage, replace pathnamewith href, and / with the URL of the page/site.
    • The number 5000 is the delay in milliseconds. You can change it to whatever value you think appropriate. Zero means immediate redirect (no delay).
  3. Click Save changes.
To test simply enter any URL that doesn’t exist in your domain/subdomain (e.g. http://yourblog.blogspot.com/dfsfgd) and see if your new Page Not Found message appears, followed by redirection after 5 seconds.
If you find any bugs/side effects, please let us know in the comments.
Enjoy!