5 Ways to Turn Your 404 Page from Blah to Aha!

Tuesday, November 15th, 2011
13 Flares Filament.io 13 Flares ×

The following article offers advice to implement on your website. Nexternal does not offer custom 404 pages at this time.

Click on a broken link or enter an incorrect URL and you will be brought to a “404 Page Not Found” page. What a user sees on this page depends on the website. It is also one of the most under-utilized opportunities to promote your brand or products.

By default, a 404 page will simply show an ugly “Not Found” message with varying degrees of seeming gibberish, depending on what browser you are using. At this point, the user will most likely click the Back button, which may or may not lead back to your site, depending on how they got there. Don’t leave it up to chance. Give them an easy way to end up where you want them.

Here are some ideas on how to make the most of this error page that people stumble upon by accident:

Offer a coupon. People generally don’t like getting lost, so help cheer them up by offering a modest coupon for your product. Make sure it’s clickable and not cluttered by text. It encourages the visitor to stay on your site and increases the chance that they’ll buy something.

Suggest where the visitor should go. Bring your site-wide navigation onto this page so the visitor has something else to click on besides the back button. Then in the main content area, you can offer up links to popular products or areas of your site. But don’t forget to include the original error message so you don’t confuse users how they got there.

Allow them to search. Offering a way to search your site from an error page gives impatient visitors a way to continue looking for what they want.

Entertain. What quality do a lot of people cite as a big plus in a relationship? Sense of humor. Here’s an example of a funny 404 page. Even though they did not intend for you to get there, its entertainment value just might be enough to get you to click into some other part of their store.

At the very least, brand it. Even if you are unable or unwilling to implement any of the ideas above, you should at least make your 404 page look like it belongs with the rest of your website. The default error page is completely devoid of style and color, and looks very unprofessional. Imagine this page as a visitor’s first impression. It happens more often than you think!

Now that you understand why you should customize your 404 page, here’s how to do it:
(Please note, the following instructions assume standard paid web hosting with FTP access on an Apache server. Certain web hosts may disallow 404 page customization or FTP access. Find out more from your web host.)

  1. Open a plain text editor such as Notepad (PC) or TextEdit (Mac).
  2. Copy the following text and paste it into your text editor:
    ErrorDocument 404 /page-not-found.html
  3. Save the file and name it
    .htaccess.txt

    Be sure to include the dot at the beginning of the file name.

  4. FTP this file to the main root directory of your website.
  5. Remove .txt from the file name on your web server, so that the file on your web server is now named .htaccess
  6. Create a new web page that will be your new 404 page and name the file page-not-found.html.
  7. FTP this new page into the main root directory of your website.

That should do it! If you need more inspiration or ideas for your page, here are 60 clever 404 pages.

Zoe is a web designer by day and a caped super-hero by night. Okay not really, but she really is a web designer at Nexternal with over 14 years of experience coding HTML, CSS, and other magical web things. She also enjoys helping others, which is a bit like channeling her inner hero.      Google+ Profile