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!

Willblogforfood April 6, 2009 at 6:01 pm

That’s one thing i have been meaning to do for a long time. I just threw together a new custom 404 page its very little work and it will do wonders for your site and the people lost on it.

Thumb up 1 Thumb down 0
Alex April 6, 2009 at 6:19 pm

You’re right, it doesn’t take much to make a 404 page. Just copy and paste some code snippets, maybe add a few plugins and you’re set. :)

Thumb up 0 Thumb down 0
Nicolas Prudhon April 6, 2009 at 6:16 pm

Very good post Alex, and the code snippets you give will be very useful I believe.
BTW, I have finished to “revamp” my blog too.

Nicolas Prudhon’s last blog post..Video About the Benefits of Human Visitors Optimization

Thumb up 0 Thumb down 0
Alex April 6, 2009 at 6:20 pm

Your blog looks awesome man. I like the gray background on the title. Great job with it. Did you make the whole theme yourself?

Thumb up 0 Thumb down 0
Nicolas Prudhon April 6, 2009 at 8:14 pm

Thank you, coming from someone as neat as you, it’s much appreciated!

Yes, I did the theme myself, so I have spend the last week between Photoshop, Dreamweaver, and my FTP program… since I was doing this live, my blog did look kind of weird from time to time when I was doing some “unsuccessful” experiments…

Nicolas Prudhon’s last blog post..I have lost my ranking in Google!

Thumb up 0 Thumb down 0
Alex April 6, 2009 at 8:24 pm

That’s cool Nicolas, I didn’t know you were into all of that stuff. Just thought you were an SEO guy. :p

Thumb up 0 Thumb down 0
Nicolas Prudhon April 6, 2009 at 8:29 pm

Ha ha ha! No, I’m more of an “all-in-one” computer guy, but I have specific interest in SEO I would say. Anyway, today to be any good at what we are doing, we need a more general knowledge in my opinion.

Nicolas Prudhon’s last blog post..I have lost my ranking in Google!

Thumb up 0 Thumb down 0
Evan April 6, 2009 at 7:35 pm

Never thought about this before, and never tried it, but I will deffinitely set up a “good” 404 page when the time comes! ;)

Thumb up 0 Thumb down 0
Nicolas Prudhon April 6, 2009 at 8:16 pm

Evan, at least you got an excuse… but many out there know about that but just tell themselves: “great, I’ll do that later when I have time”. Somehow, they just never tend to have time…
My best advice to you is just go ahead and do it now, it takes just a few minutes!

Nicolas Prudhon’s last blog post..I have lost my ranking in Google!

Thumb up 0 Thumb down 0
Dennis Edell April 6, 2009 at 7:39 pm

I’m in the bad seat. lol. Bee meaning to do this forever but just noticed, I don’t have a 404 page in my theme??

Btw, a contact link is good even for the simple reason of allowing a conscientious visitor to contact you about the fact that pages are mucked up….I have a few cool readers like that.

Dennis Edell’s last blog post..9 Qualities You Should Find In A Good Web Designer

Thumb up 0 Thumb down 0
Nicolas Prudhon April 6, 2009 at 8:19 pm

I know what you mean Dennis! At least for the WordPress users, there’s a default 404 page. Though not a good one, it’s still within your blog template which is much better than having the horrible blank page from Internet Explorer (in example), it comes up like a death sentence…

Nicolas Prudhon’s last blog post..I have lost my ranking in Google!

Thumb up 0 Thumb down 0
Dennis Edell April 6, 2009 at 7:40 pm

I see you need the edit comments plugin. lol

Dennis Edell’s last blog post..9 Qualities You Should Find In A Good Web Designer

Thumb up 0 Thumb down 0
Alex April 6, 2009 at 8:49 pm

Cool idea Dennis, ask and you shall receive. :D

Thumb up 0 Thumb down 0
Kai Lo April 6, 2009 at 8:55 pm

How would I do this for Blogger host? I hate being an oddball here :(

Kai Lo’s last blog post..Avoid Google Slap – Pagerank Penalty

Thumb up 0 Thumb down 0
Miami web design April 7, 2009 at 1:46 am

Good post Alex , 404 pages should not be ignored .The best way I would think is to redirect it to my homepage .And By the way it looks strange you toolbar PR has not increased this time (although its not that important)But even after that I was expecting atleast 4 for this blog

Thumb up 0 Thumb down 0
Alex April 7, 2009 at 5:24 am

We changed the URL of the blog, so all of the PR would be at http://www.blogussion.com/blog/. Haven’t checked what it would be yet, but I think I will just for fun.

Thumb up 0 Thumb down 0
John @ Professional Web Design April 7, 2009 at 2:52 am

Thanks man! I never knew I could maximize the 404 pages. I was looking for tips because I keep on getting the 404 pages.

Thumb up 0 Thumb down 0
Alex April 7, 2009 at 4:33 pm

If you get a lot of 404 pages, seriously look into fixing that. It’s really bad for your traffic, regardless of how awesome your 404 page is.

Thumb up 0 Thumb down 0
teenwebguru April 7, 2009 at 9:26 am

Good long posts Alex. I think i’m going to add some descriptions to my 404 error pages.

teenwebguru’s last blog post..My Step by Step List

Thumb up 0 Thumb down 0
Alex April 7, 2009 at 4:30 pm

Awesome man, let me know how it goes!

Thumb up 0 Thumb down 0
Harish April 7, 2009 at 10:00 am

Great post Alex. I have never known that there are even two types of 404 pages too. I think I have a good 404 page. Thanks for the post. It was interesting :)

Harish’s last blog post..Why You Should Promote Your Contest? And How ?

Thumb up 0 Thumb down 0
Alex April 7, 2009 at 4:32 pm

No problem Harish, glad you liked the post.

I checked your 404 page out, all I saw was “The page you trying to reach does not exist, or has been moved. Please use the menus or the search box to find what you are looking for.” Maybe you want to add a few things to it when you get some time? ;)

Thumb up 0 Thumb down 0
Harish April 8, 2009 at 10:01 am

sure Alex. Thanks for the mention.:)

Harish’s last blog post..Why You Should Promote Your Contest? And How ?

Thumb up 0 Thumb down 0
Simon | Teenius April 7, 2009 at 10:58 am

Nice post, Alex. If I’m honest I’ve never even thought about my 404 page, but will definately sort it out. At the moment I’ve just got one saying ‘Sorry, the page you’re looking for cannot be found’. Hmm, will definately sort that out :D

As a quick side note, is there anything we can do to help with SEO?

Simon | Teenius’s last blog post..Interview with Alex Fraiser (15 Year Old Blogger)

Thumb up 0 Thumb down 0
Alex April 7, 2009 at 4:31 pm

How do you mean? Like, how can we effect SEO on our 404 page? I don’t see any way if that’s the case.

Thumb up 0 Thumb down 0
Enk. April 7, 2009 at 4:50 pm

Once again a cool, effective post there Alex. I’m a little dis-hearted ’cause I myself was going to write something on 404 Page.. well no matter, I’m still going to write it.. :P

@ Simon,
No dude, 404 and SEO. Don’t meet anywhere. Point is if you are showing some recent posts or something like that, you just have to take care of Follow / No-Follow thing. Correct me If I’m wrong.

Enk.’s last blog post..Create Custom Sidebar in Wordpress Blog

Thumb up 0 Thumb down 0
Alex April 7, 2009 at 4:52 pm

Don’t be discouraged Enk, I’d love to see your post about it! Let me know when you write about it man. Comment it here, email it to me, send a trackback ( ;) ), whatever you have to do.

Thumb up 0 Thumb down 0
Enk. April 7, 2009 at 5:00 pm

I’m sure gonna tell you :P I’m also going to make it sure its bit different .. :D

Enk.’s last blog post..Create Custom Sidebar in Wordpress Blog

Thumb up 0 Thumb down 0
Miami web design April 8, 2009 at 12:28 am

404 pages are good for your SEO .For eg :- if you was having a page on your website and there were 4 websites linking to that page .It means you were getting 4 links for that page . Now if that page don’t exist on your website then what would happen to that link
juice ? either you can contact those websites telling them to modify there links and point them to new page or you can do a 302 redirect of that 404 page to your home page passing all link juice of that page to your homepage .

I hope it would clear your doubts

Gagan

Thumb up 0 Thumb down 0
Da brush April 14, 2009 at 9:39 am

Interesting tips, I should rework my 404 pages with some content and links to redirect my traffic.

Da brush’s last blog post..Paris Metro Map Brushes

Thumb up 0 Thumb down 0
Nokia Mobile Talk April 28, 2009 at 9:30 am

Hey guys here is my 404 page, tell me what you think please

Nokia Mobile Talk 404

Nokia Mobile Talk’s last blog post..15 Twitter clients for your Nokia smartphone

Thumb up 0 Thumb down 0
Jenny July 7, 2009 at 9:24 am

Hey, just stopping by from stumble. Great post. :) I’ll be back to read more of your updates. You seem to have a very interesting bloggy.
.-= Jenny´s last blog ..Dear Reader vol. #1 =-.

Thumb up 0 Thumb down 0
Alexander Bickov July 14, 2009 at 5:01 am

For your post theme my own error page 404 idea http://www.kontain.com/bickov/entries/36756/page-404/

Thumb up 0 Thumb down 0
Santiago November 5, 2009 at 4:29 am

A very cool and useful 404
http://www.cuoma.com/404
.-= Santiago´s last blog ..Disponible blacksn0w y blackra1n RC3 =-.

Thumb up 0 Thumb down 0
Bible Money Matters November 9, 2009 at 12:33 pm

My 404 page uses a wordpress plugin called Smart 404 that basically looks at the url the user was trying to go to, and then suggests possibilities of posts they might have been looking for on the 404 page. It also gives the option of using the search box or looking at our post archive to try and find what they’re looking for. It seems to work pretty well.
.-= Bible Money Matters´s last blog ..The Great Big List Of 75 Budgeting Tools, Finance Softwares And Iphone Money Apps =-.

Thumb up 0 Thumb down 0
Kendin Tasarla February 18, 2010 at 7:55 am

There’s a free WP plugin that does the job well. And never run out of visitors and all the traffic ever need.

Thumb up 0 Thumb down 0
Web Hosting UK March 8, 2010 at 11:26 am

Informative post, customization of your 404 page is the first step when improving your error page.

Thumb up 0 Thumb down 0
Personal Finance April 23, 2010 at 6:54 pm

Hi Alex,
Thank you so much for the easy and most understanding article. I implemented your suggestions. Please check it if you will please. Is the format correct?
Please check it here.

Thank you so much for such an informative and beneficial article.
.-= Personal Finance´s last blog ..Tips to get your career going in four explosive industries =-.

Thumb up 0 Thumb down 0
Web Design Ideas May 17, 2010 at 1:32 pm

Great post, it’s nice to see someone giving out advice rather than just saying how important 404 pages are.

great work

Thumb up 0 Thumb down 0
Arai RX7 May 25, 2010 at 9:46 pm

Your suggestions have really helped us at our site. Thanks for posting.

Thumb up 0 Thumb down 0
Trafficke SEO Consulting Services June 5, 2010 at 2:14 pm

I usually leave a site when I see a 404 page, but if it is interesting and informative, I may choose to stay find new content. So it’s important, in my opinion, to have a good 404 page. I use a Wordpress plugin on one of my sites to do the job. Great post!
.-= Trafficke SEO Consulting Services´s last blog ..Correctly Writing An Optimized Page Title & URL =-.

Thumb up 0 Thumb down 0
Lisa June 16, 2010 at 11:12 am

very interesting, i have seen 404 page with funny picture and it make me laugh :)

Thumb up 0 Thumb down 0
Melly June 17, 2010 at 1:13 am

Nice idea, i will try to make 404 more informative, or maybe ill make a list of recent posts and popular posts in my 404 page

Thumb up 0 Thumb down 0
Jack Luu July 11, 2010 at 1:06 pm

what a great tips, i will do it for my blog immediately. i think recent topic will be a good choice

Thumb up 0 Thumb down 0
Beachamp Web Design July 12, 2010 at 3:32 pm

Thanks for the post going to review all of my 404 pages now

Thumb up 0 Thumb down 0
Vamban Blog July 17, 2010 at 3:32 pm

Hi alex

Here i found some cool 404 error pages
http://www.instantshift.com/2009/03/24/creative-404-error-pages-around-for-inspiration/

Seems good and creative collection though. :)

Thumb up 0 Thumb down 0
SQL Server Tutorial July 22, 2010 at 11:48 pm

very interesting and creative 404 page

Thumb up 0 Thumb down 0
Patricia August 9, 2010 at 12:52 am

Wow. Now I can appreciate why 404 page so important. You have taught with clarity and great understanding. Will now go and sort something for my blog. Have signed up for the newsletter so look forward to more great information that will get me more confident with all the techie stuff I need to have a great blog. Thanks again for all the articles you make available. Feel I am learning heaps
Patricia Perth Australia

Thumb up 0 Thumb down 0
Yasser Khan August 16, 2010 at 11:50 pm

Hey Alex, nice post on 404. I’d personally like to see your own 404 page, have u developed it?

Thumb up 0 Thumb down 0
Mandeep September 10, 2010 at 8:20 pm

Thanks for sharing, great information. That’s one thing I have been meaning to do is change the 404 error page on my blog. I think it would be a good idea to include contact information on your blog so visitors can notify you of the error. As you mentioned its definitely a “win win situation.”

Thumb up 0 Thumb down 0
web October 7, 2010 at 10:54 pm

I think kiss should be used for most pages. I do like the latest post and popular ones listed on 404 pages. I also want main page listed also. I do like the fact if they land on the 404 page it will list the latest post so they can find what they are looking fdor fast and easy.

Thumb up 0 Thumb down 0
napnipnop October 8, 2010 at 10:44 am

I really want to make that 404 page, but unfortunately I use blogger format. Could you tell me about build HTML code for 404 page? Great tips by the way. Well done.

Thumb up 0 Thumb down 0
Love Quotes October 14, 2010 at 1:14 pm

Setting up a proper 404 page has saved me so much time and a lot of potential lost business.

Thumb up 0 Thumb down 0
vijayraj @ methods2earn.com October 19, 2010 at 11:50 am

i prefer Recent + Popular Posts..

Thumb up 0 Thumb down 0
Joel October 20, 2010 at 5:42 am

Alex, You may aware with this but there are some nice wordpress plugins which make 404 pages much better. Rather than redirecting visitors somewhere else, i’d try showing them catchy 404 page.

Nice examples, BTW.

Thumb up 0 Thumb down 0
Anthony October 23, 2010 at 2:35 pm

Excellent idea on the 404 inclusion of information. So many people forget to include this in this page, thinking it does not matter and that the surfer will just continue to search around on the site. But really, it can turn off most websurfers in going elsewhere. If informative information is included in the 404 section, it can send many messages to your viewer that you care in helping them and you thought out clearly all that is placed on your site

Thumb up 0 Thumb down 0
Selvam @ Jobs November 8, 2010 at 5:47 am

When compare with yet another related posts plugin, Recent + Popular Posts consumes less server resources, Personally prefers Recent + Popular Posts plugin for wordpress blogs.

Thumb up 0 Thumb down 0
snsd hoot December 18, 2010 at 12:06 am

I cherished what you’ve got got performed here. The format is stylish, your written materials elegant. Nonetheless, you’ve got obtained an edginess to what you will be offering the subsequent. Ill undoubtedly arrive back once more but once more for a good deal significantly extra in case you shield this up. Dont do away with hope if not at the exact same time quite a few males and ladies see your imaginative and prescient vision, know you might have attained a fan appropriate the subsequent who beliefs what you may have received to say along with the way you’ve got presented by yourself. Quite very good on you!

Thumb up 0 Thumb down 0
sassy @ Motorcycle Apparel January 20, 2011 at 4:40 am

This is very interesting.
Also, this is very attention-grabbing.

I can’t stop myself from reading your post.
I was very eager to learn.

Thumb up 0 Thumb down 0
Lisa Schmuck April 1, 2011 at 7:47 am

Nice Error Page ideas, I got some emails by some of our users requesting a good error page for out site. I will use the search box example and see how it works, thanks.

Thumb up 0 Thumb down 0

Comments on this entry are closed.

Previous post:

Next post: