Lost in Space: Build A Good 404 Page Not Found

Lost in Space: 404 Page Not Found

When building your website you need to take into consideration at some point in the future someone will mistype a url or find an old link that doesn't have a redirect assigned to it.

At this point the user will be directed to your 404 Page not found. This is a standard page that is set up by your internet service provider (ISP) or comes with your CMS eg Drupal.

This is where most sites let down their visitors as the standard 404 page is a bit of a let down. No real content for you find out where you should have been directed and sometimes not even any navigation!

Lost in Space

So I've clicked a link and I'm taken to your 404 page not found, I'm now lost in space!

No navigation, links to your core pages or a search facility. You should be doing all you can to stop people from clicking that back button out of your site and off elsewhere.

6 Things Your 404 Page Should Include

  • Navigation
  • Explanation of where you are and how to find what you are looking for
  • Search facility
  • Contact details
  • Content links
  • A link to your sitemap

Create Your Own 404 Page

Taking your basic html page and adding in the elements I mention above will give you vital seconds to persuade someone to navigate further into your site rather than click the back button.

Once you have created your new 404 page and uploaded it to your server, you will need to add this line of code to your .htaccess file:

ErrorDocument 404 /name-of-your-404-not-found-page.html

Some hosting firms take control of the 404 page away from the site owner so it's best to talk with your provider if this fix doesn't work for you.

Create Your Own 404 Page in Drupal

In order to have a custom 404 page in Drupal, you first need to create a page then add all the elements that provide your site visitor with an easy exit to the page they require.

Next take the url and navigate to Admin > Site Configuration > Error reporting and fill in the 404 field.

Drupal is configured to exclude primary links and blocks from appearing on error pages to improve performance but this doesn't really help your lost visitor. Here is the solution to get around this.

Display Blocks on 404 Page in Drupal 5

Place this code at the bottom of your themes template.php file:

function zen_page($content, $show_blocks = TRUE) {
  // Set additional conditions to change $show_blocks if you want here...
  $is404 = $_GET['q'] == drupal_get_normal_path(variable_get('site_404', ''));
  $is403 = $_GET['q'] == drupal_get_normal_path(variable_get('site_403', ''));
  $show_blocks = ($is404 || $is403) ? true : $show_blocks;
  // phptemplate_page is what gets called usually but the
  // theme function allows us to override it with the themes' name.
  // We're calling it directly here so we don't have to copy tons of code.
  return phptemplate_page($content, $show_blocks);
}

Code provided by Alan Davison.

Display Blocks on 404 Page in Drupal 6

There's a great little 404 Blocks module that you can install without any need for furtherconfiguration.

You don't really want the search engines indexing your new error pages so to get round this you will need to edit your robot text file and add this line under #Paths:

Disallow: /url-of-your-error-page

Nobody likes to be Lost in Spaacccceeeee so it's down to you to make sure your 404 page provides every opportunity to make that person stick around and find what they were looking for.

Comments

Jim's picture

Added to DrupalSightings.com

Richard Dewick's picture

Thanks for the addition

Thanks Jim, it looks an interesting site for all Druplers :o)

MarbleHost1's picture

Thanks for the sharing

Thanks for the sharing its very useful to me thanks

Jim's picture

nice post

This is very good stuff, i hadn't even known that you could do that, it is a very good idea that people can find stuff on your site even if a page doesn't exist, thanks.

Mark @ Irish Jewelry's picture

Great advice

We do have the site nav on our 404 page, but you've given me a couple of other suggestions to add to it. My favorite 404's always have a little bit of humor in them - if that's appropriate for your the site, of course.

Ed Roach's picture

404

Call me dense Richard, but it you normally get to a 404 page accidentally, how does one get there on purpose?

Richard Dewick's picture

Discover Your 404 Page

A moment of self discovery Ed, just go to any page on your website, then retype the url with a misspelling and you'll be taken to either a standard 404 page supplied by your hosting company or one that comes with your CMS.

us fidelis's picture

This post is very

This post is very informative. I had never thought of designing my own 404 page in order to persuade visitors to keep browsing my site. This is a great marketing tool and should be taken advantage of by anyone who is interested in having the most visitors using your site.

Jeet's picture

Some more suggestions

Good topic. You should elaborate on Navigation.

I would recommend that visitor be shown the 'best articles' of a blog on 404 page. The page should probably show some articles that may be related to the mistyped page (that's how parked pages work).

Search and sitemap are very important elements of a 404 page. If it's an e-commerce site, 404 page is a good place to show some discounts so that user sticks to the site.

Richard Dewick's picture

Ecommerce Discounts

@Jeet I like the suggestion of showing discounts or sale items on a 404 page for an ecommerce site, one way of keeping visitors interested and on your site.

Christina's picture

That's a life saver and it

That's a life saver and it looks pretty easy to implement. I'll try it tonight. Thank you so much!

recipes.eu.com's picture

thanks for the suggestion. I

thanks for the suggestion. I might start designing my own 404 page so that clients will not get lost. :0

Dan's picture

Excellent checklist

Thanks for providing this, Richard. Your checklist is excellent.

It's crazy not to have a custom 404 to capture all those visitors who would otherwise feel they were lost in cyberspace.

Dan