{"id":2901,"date":"2009-06-22T06:21:24","date_gmt":"2009-06-22T13:21:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=2901"},"modified":"2009-08-27T18:43:40","modified_gmt":"2009-08-28T01:43:40","slug":"404-best-practices","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/404-best-practices\/","title":{"rendered":"404 Best Practices"},"content":{"rendered":"

A 404 error<\/strong> on the web is what a web server responds with when it is tasked with serving up a resource that it can’t find.<\/p>\n

1. It should still look like your website<\/h3>\n

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<\/strong> – 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<\/a> through your .htaccess file.<\/p>\n

\"\"<\/p>\n

<\/p>\n

2. Apologize<\/h3>\n

Nobody is trying<\/strong> 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. <\/p>\n

\"\"<\/a><\/p>\n

3. Search<\/h3>\n

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.<\/p>\n

\"\"<\/a><\/p>\n

4. Give readers useful links<\/h3>\n

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?<\/p>\n

\"\"<\/a><\/p>\n

5. Way to Contact \/ Report Error<\/h3>\n

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.<\/p>\n

\"\"<\/a><\/p>\n

6. Automatic Reporting<\/h3>\n

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.<\/p>\n

<?php\r\n  mail(\"chriscoyier@gmail.com\", \"404 report\", $_SERVER['REQUEST_URI'], \"From: chriscoyier@gmail.com\\n\")\r\n?><\/code><\/pre>\n
NOTE:<\/em> 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.<\/p>\n
7. Humor<\/h3>\n
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.<\/p>\n
\"\"<\/a><\/p>\n
8. Redirect?<\/h3>\n
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?<\/p>\n
9. File Size<\/h3>\n
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<\/a>. 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1255,"url":"https:\/\/css-tricks.com\/404-page-on-a-static-site\/","url_meta":{"origin":2901,"position":0},"title":"404 Page on a Static Site","date":"October 29, 2008","format":false,"excerpt":"Here's a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file: ErrorDocument 404 \/404.php The \"\/404.php\" part is the path to whatever file you want to serve\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/404example.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":939,"url":"https:\/\/css-tricks.com\/weird-file-requests-and-easing-server-stress-with-htaccess\/","url_meta":{"origin":2901,"position":1},"title":"Weird File Requests and Easing Server Stress with .htaccess","date":"August 29, 2008","format":false,"excerpt":"I got an email from Media Temple (my hosting provider for CSS-Tricks) telling me that I was going to exceed my \"GPU\" limit for the month. Wha? Turns out a GPU is a \"Grid Performance Unit\" and is a Media Temple specific way to calculate how much server resources you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191154,"url":"https:\/\/css-tricks.com\/redirect-web-page\/","url_meta":{"origin":2901,"position":2},"title":"How to Redirect a Web Page","date":"December 19, 2014","format":false,"excerpt":"A redirect is when a web page is visited at a certain URL, it changes to a different URL. For instance, a person visits \"website.com\/page-a\" in their browser and they are redirected to \"website.com\/page-b\" instead. This is very useful if we want to redirect a certain page to a new\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":207082,"url":"https:\/\/css-tricks.com\/styling-a-server-generated-file-directory\/","url_meta":{"origin":2901,"position":3},"title":"Styling a Server-Generated File Directory","date":"August 26, 2015","format":false,"excerpt":"The following is a guest post by Keith Knittel. Keith used a tutorial on this site to build his own customized file directory. I was like, hey, that oughta be a better-explained tutorial on this site. So here we are. You likely know that if there is an \"index.html\" file\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":770,"url":"https:\/\/css-tricks.com\/twitter-new-screencast-404\/","url_meta":{"origin":2901,"position":4},"title":"Twitter, New Screencast, 404","date":"May 17, 2008","format":false,"excerpt":"Tweet Tweet I've been enjoying the Twitter thing more and more lately. Here is my Twitter page if anyone wants to follow. Just for fun, I've used some of that extra space down in my footer here on CSS-Tricks for a little \"Twitter Updates\" section. Fun fun! I took what\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254018,"url":"https:\/\/css-tricks.com\/using-fetch\/","url_meta":{"origin":2901,"position":5},"title":"Using Fetch","date":"May 2, 2017","format":false,"excerpt":"Whenever we send or retrieve information with JavaScript, we initiate a thing known as an Ajax call. Ajax is a technique to send and retrieve information behind the scenes without needing to refresh the page. It allows browsers to send and retrieve information, then do things with what it gets\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2901"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2901"}],"version-history":[{"count":17,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2901\/revisions"}],"predecessor-version":[{"id":3582,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2901\/revisions\/3582"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=2901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}