What would you have done if you were greeted with the "Page not found" message instead of this blog post?
Let me guess.
You'd have pressed the back button, and probably never visit my website again.
And if you had stumbled upon my website on Google and quickly returned to the search results page because of a 404 error, Google will also punish me on your behalf.
Your jumping back to the search results page tells Google that my website does not have relevant value-adding content for your keyword query.
As a result, my search ranking will sink to the bottom. 💔
There are several reasons a 404 error will appear on my page (which may as well be your fault).
Whatever it is, I can't expect you to take automatic action. It's my blog, so the onus to provide a great user experience is on me.
As a fellow website owner, your goal is also to keep visitors on your website, not give them reasons to leave.
The unfortunate thing is that 404 error is unavoidable, so there's no bypassing it.
But then, you can always turn your 404 page into a pathway that leads visitors further into your blog.
In this article, I want to help you create an engaging error 404 page that increases the chances of a user sticking around your Blogger website, in spite of the http status code.
How to create or edit a custom 404 error page for my blogger blog
1. Login to your blogger blog
2. Click on settings on your dashboard
3. Go to Errors and redirects on the Settings page
4. Click on Custom 404, then you can create or edit your custom page (see below)
If you just want to add a simple statement, you can type that in the space provided and click save
Now see what I have on my 404 page.
However, if you want a fancier 404 error page, you can enter an HTML code in the space provided to edit your custom 404 (instead of the simple statement above).
How to generate HTML for custom 404 page on Blogger blog
To generate the HTML for your custom 404 page, follow these simple steps:
1. Create a new post (like you do when you want to post a new content)
2. Enter the text you want to appear on your 404 page
3. Design your post by inserting images, adding links and formatting the text
4. Switch your blog post editor from compose mode to HTML mode (see below)
4. After switching to HTML view, copy the HTML code in the editor and paste it in the space provided for editing custom 404 on the settings page of your blogger dashboard (as explained earlier).
Note: Don't publish the draft post. You only need the code, not the post. Moreover, you don't want Google bots to find and index that page because you published it.
See the HTML of my draft post below.
I copied the code and pasted it in the custom 404 edit space as shown below.
After saving the code, below is what I have as my 404 page.
You'd notice that there is a bold 404 error on my page (just above the custom 404 that I just created). This is because a 404 error code is embedded in my blog's HTML.
If you are using a blogger default theme, you probably won't encounter this error.
However, if you are using a third-party theme for your blog, you might encounter this error, depending on the creator of the theme.
How to fix embedded 404 error page in my Blogger's HTML
To fix the problem of embedded 404 error page in your blog's HTML, follow these steps:
1. Go to Theme on your blogger dashboard
2. On the Theme page, click on the dropdown and select edit HTML
3. Click anywhere on your blog's HTML page and press CTRL + F to find an item. Then enter 404 in the search space. For my blog's HTML this is what I get:
In the above code, the selected part shows the 404 error that appeared above the custom 404 that I created earlier. If you can't get a clear picture, here's it:
<b:if cond="data:view.isError">
<div class="errorWrap">
<h3>404</h3>
<h4><data:messages
.theresnothinghere=""></data:messages></h4>
<p><data:navmessage></data:navmessage></p>
<a class="homepage btn"
expr:href="data:blog.homepageUrl"><data:messages.home/></a>
</div>
</b:if>
You might need a basic knowledge of HTML to understand better.
Whatever you do at this stage, DO NOT delete the WHOLE embedded 404 code. If you do that, your blog will stop displaying 404 error codes altogether.
What you need to do is to delete the unwanted part, as simple as that. You might want to ask someone who understands HTML to help.
In my own case, here's what I did:
1.
I changed the line, <h3>404</h3> to <h5>404</h5> to reduce the size. Then I moved it down (just before </div>) because I don't want it to be obvious.
I could have deleted that line, but if I do, search engines won't recognize my 404 page and may even display it in search results, which doesn't make sense.
2.
I created another line with tag <h4>:
<h4>Sorry buddy, the page you are looking for isn't here 💔</h4>.
I used <h4> tag because I want it to be big and visible to my visitors.
3.
I deleted the line: <h4><data:messages .theresnothinghere=""></data:messages></h4>.
See below.
Now, this is what my 404 error page looks like:
What are the features of an irresistible 404 error page?
Here are some of the things you can include in your custom 404 page to make it appealing to your visitors. Remember you don't have to use every single one on your page.
1. Search bar:
One of the best ways to stop visitors from abandoning your website halfway is to leave a search bar for them to continue navigating.
However, mere inserting a search bar in your custom 404 page will probably not get job done; you need to encourage them to do so by leaving a sentence or two before the search bar.
A good example of this feature is Smartblogger. You can be more creative with yours.
2. Links to your homepage and/or popular pages:
Since visitors can't access a particular page on your website as a result of a 404 error, you can as well direct them to other pages on your website where they can find value that's worth their time.
I used this style for the sample 404 page we created for my blog.
Let me show you another.
Now, isn't this beautiful?
3. Contact form:
Another way to ensure great user experience when visitors encounter a 404 error page on your website is to add a contact form.
This may seem a bit out of place, but when used rightly, it could change the overall experience of your visitors. It could make them feel noticed and cared about.
Check below example.
The result?
...Believe it or not, people did. In the weeks following the re-launch, we received several emails requesting all sorts of information that hadn’t made the jump to the new site.
4. An offer to join your newsletter or use your product:
This is more like telling your visitors, "Hey, I'm sorry you encountered this error. But you don't have leave empty-handed. Here's a parting gift."
The gift could be that your visitor gets to try your product/service for free (which comes after they have entered their email addresses).
Check out what Neil Patel did below.
5. A simple explanation of what could have caused the error:
Your visitors are human, so giving a sincere explanation of possible causes of the error can change their perception and improve their experience.
However, you should note that this feature works best when you combine it with any of the features above.
For example,
Notice how they gave possible reasons without blaming their visitors? Choice of words matters when using this style. Did you also notice the use of may when referring to possible causes of 404 error from the visitor's end?
6. Fun:
You could even inject a little bit of fun to improve your visitors' experience. I have come across some 404 error pages and was glad I did. Can you imagine?
See below example.
Common mistakes to avoid when creating a custom 404 error page
With a unique 404 page, you can provide more value to your users and even help them find the information they are looking for. But in your attempt to boost your branding and marketing efforts, here are common mistakes you shouldn't make:
1. Going overboard:
Overly designing your 404 page won't do you any good. A clean and straightforward 404 page is much more effective than an overly elaborate one.
2. Not including a 404 header status on your custom page:
Make sure you include a 404 header status on your custom page. If you don’t, search engines won’t recognize the page correctly. Google will keep displaying the page in search results and send you a deluge of soft 404 error messages in the Search Console.
Do you remember the embedded 404 error page that appeared on my blog? This is the reason I didn't delete the 404 line in my blog's HTML when creating my custom 404 page.
Conclusion
It’s not uncommon for blogs to have multiple broken links. So, if you can’t fix all of the broken links on your website (which is inevitable), customized error 404 pages are your next best solution.
Setting up a fun/engaging error page will also help you in retaining the user who mistyped a URL or clicked on your outdated website page from search results.
Recommended reading: How to submit your Blogger website to Google
