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
ThouShallBlog.com
Blogsessive.com
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.
The Discussion
Leave a Comment Read Again?← Previous Comments
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.
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.
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
Your blog looks awesome man. I like the gray background on the title. Great job with it. Did you make the whole theme yourself?
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!
That’s cool Nicolas, I didn’t know you were into all of that stuff. Just thought you were an SEO guy. :p
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!
Never thought about this before, and never tried it, but I will deffinitely set up a “good” 404 page when the time comes!
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!
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
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!
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
Cool idea Dennis, ask and you shall receive.
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
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
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.
Thanks man! I never knew I could maximize the 404 pages. I was looking for tips because I keep on getting the 404 pages.
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.
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
Awesome man, let me know how it goes!
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 ?
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?
sure Alex. Thanks for the mention.:)
Harish’s last blog post..Why You Should Promote Your Contest? And How ?
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
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)
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.
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..
@ 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
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.
I’m sure gonna tell you
I’m also going to make it sure its bit different .. 
Enk.’s last blog post..Create Custom Sidebar in Wordpress Blog
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
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
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
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 =-.
For your post theme my own error page 404 idea http://www.kontain.com/bickov/entries/36756/page-404/
A very cool and useful 404
http://www.cuoma.com/404
.-= Santiago´s last blog ..Disponible blacksn0w y blackra1n RC3 =-.
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 =-.
There’s a free WP plugin that does the job well. And never run out of visitors and all the traffic ever need.
Informative post, customization of your 404 page is the first step when improving your error page.
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 =-.
Great post, it’s nice to see someone giving out advice rather than just saying how important 404 pages are.
great work
Your suggestions have really helped us at our site. Thanks for posting.
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 =-.
very interesting, i have seen 404 page with funny picture and it make me laugh
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
what a great tips, i will do it for my blog immediately. i think recent topic will be a good choice
Thanks for the post going to review all of my 404 pages now
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.
very interesting and creative 404 page
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
Hey Alex, nice post on 404. I’d personally like to see your own 404 page, have u developed it?
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.”
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.
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.
Setting up a proper 404 page has saved me so much time and a lot of potential lost business.
i prefer Recent + Popular Posts..
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.
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
When compare with yet another related posts plugin, Recent + Popular Posts consumes less server resources, Personally prefers Recent + Popular Posts plugin for wordpress blogs.
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!
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.
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.
Comments on this entry are closed.