Features and characteristics of a great 404 error page

No matter how carefully you design your site, visitors will always request a page that is missing, moved, or non-existent (especially if you experiment with your site structure frequently). This past week, I’ve been obsessed with HTTP 404 errors and working on creating a better 404 Not Found page. The default 404 page for WordPress offers the opportunity to search the blog, but you should go another step. Usability is one of (if not the) key trait of a great website. If thought has gone into even your 404 error page, then I’d guess that much thought has been put into your entire site.

Features and characteristics of a great 404 page:

  • A link to the site map that lists all articles and the home page
  • A search box
  • A distinctly minimalist look
  • Remove the jargon (i.e.- what’s a 404?)
  • State the reasons someone would reach a 404 page (A mis-typed URL, a out-of-date search engine referral, a broken (in-site) link) and then do something about it
  • Notify with either a user input form or automatically with server side scripting the site owner so that the problem can be fixed (In WordPress, you can email yourself using the code at the end of this article)
  • Contact information for the site owner (after all, it’s your site that is broken)

Most of this list is taken from A List Apart, The Perfect 404. They use JavaScript to create many of the features above. Address the mis-typed URL by suggesting the visitor review the sitemap. You could tell them to look for some of the words in the URL. For the out-of-date search engine referral, you could grab the query string for popular search engines and add search results to the bottom of your error page.

As to a pleasing visual design (not to mention humorous content) of a 404 page be sure to look at Smashing’s Magazine’s collection of 404 pages and a second collection for inspiration.

What to do now

If the fault is truly yours and the invalid URL was not created by a crawler bot grabbing email addresses or trying SQL insertions, then you should open up your .htaccess file and redirect them. You shouldn’t have to use mod_write and regular expressions if you are soley creating a list of 1 to 1 relationship URLs. If you create websites for a living, I HIGHLY recommend familiarizing yourself with both powerful tools.

Email the site owner the invalid URL in WordPress

I recommend not sending this to your main email, but one of your secondary email addresses or filtering it to a folder (with the subject “[404 Error]“). I receive more than 10 notices a day from my sites. By placing the URL in the subject line, Gmail will group/thread message about same URL.

<?php
$url = $_SERVER[ 'REQUEST_URI' ];
$message = "URL Requested: ".$url_requested;
wp_mail("youremail@gmail.com", "[404 Error] ".$url_requested, $message);
?>

One Response to “Features and characteristics of a great 404 error page”

  1. [...] scenario: I log into my secondary Gmail account that I send my WordPress web sites 404 errors to and new mail pops up from Gmail Notifier in Growl. I click the email and it launches my [...]

Leave a Reply