Creating a 404 Error landing page is a best practice not only to a search engine but also for your website visitor. A customize 404 error page is proven helpful and friendly rather than the standard browser-issued version. Below are the defaults in what we can see in blogspot.

“Sorry, the page you were looking for in this blog does not exist.”

What is a 404 error page?

A 404 error is an HTTP status code expected as a result when a website is unable to return a given request or there is no URL to deliver. Technically, an Error 404 is a client-side error; implying that the error is your mistake, either because you got the URL wrong or the page has been moved or removed from the website. Another possibility is if a website has moved a page or resource but did so without redirecting the old URL to the new one. When that happens, you'll receive a 404 error instead of being automatically routed to the new page.

Well to simplify the whole thing, it’s just the way the servers tell you that you’re out of luck, the webpage you wanted is broken or missing, and you can’t see it, not now or maybe not ever. So go away!. The reason doesn’t matter.

Other than that, this issue matters to your SEO efforts. If the search engine spiders cannot find a default 404 page on your site, you’ve just thrown a dead end in front of them and they have no way to get over. Search engines can’t hit the Back button or use the other advanced features on your Web site. All they can do is follow links. If they come across a bad link and you don’t give them anywhere else to go, they’ll leave your site. This may result in entire sections of your site not being indexed. Creating a custom 404 page that includes links to other pages on your site helps prevent this from happening. You have to give the engines something to follow.

How to Add a Custom Error Page (Page Not Found) on Blogger?

Here I will share with you how to create your own landing page for 404 Error Page on blogspot like a pro.

[1] Go to Blogger Dashboard >> Select Blog >> Select Settings tab >> Search Preferences
[2] Find Custom Page Not Found, if not set click Edit
[3] Enter the code below and click Save Changes

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css"> #error-404 { border: 20px solid #c00000; border-radius: 200px 200px 200px 200px; height: 200px; margin: 0 auto 30px; text-align: center; transition: all 0.8s ease 0s; width: 200px; } #error-404:hover { border-color: #7c0000; } #error-404 span { color: #c00000; font-size: 100px; font-weight: bold; line-height: 200px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } #btn_s {display: block; float: left; width: 70px; margin: 0px; margin-left: 6px; text-align: center; vertical-align: middle; padding: 3px 0px; border: 1px solid #7a0000; cursor: pointer; background-color: #c00000; color: #FFFFFF; font-size: 14px; } #btn_s:hover{ background-color: #7a0000; } #in_s{ float: right; } </style>
<div id="error-404"> <span>404</span>
</div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Sorry for the inconvenience. We cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.</h2>
<h1 class="light-heading" style="text-align: center;"><u>What to do?</u></h1>
<h2 class="light-heading">Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</h2>
<h2 class="light-heading">OR search this blog..</h2>
<p>
<form method="get" action="/search">
<table width="100%" border="0">
<tr>
<td><input id="in_s" type="text" style="width:80%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
<td><input id="btn_s" type="button" Value="Search"></td>
</tr>
</table>
</form>
</p></b:if>

Now to test it, you can try http://yourblog.com/404 or whatever broken links and see it in action. Mine a little bit different though, I've added some gif animation and it was awesome!

Good Luck..



You may also like this [...]
Fellow Readers