Making a Helpful 404 Error Page

It’s a part of your website that you hope nobody will ever see, but having a well thought out 404 error page will help users get back on track if they arrive via a broken external link, a mistyped URL, or simply a navigation oversight.

If a user arrives at a default WordPress website from a broken link, WordPress displays a simple “Not Found” message. Not particularly helpful, right? The user has no indication of why the page they were looking for is not found, nor do they have any options of how to proceed. A single click of their back button and you have lost a visitor.

“So what can I do to help?”

The simple answer is to offer a way out. If you can engage with that user, keep them on your site and guide them in the right direction, you won’t be leaving them frustrated. There are several easy methods you can employ to do this:

  • Explain what might have gone wrong
  • Provide a link to your homepage
  • Give the user a search bar
  • Include a blog archive or recent posts list

Additionally you might want to ask if the user could provide you with details on how they arrived at your 404 page. This would allow you to do a bit of research into what caused the problem and hopefully go ahead and fix it.

Pro tip: if you need to move a post or page don’t just delete the old one! There may be other sites linking to that page. Instead you should set up a 301 redirect to take users from the old location to the new one. By doing this you’re giving anyone that lands on the old URL the ability to find the new URL with no effort, avoiding any 404 dead ends.

Two Examples

mozilla.org

bluedaniel.com

Mozilla.org – Technically Perfect

Should a user get lost on Mozilla’s site they’re helpfully given suggestions as to why they reached the 404 page. Mozilla also politely request a bug report and offer a link back to their homepage. They even drop in a cheeky Call-to-Action to download their product. It’s not the most exciting page in the world but with regards to functionality it ticks all the necessary boxes.

However, if you are looking for something more exciting…

Bluedaniel.com – Beautifully Insane

Delightfully designed and totally on brand, Daniel Karcher’s 404 page is so full of detail it’s a shame that it will so rarely be seen. From the film posters to the graffiti on the wall, each element is 100% relevant to the overall content of the site as well as the individual page it appears on. There are no explanations to help the user out and the link back to the homepage could easily be missed, but that can be forgiven when you consider the time and effort that has gone in to making such an imaginative page.

or send a quick message here:

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Got an idea you'd like to discuss, a project you need help with, or a business you want to get off the ground? Send an email to:

[email protected]

Terms & Conditions

Privacy Policy

Cookie Policy