How to Customize 404 Error Page in Blogger

customize 404 error page in blogger
In this post, we are going to learn how to redirect 404 error pages in blogger.

Broken links in your blog can ruin the user experience and kill your credibility. They may be due to changed URLs or deleted pages.

Web users are not patient; they will go to the next available resource that gives them the best user experience. If your pages have plenty of 404 error pages, you need to learn how to redirect them to boost the user experience.

We will learn how to create custom 404 redirection page and put the javascript in place to take care of the redirection. The script can redirect the users to the homepage or create a menu to serve the users with alternative information.

Here's how we are going to do it:


First, we can put an automatic redirect that informs the users about the missing page and redirect them to the homepage after a few seconds.

Here is how to do it; 
Step 1
On your blogger dashboard, click on “Settings” then “Search Preferences”


Step 2
Once you click on the edit tab, an input box will open for you to add the code. You should now copy the code below and paste it into the box then save.

Redirection code

<h1>It Looks Like the Page You’re Looking for Does Not Exist!</h1>
<br><b>This happens when you enter the site URL incorrectly or this page doesn't exist anymore. You will be redirected to homepage in a short while.</b>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/error-page-url"
}, 4000);
</script>

After saving this code, users who arrive on deleted pages will be informed about the error and redirected to the homepage.

That way, you will have an opportunity to serve them with more content and retain them in the page.

You will realize that the page only has text. We can add graphics to make the error page more appealing. You do this by creating a special error page.

You can add special graphics, which you can create on canva or photoshop. If you suck at graphics, you can hire a freelancer to do it for you. 

Tip: You can hire me to create for you an informative 404 error page infographic 😊📨.

Steps for creating a special 404 error page.

Step 1
Go to your dashboard and create a new page. You can call it “Page Not Found” or any other fancy title you prefer. Add your custom infographic and publish.
Step 2
Now go back to the redirection code we had saved earlier under the “Custom Page Not Found” settings.
Step 3
Replace the highlighted section (in green) with the permalink of the 404 error page we have just created. Save the code and refresh the page.

Wrapping it up!

I hope you now have a functional 404 error page redirect that takes care of bouncing traffic on your blog.

Feel free to ask any additional question that you may have.

Kindly let me know in the comments if you found this tutorial helpful.

Related

Hacks 8925622719708022976

Post a Comment Default Comments

  1. Stumbled upon your wonderful post & just tried adding the code as instructed. However, the error url was directed to "http://www.luxuryhaven.co/http://www.luxuryhaven.co" instead. Wonder why there're 2 urls linked together. I've only typed in 1 url in your html code. Any idea? Thanks in advance!

    ReplyDelete
    Replies
    1. Hello Shirley,
      Did you add the full url of your error page including the domain?

      Delete
  2. HI,

    Thanks for sharing this useful post.

    ReplyDelete

emo-but-icon

Try Amazon Fresh

Video of the day

item