Creating friendly and useful 404 pages
Here’s a couple of short and simple tips for creating better “not found” pages. I’ll also teach you how to use Twitter’s intents and mailto: links to help visitors alert you of dead links without them having to type a single word.
General tips
Dead links are inevitable; make amends on that page and provide ways for the visitor to find the original destination or at least other potentially interesting content.
Show and prepopulate a search field
Often the visitor is looking for a certain piece of content. In this case a search field will definitely be useful.
Try prepopulating the search field with relevant keywords. If the page URL is e.g. /articles/friendly-useful-404-pages, filling the box with “friendly useful 404 pages” will let the visitor search for the missing article without typing a single word.
Provide an opportunity to get back on track
Showing a list of links to commonly used “hub” pages will help the visitor find other relevant content.
At least provide a link to the index page. If your site is a blog, consider adding links to an archive page and to most commonly used categories or tags.
Dead links are your fault, not the visitor’s
I’ve seen some 404 pages show a tongue-in-cheek heading: “Oh no! You broke the site!”
Don’t do that. The visitor has done nothing wrong if they’ve clicked a link that you’ve placed on the page. It’s your fault if the URL is wrong. Don’t blame the visitor for your mistake, not even jokingly.
Let your visitors contact you
A kind-hearted visitor might want to notify you of a dead link to prevent others from ending up in the same situation. You should make this as easy as possible.
On my 404 page I show two contact links that allow sending an automatically generated message.
I’m using Twitter’s web intents and a mailto: link to add the following information into the messages:
- my contact information
- a short message
- the URL of the page.
The link formats are below. The GET variables need to be URL encoded; Eric A. Meyer’s page is handy for that.
If you’re dynamically generating the 404 page, you can just encode and insert the URL into the links that way.
Since my pages are static, I’m using a little bit of JavaScript to do that. Here are the important parts of my code:
If you’re not using any other Twitter features on the page, you can add the async attribute on that Twitter’s script tag to load it asynchronously. You can leave the tag out if you don’t want the link to open a popup.
That’s it, now your visitors can easily notify you of dead links without having to type a single word.
Do you have more tips for improving error pages? Leave a comment below!