A 404 error on the web is what a web server responds with when it is tasked with serving up a resource that it can’t find.
1. It should still look like your website
If you don’t specifically tell your web server how to handle 404 errors, it will serve up a very plain and generic looking error page. That just says something like “Not Found – The requested URL was not found on this server.” on a plain white page. This is an unhelpful and rather painful roadblock for a user. A 404 page should look like an error page, but it should still look like your website. If you are using a CMS, this is probably already handled for you. If you have a static site, you can specify a 404 template through your .htaccess file.
2. Apologize
Nobody is trying to land on your 404. Most likely they came from a bad link either on your own site or out in the wild. They probably aren’t very happy about it, so this is a golden opportunity to apologize and hopefully turn that frown upside down.
3. Search
It’s possible the page they are looking for still exists, it’s just the URL has changed or it was incorrectly typed somewhere. Since your site should already have search anyway, this is a good opportunity to provide that search box front-and-center. This gives the user the opportunity to search for what they were trying to link to and dig up the correct URL for themselves.
4. Give readers useful links
Maybe the page they are linking to isn’t broken, it just doesn’t exist anymore. In addition to search, you may want to dish out some links they will find useful. Perhaps links to the homepage, the archives page, or other pages you already know are commonly visited / popular pages on your site?
5. Way to Contact / Report Error
It is possible a user landing on a 404 page is having some strong emotions about it. They could be very concerned, worried, or they could be down right ticked off. It is a good idea to give that user some way to release, and since you can’t hand them a punching bag, a contact form might do the trick. This is, of course, not only good for them but good for you, as you can learn about the problem in order to fix it or otherwise prevent it from happening again.
6. Automatic Reporting
Having users help report errors for you through a contact form is great, but only a small percentage of users are likely to do that. An alternative is to have your 404 page automatically report the error to you. There are many ways you could do this. A quick-and-dirty way to do it would be to make your 404 page a PHP file, and use the mail function to send an email of the URL that was landed on.
<?php
mail("[email protected]", "404 report", $_SERVER['REQUEST_URI'], "From: [email protected]\n")
?>
NOTE: The above code is probably fine for a small site but not very practical on high traffic sites. Writing the errors to a Database in those circumstances is probably more practical.
7. Humor
Even serious sites can get away with a little humor on the 404 page. This is definitely a good opportunity to loosen up a little and do something funny.
8. Redirect?
I’m on the fence about this one, but it’s possible to automatically redirect a 404 error to another page. Perhaps the homepage displaying a message about the error? Perhaps a search page with keywords from the URL parsed out?
9. File Size
You might be surprised at the amount of malicious activity that your web server has to deal with. One thing that surprised me a while back was how many requests there were for “weird” files. Things like requesting the favicon in strange subfolders or looking for random images that don’t exist. When these things don’t turn up, the server loads up your 404 page. Needless to say, serving up a full webpage for all these requests adds up to some serious bandwidth. Your best bet is to fight against these malicious requests, but you should also take care to consider the total page size of your 404 page size and reduce it if bandwidth is a major concern.
Agree with you, your 404 page should be hilarious. I subscribe some sites because of their impressive and funny pages.
I’d say also say you shouldn’t really expose the status code, the average user won’t know what a 404 or 500 means. Good article though!
If your site is targeted to tech-savvy users (like css-tricks is) it’s probably best to display the status code. The 404-code conveys what went wrong a lot better than the sentence “Sorry, but the page you were looking for was not found”.
Yeah I’m not sure on this one… Just because users don’t know what an error code means doesn’t mean never show it. Error codes give them information they can use to find out more about the problem.
Personally I think that it should always be included; as long as there is an explanation for it for average web users so they no what is going on.
To point out a best-use 404:
http://www.useit.com/asdasda
Jakob Nielsen shows the error code, and still remains helpful. I bet he’s got tons of research on that as well.
Actually that page is hideously designed and all but unreadable…so I would say that’s an example of a no-go.
I have to agree with Melody, it is pretty bad. Especially the common mistakes, the server should take care of the htm/html issue without worrying the user
If it’s a complex failure, you need the error code to get help (I’d love that code to have an associated english message, but hey). It should be small, and come
For a regular 404, I’m sure it’s so ubiquitous that EVERYONE has seen it. When you mention a 404 and a website, people usually know the page wasn’t working, because it’s universal and the default is to show the number.
It’s geeks who’ll take it one step further and point out every occurrence of ‘404’ in the world, but that’s because we’re special.
i prefer some really simple but big impact message, or some funny images for the 404 error page.
Nice article.
I also see that the site has been updated slightly (new Comments heading, and no more live previews … )
I do like the new Expore section a lot ! :)
Great article, thanks. This has got me thinking about our error pages. Over at SUSU.org we have a rather surreal error page… (try it)… something tells me it could be improved!
You can also use a tool called Linkpatch to help monitor and fix broken links, etc. http://www.linkpatch.com.
Get a free 5-site account here:
https://www.linkpatch.com/free/
Always love to see new 404 pages, we are a big fan of this sort of thoughtful detail.
One important think you missed is to make sure your error pages send the proper header information. Otherwise it is just another page, thus defeating the purpose of a 404. A simple tool like firebug will show you the response header info.
While ours is nowhere near as cool or funny, it has the fundamentals down. Have a look: http://www.tintedpixel.com/404
That really is a cute 404 page, but I did find it missing one true fundamental – you have typed -” missing uri ” should be url?
Thanks for the compliment! More info on URI can be found here: http://en.wikipedia.org/wiki/URI
Hey chris,
When i put the code in to send the email, I get an email with the URL of my 404 page.
Hey Justin,
Assuming my just awakening brain is thinking correct then for some reason you are being redirected to your custom 404 page when it is triggered instead of it being treated as some form of alias.
Try using $_SERVER[‘HTTP_REFERER’] instead of $_SERVER[‘REQUEST_URI’]. This will show you the page the user came from which should be the page they were trying to access.
Just an idea,
Dave Blencowe,
[email protected]
I would use both just so I know there’s probably a link leading to a dead page.
Oops, sorry for the double comment, but the code was stripped.
<?php
mail(‘[email protected]’, ‘404 Error Found’, ‘A 404 error was detected while a user went from ‘.$_SERVER[‘HTTP_REFERER’].’ to ‘.$_SERVER[‘REQUEST_URI’].’ .’, ‘[email protected]’);
?>
Chris,
To speak to #8 I would say no to redirection, but yes to trying to parse out key terms from the URL and then display an HTML sitemap and if some key terms match up to anchor text in your HTML sitemap then have that bold them to help with hand holding the user to where they need to be.
Although you have to account for the url just containing jiberish in the case that it does not have keywords or do “like” matching to identify word misspellings.
2nd that. No redirection—maybe the user just misspelled a word in the URL. If you redirect, there’s no way of correcting that ;-)
nice topic, but i saw similer in Smashing Mag, but its a nice one, thumbs up for u Criss!
Great article! I’ve seen many 404s that are amusing but useless, your tips have much more sense. I’ll try out the automatic reporting.
Humour is the way to go! I’ve never really given 404’s much thought – because i’m not a geek – but i will be in future.
I think that it should just be a page that look exactly like normal but apologize with a BIT of hummer! Some thing that can REALLY annoy me is when the page keep coming up with the same silly joke! I would have it laid out like a normal page but with the search box for more information.
Thanks for the info
Also is it just me or is the comment for gone a bit wired/boring. I preferred the old one :)
This might sound a bit silly, but try to forget what you do and don’t like about 404 pages. You guys are web designers. Unless your site is for web designers what you like is probably far removed from what users like (and understand).
A little humour can be a nice touch. But don’t forget that the 404 might come at the end of a pretty horrendous experience for the user, either on your site or the one they got the link from. They might not see the funny side of your witty design.
I often hear usability people complaining about 404 meaning nothing to non-technical users. This is true, but as long as you explain in plain English what has happened, there is no reason to remove the code 404. After all, many of us do know what it means.
Redirecting your users automatically is a bad idea. You need to concentrate on explaining what’s happened. Even if you provide a message on the page you redirect to, it’s skipping the step of explaining that something went wrong.
You’re not really helping anyone by redirecting them to another page. Just let them decide what they want to do.
My WordPress Site keeps an RSS feed with 404-errors. Pretty helpful!
http://banzaidesign.nl/wp-admin/options-general.php?ak_action=404_feed
How did you get WordPress to do that?
Dude. Simply awesome – perhaps a little geeky, but very interesting for a sysadmin. And yes, how DID you manage that? Specific plugin?
So in #6, is that php line just the first line in your 404.php page? If not, then where do you put this code? Thanks!
Hey,
That line of code is just a call to PHP’s native file function (http://www.php.net/mail).
It can go anywhere within your 404 page as long as it isn’t within a tag, the file has .php extension + is being run on a php enabled server and your host allows you access to the mail function (Some don’t due to spam usage).
As mentioned a database option might be more appropriate.
Dave Blencowe,
[email protected]
Very good advice, will have to follow this up on HiddenCSS at some point! *Goes off to redesign 404 page*
the humor angle is a good one, helps to make up for the annoying factor of being redirected to a page that doesn’t exist
also a good idea for search queries that turn up no results
The google search bar that automaticly picks words from the URL does a very good job.
For the rest, state “404”, explain what it is that happened, and what is recommended to do (go to archive, home) but also (check spelling, click here to report link)
That’s what I got.
-TEMC
You need to be able to look at it from the projects area of sale. If you are creating a professional website for a client then it is likely going to be more appropriate to create a 404 page that explains the error and then suggests other pages, all using the sites theme.
On the other hand if you are working on a Website that has a more relaxed atmosphere then a comical approach could work, give someone the incentive to carry on looking through the site and possibly neglecting a lot of frustration.
It’s all about judging your target audience, not what you prefer.
Dave Blencowe,
I made Google change their mind about their 404 page:
Before:
http://www.marketingmartin.se/sokmotorernas-fel-404-sidor/
Now:
http://www.marketingmartin.se/marketingmartin-far-google-att-andra-sig/
This is an awesome article, I’m definitely going to revisit my 404 page!
I’ve been using http://notipal.com/ lately. One of my buddies created it and I love it!
The Google Search box that github are using in the example is a script Google put out a while back to enhance 404 pages.
Apparently it’s meant to offer more specific suggestions too, but I’ve never seen it do that – I think they may have given up on that idea.
More info at http://googlewebmastercentral.blogspot.com/2008/08/make-your-404-pages-more-useful.html
Useful article, thanks for your tips.
Probably you might be interested in “How to Seo friendly and Creative 404 Page with WordPress” http://www.webair.it/blog/2009/03/16/how-to-seo-friendly-and-creative-404-page-with-wordpress/
I was thinking some times ago about 404 page and this how we handle out 404 http://geekcom.net/404.php
Great article. Error pages are often an after thought when creating a site, but a way to maintain a good relationship when things go wrong.
When automatically reporting errors send the page address and page that referred to help fix problems.
Personally I wouldn’t redirect, users may be confused why they have not got the content they wanted and may need to update an old bookmark. An error message on a redirected page may help but is unlikely to be as effective as a dedicated page. Also bear in mind the user may have simply mistyped the Url.
Good idea i think.
I will try to aplly it at my new design :D
good advice – and the same can apply for all errors that you display to users (mostly 403, 404 and 500)
you missed that you should send the correct headers to the browser (and for search engines).
as for displaying the error code or not – most people are web-proficient enough to know that 404 is ‘not found’, so I would include it – but make sure that you have some plainspeak descriptions of what the problem is.
also – with the auto-reporting – you probably want to include more details in your error report (especially for 500 errors) than you display to the user (don’t show them the SQL query that went sour).
I’d vote against automatic redirect… Seems a little jarring, and wouldn’t many users go back and try the non-existent page again?
Whether or not the page actually says 404, it should definately return a HTTP 404 response. This is not always provided by a framework and sometimes not handled at all. If your 404 page is returning a 200 response, there is nothing keeping Google or some other search engine from indexing it and returning it in their content. This even more likely to happen if you page returns a 200 response and doesn’t contain the “404 Not Found” message that is typically associated with a 404 error.
Every error page is a redirect by nature. I often make this page a clone of the index page enhanced by a comment. Redirecting to the homepage without any comment about what is going on is certainly the ayatollah-way of webhosting. Expect e-mails with the green typo “Were is my page?”.
I am a reader of logfiles. The major part of 404 errors is caused by links coming from outside. Those visitors are virgins to your website, therefore it is good to present (1) what has happened and (2) what your site is all about and (3) what wonderful and relevant content is waiting for them just around the corner. Besides an error information, I have a search menu. I would not recommend a form field for text search, because noone will use it on a website he doesn’t know. Present the main topics of your site. If someone did not found a certain picture of an elephant, get him into the section where all your animal pictures are, because he obviously is interested in animal pictures. The visitor may discover something he hadn’t expected. What can be better than this?
These are more “good usability suggestions” than industry standard “best practices”. What about setting a proper header for search engines? Google analytics tracking? Etc.
But… I absolutely LOVE the “oh snap” 404 page. Classic
Look into error codes, there is more than 404. If a redirect is in order, it’s not a 400-series, it’s a 300-series code.
Hey Chris there is a major typo in ur 404 page…..
“find some of our featured articles, and see our lovely sponors” it should have been sponsors
Good article. This will help SEO as well.
nice article. thanks for the info.
This was also covered in .NET magazine (in the UK) a few months back, tis worth checking out also…
Agreed. Apologies and humor are a great way to go. Also providing a site map on the 404 page can be very helpful.
Is number 6 (emailing) even needed? I’d personally just check the server error log every so often. AWStats (and other statistics scripts) have a list of which URIs caused 404 errors and how often they were hit, and this usually doesn’t require any effort to set up (every host that uses cPanel will already have AWStats accessible via cPanel, and other hosts usually have it in their admin panel too).
I love the article, but you mentioned several ways that they could have gotten to this broken page, why not do most of the work in figuring it out? Using your php $_SERVER variables to identity whether or not the request came from them typing it in/old bookmark (no REDIRECT_SCRIPT_URI), or a broken link on your own page (that they found before you did and the redirect script uri comes from your domain) and giving them useful links to solve their own problem or a more sincere apology because it really is your fault.
The search box seems like a great idea if they know what they are looking for but what if it’s just some link their friend sent them from whatever other url shortener the kids are using these days…
Just a thought to make it even more personal.
Not 404, but one of my favorite error pages…
http://www.woot.com/Errors/500.html?aspxerrorpath=/blog/viewentry.aspx
Their 404 page also address the geek-speak issue:
http://woot.com/asdask
Great post!
The 404 on my site ( http://www.pdwd.net ) re-directs back to the home page, but it is a one page site. The best solution for me I think.
A 404 error page is easy to implement and gives a professional touch. I think you should add the error code and the explanation, that way people who didn’t know what a 404 error is, have the opportunity to learn.
A funny angle is definitely a winner when it comes to ‘404 frustration’!
Good informative post by Chris Coyier on 404 error. I have learnt a lot from it.
Please, watch to my 404-page http://designfire.ru/404.php
Sory for bed english, i am ukrainian designer :)
Automatic Reporting is great :D
Good Article.
Although I think it depends on the size of a website but each of these suggestions are valid…I think providing alternative links is the best way to tackle the situation should the website be very extensive.
Should the website be relatively small in size then an apology works best in my opinion.
Nice job! At the moment I’m using a simple text, and a redirect after 3 seconds to de homepage. But as soon as I have some time I’ll work a little more on it, maybe putting some extra links in it, or a nice apology picture.
Here’s mine
http://www.room404.ie/error
A good practice – I’ve done this on site designs for a while:
http://www.scphotogs.com/error
How would I implement this in a blog environment though – the php there is a little more confusing to me…
404 page is a very good chance to make crazy things.
I’ve made over ten funny 404′ here:
http://chtivo.webhost.ru/404/
Thanks for the great post.
I’ll be off to create my 404 page right now.
I like the humor element to it – breaks tension and from a user’s point of view it helps relieve the situation.
Thanks a lot!!!
I think the best reason for 404 pages is to keep a dead page alive. If that page no longer exists, the 404 page helps keep the link active. For websites that feature products that are no longer available, I would keep the content there, add an unavailable note and simply remove the buy now button.
I develop for self an idea for error page 404
I must admit, a 404 page is something that i really should put a little extra time into.
Theres some excellent advice here and it definately seems worth the effort if it helps the visitors and reduces the confusion that they experience at times.
frankly with all idea listed above i’d like to add
tracking 404 pages with google analytics
its helpful
more information : http://analytics.blogspot.com/2006/09/tip-tracking-404-pages.html
i like it more than mail idea
Hey i’d really like this one too ^^
http://www.the-podcats.tv/404.html
make me smile ;)
Redirect is a big no-no (but unfortunately very popular). Consider e.g. a user
who has just manually typed “http://site-name/page-name.htlm”
into his address field. With a re-direct, he has to retype it from scratch;
without one, he can merely correct the spelling of “html”. The same applies
to a user who copies a faulty link from somewhere else (possibly an
email where he accidentally includes an interpunctuation sign), closes the
other application, pastes the URL—and now has to re-open the other
application, copy the URL, …
Few error pages will be funny enough to compensate for that annoyance.
An error page should always ensure that the original URL name is preserved.
A redirect is only acceptable when the correct page can be provided (301, 302)–but then it is not really an error page.