404 Pages – Take the Ohhh Out of 404

Have you considered your 404 page design and functionality? Clients often appreciate when we add a little zing and extra functionality to 404 pages. If you would like some help on yours, feel free to give us a holler.

Before we get into the design and functionality, let’s review what a 404 page actually is:

In our words, “It is a page returned by the server that says the sought after content does not exist at the location given” or in the words of Wikipedia on 404 pages, it “is an HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested.”

What a 404 page is not:

It is not a a way to show content was moved.

If you structure your site properly, visitors should not be served a 404 page just because you relocate content. You should thoughtfully craft your site so that moved or relocated pages are redirected to the new content location with either a 302 (temporary redirect) or 301 (permanent redirect) server response code.

Embroidering a 404
One of Many Creative 404 Error Pages

We use 301 temporary redirects most often for blog moves where old links are changing to new links. They also are used when several related or duplicative pages are being merged or consolidated.  A 302 temporary redirect might be used when a page is under construction but will return to service soon.

In WordPress we appreciate the benefits of using the Redirection Plugin for 301 and 302 redirection work. We often create direct queries to load redirects into the Redirection Plugin, especially when doing a complete migration from another platform to WordPress.

A sign that you are imperfect.

Websites and blogs are actively altered on a regular basis.  Occasionally these changes inadvertently break links in the navigation. It happens, it’s okay. How you get them back on path is the real issue here.

How to Improve your 404 page:

While we work with many blog and CMS platforms, we find that WordPress is our most popular, especially with the improvements in the recent 2.8.x and 2.9 revisions to the core coding. Here are some ideas on how to improve your 404 pages and some ideas how to implement them in WordPress.

What a 404 Page should do:

  1. First and foremost it MUST tell the visitor that something is amiss. What they are seeking cannot be found in the manner sought. We have seen people try very creative methods to convey that message with some great graphics. Here are a few interesting examples of 404 images. Don’t get so creative that you miss conveying this important message.
  2. It should give the visitor effective tools to get where they intended to go in the first place.
    • The first and the most basic offering is to simply have a home link.  From there they can start over.
    • Providing a search function so that they can re-orient themselves is helpful.
    • Providing a list of suggested pages or posts can also be helpful.
    • Design your 404 page to resemble your other pages rather than using the default blank white error page which can really disorient the visitor. However also make it clear that what it is delivering is not the intended content and serve a 404 header for search engines to avoid indexing a 404 page.
  3. Minimize the imposition. This is a favorite improvement for clients — and even more importantly for their visitors! Some solutions simply pick the most likely post or page and send them there directly. This can be a mistake for several reasons —
    • The visitor will never know that there was a 404 error. They simply see that they landed somewhere and don’t really know why.
    • The relatedness of the page or post they are automatically sent to compared to the intended content to may not be high enough and could confuse them.
    • We prefer to give them a list of most likely links, and then let them choose, along with the other choices offered above.

We prefer to keep it simple by providing a list of most likely links, and then let them choose.

If you are a DIY WordPress user you might enjoy reading this article over at Yoast which gives some specific coding examples to spiff up a 404 Page Not Found Error Page. We often use a few of those techniques and even a few others. One of the methods that we do like is the use of “intelligent coding” which include tests to determine whether something useful was found and then react accordingly:
if (count($posts) == 0).

The 404 Error Page is worth giving some thought to.    We hope this helps you get your 404 page in shape.  Or, if that is not your thing give us a holler so that we can help you.

Happy Blogging Trails,

Don and Jim

This entry was posted in Website Enhancements. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *