Good Practice for 404 Error Pages [updated 18/04/08]

April 4th, 2008 by Ewen Cumming

Almost every web user will have encountered a ‘404 - Not Found’ error at some point. After reading an interesting discussion topic started by Ben Bradshaw on the Web Standards Wiki about 404 good practice I decided to fix our site’s 404 error page.

You can view the discussion at http://webstandards.govt.nz/index.php/Talk:Handling_404s.

Our original error page wasn’t awful - it kept our page look and feel and had the site navigation down the right-hand side. But it gave no help to users on how to find the page they were looking for.

Old 404 error page

To improve the page I followed Ben’s suggestions and added some instructions to help visitors find what they were looking for. I also removed the 404 error as this is irrelevant to users trying to find a page.

To check out the new and improved 404 page see http://research.elabs.govt.nz/nonexistantpage.

In addition to the instructions on the page, we’ve made it smarter by attempting to guess where the user was trying to get based on the URL. Inspired by this Housing New Zealand Corporation 404 page we set up a similar page where a site search will be performed from the page name in the URL and results displayed under a ‘Suggestions’ heading.

See some examples in action:
http://research.elabs.govt.nz/research (searches for ‘research’)
http://research.elabs.govt.nz/category/web-service (searches for ‘web service’)

The algorithm is very simple:

  1. get the page name from the URL e.g. http://research.elabs.govt.nz/somepath/somepage.ext
  2. replace any underscores or dashes with spaces
  3. decode any encoded characters e.g. %20 will become a space
  4. search and display under suggestions (if there no results nothing is displayed)
[updated 18/04/08] - Currently, the search only covers posts on our site and not pages like ‘Contact Us’ or the category pages, we’re hoping to fix this in the future.

Wordpress 2.5 fixed this for us.

If you have any suggestions, improvements, or examples of better practice please leave us a comment.


Slashdot Digg Reddit del.icio.us Facebook Technorati Google StumbleUpon

1 Star2 Stars3 Stars4 Stars5 Stars (108 votes, average: 2.61 out of 5)

Tags: ,

One Response to “Good Practice for 404 Error Pages [updated 18/04/08]

  1. Andrew Russell says:

    A great example of a customised 404, but without your suggestions is here:

    http://talklikeapirate.com/err404.html

    It is always good to support the underlying message of the site. ;)

    Andrew.

Leave a Comment





Is rain wet or dry?