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.

A screen shot of Google's fairly unhelpful 404 page
Google doesn’t help much. The robot drawing might help reduce the disappointment of encountering a dead link, but the page doesn’t even help search for the page the visitor was looking for.
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.

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.
A screen shot of a Twitter intent window showing a prepopulated message.
This is how the Twitter version looks.

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!

Related posts

Leo Nikkilä
Hello, my name is Leo Nikkilä.

I’m a mobile and web developer freelancing worldwide from Helsinki, Finland.

Right now I’m working with Android and Kotlin, and exploring functional programming with Elixir and Elm.

Send me mail at [email protected] or a message on Twitter!

Interested in hiring me?

Do you need quality code for your next big thing? Some extra oomph to your team?

Currently I’m not immediately available for new work, but feel free to contact me anyway and I’ll see what I can do.