The web keeps changing, pages come and go. Another development in recent years is that the keys of keyboards (virtual or not) seem to get smaller even though our fingers do not shrink. This all leads to the situations where a user requests a non-existing web page from a server. For such case, the HTTP protocol defines an error return code: 404. When a web server returns such an error code, the browser will display a standard page telling the user the page is not available.
Of course this standard page doesn’t look very nice and very often doesn’t really help either. So most servers will not return a 404 HTTP code but return a special web page (usually named after the 404 HTTP return code). Now, what do you need on such a page? Well it depends on how you want to handle this unexpected user visit.
First, you have to keep in mind that such a 404 traffic is still traffic and can be used to your advantage. Now let’s see why the user got to the 404 page:
Misspelled domain name
Well in this case, the user actually didn’t want to come to your site at all. Does it mean that your site is of no interest to him? Maybe not… Actually I’m pretty sure he has. For example, if there is a web site called linux-blog.com with a page called kernel.html. But instead of typing linux-blog.com, the user typed linuxblog.com, this site belongs to you but you do not have a kernel.html page… If the user is looking for a page on the Linux kernel, you blog (linuxblog.com) is probably a place where he might find the info he needs.
Lesson 1: Welcome visitors knocking at the wrong door since they might still enjoy what they find in here.
Misspelled the resource ID
The resource ID is the part coming after the protocol and server ID (i.e. domain name) in the URL. E.g. for https://benohead.com/useful-404-pages:
So if they got the resource ID wrong, they are still on the wrong server. They were looking for something which is in there but are just looking in the wrong corner. This is an easy one. The best solution is to help them find the right corner.
Lesson 2: Be fault-tolerant and help lost visitors get to their planned destination.
Requesting a deleted page
First deleting a page is never a good idea. If you change the path to a page, it’s always a good idea to have the old URL redirect to the new one. If you really want to get rid of a page, it might make more sense to keep the page, remove the content and maybe write an explanation why the content is gone. You can also let the search engines know that this page should not be indexed.
Lesson 3: Do not forget that bookmarking exists and once something is out there, it stays out there.
To avoid broken internal link, once you put a page out in the wild, you should check that the links in the page are actually working. Especially when you type in links, there are good chances that you’ll misspell something.
If the internal page you refer to doesn’t exist anymore, first refer to the previous lesson. Then there many tools out there to find such broken links. If your site is powered by WordPress, there is a plugin for that: The broken link checker. Otherwise you can use some online tool like:
- Google Webmaster-Tools: Go to Crawl Errors in the Diagnostics menu.
- W3C Link Checker
- Link Valet: It will recursively search for all links and will also display broken links.
Lesson 4: Visitors will find your 404 page themselves without you providing broken links.
How to make the 404 useful
There are a few practices which will help you create a useful 404 page:
Avoid error messages
Though error messages make it easier for you to figure out what the root cause of an issue is, displaying it to visitors will scare them and make sure they leave your site at once. It’s fine to say something went wrong because it obviously was the case and anybody will understand it but avoid cryptic error messages like the plague. Here are a few examples of messages which are easy to understand and will not scare visitors:
- We can’t find what you want.
- The page you are trying to reach is unavailable.
- This is not the web page you are looking for.
- The page you are looking for cannot be found.
- The page you were looking for appears to have been moved, deleted or does not exist.
Keep the visitor in there
Once the visitor is on your site (whether he meant to visit it or not), keep him there. Do not send him back with messages like:
- You took the wrong turn. Turn around.
- It looks like you found a dead link.
- The page that you are looking for does not exist, go back.
- Hit the back button.
All those are used on actual web sites but just make sure those visitors leave as soon as possible. Some of those messages (like the suggestion to hit the back button) actually try to help the visitor but it’s a waste for your site.
Actually say something
Ok, someone took a wrong turn, broken URL, misspelled something and landed on your 404 page. Now we’re all civilized people and you should at least tell them what happened and what their options are. There are too many examples of nice looking 404 pages which actually do not help the visitors get back on their feet. Displaying a funny picture, a crazy animation or some video might entertain the visitor for a few seconds but it’s not helping and will drive them away.
This one doesn’t even say what happened. If you know what 404 means, then you’ll understand, otherwise you’ll have to guess. It does provide a link to the homepage (by clicking on the image) but it doesn’t say anything and it’s not even visible that there is a link on the image:
Of course there are sometimes exceptions to this. If your site is very specialized and you know visitors who might want to stay will also not require any support from you side, then it’s fine. Here an example from www.acme.com:
Useful options for the visitor
It should now be clear that it’s very important to give your unexpected visitor a few options in order to keep him on your site. Here are a few things which might be useful:
Provide useful links
It provides 3 links to the most probable places where you could find the content you wanted to access.
If you’re using WordPress, you may want to display a list of recent posts:
<?php the_widget( 'WP_Widget_Recent_Posts', array( 'number' => 10 ), array( 'widget_id' => '404' ) ); ?>
Or a list of the categories with the highest number of posts:
<div class="widget"> <h2 class="widgettitle"><?php _e( 'Most Used Categories', 'twentyeleven' ); ?></h2> <ul> <?php wp_list_categories( array( 'orderby' => 'count', 'order' => 'DESC', 'show_count' => 1, 'title_li' => '', 'number' => 10 ) ); ?> </ul> </div>
Display a search form
If your site is powered by WordPress, you just need to add the following to the 404 page template:
<?php get_search_form(); ?>
Try to find the missing content
Similar to the “Did you mean” functionality in Google Search, you could also try and find the page the visitor was actually looking for or at least a similar page on your site. This of course only works fine if you resource IDs actually contain keywords/titles.
That’s what the Smart 404 WordPress plugin did. Unfortunately, this plugin hasn’t been maintained for years.
The Permalink Finder WordPress Plugin goes one step further and before the visitor is redirected, tries to find the page he was looking for and redirects him there. I personally it’s going one step too far. The visitor then lands somewhere totally different than he’d have expected and I guess it’ll just get him confused.
Another useful WordPress is the True Google 404 plugin.
Forget about 404
You’ve seen that many of the screens above actually tell the visitor is a 404 page. In many cases, the visitor doesn’t even know what you mean with 404. And what’s the added value to say it’s a 404 page ? Just keep it simple and easy and just tell the user what the page is about and do not try to confuse him with HTTP return codes.
A few more things…
You should also keep the following in mind:
- The 404 page should actually look like a page of your site i.e. have the same look and feel.
- It’s an error scenario but making the page look friendly (or funny) makes it easier on the visitor.