How to Add Custom Professional 404 Error Page in Blogger

The default 404 error page of Blogger blog doesn’t look much professional. It simply displays an error message: “Sorry, the page you were looking for in this blog does not exist.”.

Blogger also has an option to customize the 404 error page. You can change the look of this error message and make it more professional using HTML and CSS.

This tutorial will guide you how to add a custom 404 error page on your Blogger blog. Later, we will discuss how to change the title of 404 error pages and prevent them from indexing in Google.

Benefits of adding custom 404 error page in Blogger

Here are few benefits of adding custom 404 error page on your Blogger blog –

• More professional – The custom 404 error page will give a professional touch to your blog. It is well designed using HTML and CSS.
• More user friendly – The custom 404 error page will guide users what they can do next. There are three options available: user can either go back to the previous page, contact you via contact page or visit the homepage to explore the site further.
• SEO Optimized – We will block the 404 error pages of your blog using robots meta tag to prevent them from indexing in Google and other search engines.

You can see the live preview of our 404 error page here: https://www.geekinstructor.com/404

How to add custom 404 error page on Blogger

Here’s a step-by-step guide to add custom 404 error page on your Blogger blog –

1. First, login to your Blogger Dashboard.
2. Go to Settings > Search Preferences.
3. Under Errors & Redirections, click the edit link next to the Custom Page Not Found option.
4. Now copy and paste the following code in the text editor:

   <style>
   #main-wrapper {width: 100%;}
   #sidebar-wrapper, .blog-pager {display: none !important;}
   #content-wrapper {width:99%!important;}
   .status-msg-wrap {font-size: 100%; margin-top: 20px; position: static; width: 100%;}
   .status-msg-border {display:none}
   .status-msg-body {padding: none; position: static; text-align: inherit; width: 100%; z-index: auto;}
   .status-msg-wrap a {padding: none; text-decoration: inherit;}
   #TB-404-error-box{background: url(http://4.bp.blogspot.com/-Ho6Pgtu9hKQ/UChVnm_3tBI/AAAAAAAAHU8/jkoB4Wq6GfM/s640/404.png) no-repeat scroll 20% 115% rgb(255, 255, 255); margin: 0px 0px; padding: 15px 20px 50px 20px; height: 470px;}
   </style>
   <div id="TB-404-error-box">
   <div align="center">
   <span style="color: red; font-size: 57px;"><strong>Oops!</strong></span></div>
   <br />
   <span style="color: black;">Seems like you either clicked a <b>Broken Link</b> or a <b>page that no longer exists</b>. Kindly do one of the followings:</span><br />
   <ol style="line-height: 25px;">
   <li><span style="font-size: large;"><a href="javascript:history.go(-1)">« Go back</a> </span></li>
   <li><span style="font-size: large;">Report the problem to us by <a href="your-blog-contact-page">contacting here</a> (<em>This will help us serve you even better</em>) </span></li>
   <li><span style="font-size: large;"><a href="your-blog-url">Go to Homepage</a> and read other interesting tutorials.</span></li>
   </ol>
   <br />
   <div align="center">
   <span style="color: #08c500; font-size: 120px;"><strong>404</strong></span></div>
   <div align="center">
   <span style="color: #eb0f0f; font-size: 20px;">Page Not Found!</span></div>
   </div>
   

   Note: Replace your-blog-url with the web address of your blog and your-blog-contact-page with the URL of your blog’s contact page.

5. Finally, tap the “Save Changes” button.

• Also read: How to add custome related posts widget in Blogger

How to change the title of 404 error page in Blogger

The title of the web page is displayed on search engine results pages (SERPs) and social media as a headline. It also appears in the browser’s tab.

By default, Blogger will display your blog name as title on 404 error page. If you want to change it, follow these steps –

1. Login to your Blogger Dashboard and go to Template > Edit HTML.
2. Click anywhere in the template editor and press CTRL+F shortcut key to open the search box.
3. Now search <title> tag and replace the old title code with the following code:

   <b:if cond='data:blog.pageType == "index"'>
   <title><data:blog.pageTitle/></title>
   <b:else/>
   <b:if cond='data:blog.pageType != "error_page"'>
   <title><data:blog.pageName/></title>
   <b:else/>
   <title>404 Error | <data:blog.title/></title>
   </b:if>
   </b:if>
   

4. Finally, tap the “Save theme” button to save the changes.

How to prevent Google from indexing 404 error pages in Blogger

To prevent Google and other search engines from indexing 404 error pages of your blog, simply add a noindex robots meta tag. Follow this step-by-step guide –

1. Again login to your Blogger Dashboard and go to Template > Edit HTML.
2. Now find <head> tag and add the following code just below it:

   <b:if cond='data:blog.pageType == "error_page"'>
   <meta content='noindex,noarchive' name='robots'/>
   <b:else/>
   

3. After this, tap the “Save theme” button. That’s it.

We hope you find this guide helpful to customize the 404 error page of your Blogger blog. If you are facing any problem, let us know in the comment section.