How to Create an Informative “404 Error” Page

  • 70 comments
  • Study of Design
  • Read Summary

    Key Points

    • There are two kinds of 404 pages - Informative and Uninformative. Try to add a lot more than just a simple search box to your 404 page.
    • Adding recent and popular posts to your 404 page is a great way to help your readers navigate through your blog. You can add both of these things with either a plugin or without a plugin.
    • Add a Search box to your page so people can look for information by the keyword.
    • Add contact information so people can contact you if they can't find something. Try to find the post for them if they contact you about it.

    Summary

    404 pages are one of the most important places on your blog. You need to keep a user interested in staying on your blog to find information. Whether they are looking for specific information, or anything - throw as much information as you can at them.

    Close

by Alex

Believe it or not 404 error pages are a very important part of your website. Just because it’s (hopefully) the least viewed page on your blog doesn’t mean it shouldn’t be paid attention to. The reason why it is so important is because it serves as a gateway for lost and misguided users on your blog.

You should always work your hardest to never let a user see a 404 page (unless it’s their fault they see it), however you need to be sure that you have a functional and informative 404 page, so when someone does see it they get back on track.

Before you start messing with your 404 page, or even before I really get into further detail, you need to remember the K.I.S.S concept (Keep it Short and Simple, or Keep it Simple, Stupid). That’s basically saying to keep your design simple and away from anything that may serve complex. So just remember that through this post.

The 2 Kinds of 404 Pages

I can categorize 404 pages into two different sections. Which of the categories can you classify your 404 page in?

The Good 404: Pages that are full of information that will help people get around the blog and find what they thought they were going to.

The Bad 404: Generally pages that are a waste of space, and basically show no interest or care for why a page on THEIR blog is not working. Usually you will see this negative sounding “Sorry, but you are looking for something that isn’t here” message and a search box if you’re lucky.

What are you?

So, which kind of 404 page do you want on your blog? The 404 page that says “Dude, you’re on your own”, or the page that says “Here, let me help you with that”. Take a look at your 404 page right now, and see which of the categories you fall into. I seriously hope you are in the “Good” category!

Note: Most of the information below will be directed at users with blogs powered by WordPress. However, non WordPress users can still take information from this article and put it to use at their own blog.

Ways you can make your 404 page more helpful

There are certain things I feel should be included on every blogs 404 page. Everything I list will all be focused around the idea of “delivering useful content to someone”, and of course how to carry out the specific action on the page itself.

1. Recent + Popular Posts

A no-brainer, and the first thing that should come to mind when creating a 404 page. I can understand if you are skeptical on adding these things to your 404 page though. I guess you can say there is more pertinent information to be added to the page, but I find that adding this information can help people find extra information they weren’t necessarily looking for before (which is a good thing).

Add Recent Posts to your blog with or without a plugin

If you want a plugin for this, check out the Recent Posts Plugin. It’s definitely the best available, and lets you customize the output of the plugin in nearly any way you want.

For some people, it is their goal to use as less plugins as possible. A very understandable goal, and many of us should try and do the same. So I did a little reasearch, and found a simple way to show your latest posts on your blog without a plugin. Just paste this code wherever you want it to appear:

<ul>
  <?php $recent = new WP_Query("showposts=5"); while($recent->have_posts()) : $recent->the_post();?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>

You can edit the number of posts shown by editing the value “5” to however many you like.

Code Found At Webdemar.com

Popular Posts (Plugin + No Plugin Options)

I recommend the popular posts plugin from Rob Marsh (same author of the Recent Posts plugin above). It has the same amazing options as the Recent Posts plugin does. Download it.

Paste this code wherever you want popular posts to display:

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

You can edit the number of posts shown by editing the value “5” to however many you like.

Code Found At ProBlogDesign

2. Search Box

Such an obvious thing to do, yet one of the most important things to add to your 404 page. You can’t expect the post the user is looking for will be in the “Recent Posts” or “Popular Posts” section. You need to add a Search form so people can look more in depth of your blog.

This is the code I use for the standard WordPress search:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
	<input size="20" type="text" value="Search..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="s" id="s" />
	<input type="submit" id="submit" value="Search" />
</form>

The neat thing about the code above is it will have the default “Search…” text, but when the user clicks on the input box, that text will disappear. A neat little effect I think. :)

3. Contact Information + Subscription Options

These are important too, more important than you think actually. Both of these options are pretty much ways to get the user more involved with the community, but more specifically: you.

Why contact information on 404 pages are useful

You should give users an option to be able to contact you to look for a post. You can either direct them to your contact page, or set up a custom contact form right on the page.

So with a contact form, a user has the option to send you an email and ask if the post exists, and if you can find it for them. Or, it could be a simple notice that a page is broken. It’s a win win situation for you, because you either get to help a user out, or you will be alerted of a broken URL on your blog.

Link to your Feed. Why not?

This is kind of a “Why not?” kind of thing. I think that if you put a URL to your RSS feed on your 404 page and ask people to subscribe in an inviting manner, they can feel more part of the community. I know how it sounds, inviting someone to follow your blog from a broken page can be weird. But I feel it is very beneficial.

Quick Suggestion: Add some extra inviting text to your RSS link. It’s on a 404 page, so I think if you say something like “Subscribing to our RSS Feed is a great way to stay up to date with our blog” and basically promising them they won’t have to ever see that page again if they subscribe. Sounds like good idea, right?

Examples of very informative 404 pages on blogs

Do you want to see an example of some cool 404 pages? Take the pages listed below as an example of what it means to have a great 404 page:

ProBlogger.net

ProBlogger.net

ThouShallBlog.com

ThouShallBlog.com

Blogsessive.com

Blogsessive.com

SmashingMagazine.com (Extremely Awesome by the way)

SmashingMagazine.com (Extremely Awesome by the way)

Other Tips

  • Download Random Posts by Rob Marsh. Every time the page is accessed, a random post can be displayed in the same format as Popular posts or Random posts.
  • Don’t put too much blame on the user. Basically, don’t be mean about it. I know people like to be funny and add little jokes but don’t overdo it.
  • Speaking of being funny and jokes – Add personality. Like on any other post or page of your blog, personality is key.
  • Link to the homepage of your blog. Get your readers off of that 404 page, and direct them to the real content.
  • If you need help creating a 404 page, check out the WordPress Docs.

Back to the top

by

To learn more about this author and see all of their posts, click below.

View Full Profile →

Discover the Real Meaning...

of what it means to master the psychology of your blogging practice. Find out one of the most missed aspects to blogging now, totally free!

Comments on this entry are closed.

Previous post:

Next post: