Useful 404 pages

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:
protocol=http
server ID=benohead.com
resource ID=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.

Broken internal link

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:

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.

Something like this does actually look good but what’s the purpose of this page ? Will someone even bother trying to see whether this site might be relevant for him ? Probably not…
oops

This one would have been useful if it actually told you how to find “other sections featured on this page”. I personally couldn’t find a link anywhere and left.
img404

This one doesn’t even tell you what happened or where you are:
404

This one is actually funny, it also tells you what happened but doesn’t even try to show you a way out:
404_tinsanity_net

This one has a clean 404 page, telling you what happened but seems to be determined to get you out of the site asap:
404_jackfish_com

This one also looks interesting but just gets the visitor wondering where he got and hit the back button as fast as possible:
404_d20srd_org

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:
404_amorphia-apparel_com

The next one is actually a very nice idea. The problem is only that it is a completely useless 404 page…
404_ook_co_uk

This one is funny too but I couldn’t even find a link to the homepage:
404

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:
404_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

Provide links to some pages which probably are of interest to most visitors. A nice example is the 404 page of GitHub:
404_github

It provides 3 links to the most probable places where you could find the content you wanted to access.

Here another example basically providing an overview of the navigation menu:
404_suspendedanimations_com

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

The visitor might be able to search himself for the content he wanted to get to. GitHub does provide a link to the Search page but it’s even better if a search form is embedded on the 404 page e.g.:
404_jhuskisson_com

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.

Leave a Reply

Your email address will not be published. Required fields are marked *