Custom Error Pages

Have you ever visited a website where you clicked a link and were taken to a none descript error page? Maybe you clicked a link on another website or in the search engine results and ended up at an error page. This is because the website you are visiting (or trying to visit) does not use custom error pages.

As a website visitor, wouldn’t you find something like this a little more useful:

404 error page sample

Than seeing something like this:

404 Not Found error sample

What are Error Pages?

Error pages are web pages shown to the website visitor when something has gone wrong with the web page they have requested. They will also been shown when there is a server error.

Common errors you may encounter:

  • 403 Forbidden

    You have requested to view a web page or directory to which you are not allowed.

    The webmaster may have put security in place so that certain web pages are not available to the general public (you have to be logged in to view) or that certain directories on the web server are not available for viewing.

  • 404 Not Found

    The web page you requested cannot be found on the web server.

    This is caused by:

    • A link to a non existing page was clicked.
    • A page has been moved or renamed and the web designer did not put a permanant 301 redirect in place.
    • Someone found an old listing in a search engine or directory results and clicked it.
    • The user made a typing error when manually typing the url of a web page.
  • 500 Internal Error

    There’s something wrong on the web server and it cannot process your request or update.

What are Custom Error Pages?

Custom error pages are pages shown to your website visitors which match your website theme when an error has occured within your website. The error can be caused by different things, the most common is the 404 – File Not Found error.

How Do I Create a Custom Error Page?

Note: Consult your web hosting documentation how to implement custom error pages, if allowed. A free web hosting account or when a hosted solution is being used, you may not be able to use custom error pages.

  1. Start by taking a copy of your website template and saving it with the appropriate name for the error you are creating it for. Consult the web hosting documentation as to the naming convention you should use.
  2. Include in the body (content) area:
    • a precise description of what has happened, written in plain english, not a techical explaination.
    • a search box if you have website search enabled on the website.
    • a link to the website sitemap. (the traditional type, not to be confused with the sitemaps for Google or Yahoo)
    • a list of possibly related links.
    • a contact form (or link to) so the visitor can notify you of the error.

    For more ideas on creating a custom error page, refer to:

    The Perfect 404 – Article on creating the perfect custom error page by AList Apart.

    Improving the Dreaded 404 Error Message – An article by usability expert Jacob Nielsen on creating a user friendly custom error page.

  3. Make the links to the images and styles for the page absolute as you may not know in advance what the relationship between your error page location and the page requested will be.
  4. Add the necessary server side instructions to implement your custom error pages.

    On an Apache server you would use the .htaccess file for example. Consult the web hosting documentation for what they require.

Further Reading on Custom Error Pages

3 Ways to Turn Your 404 Error Page Into a Marketing Asset

Trap 404 Errors on ASP and Report to Webmaster 404 Error Report – Used to catch 404 errors and report them to the webmasters email address. Also gives user a friendly message.

404 Research Lab – Research and information on custom 404 error pages.

Create a custom error page on 1and1 Linux Hosting

Custom Error Pages for Blogs:

Do It Yourself 404 – contains techincal information for different web servers.

A More Useful 404 – A List Apart

Designers Creative Solutions for Necessary Error Pages

25 Beautiful 404 Error Pages

60 Really Cool and Creative Error 404 Pages

404 error, File not found: What your custom error pages must contain!

“The Page Can’t Be Found” Coolest Error 404 Pages In Web Design

How To Design a 404 Page That Keeps Visitors On Your Site

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

18 Responses to Custom Error Pages

  1. Rostyslav Says:

    Great post! I dont understand why so many webmasters neglect having custom error pages. When someone follows a broken link or something, they dont stick around to fix the problem if they see a standard 404 page, they just leave. That is why it is imperative to have custom error pages. Great post!

  2. Eric Says:

    Error 404 Page is very important to company website. : ) Your post is great!

  3. Press Release Services Says:

    Great stuff. 404 is an important error page. And the ability to customize it is really awesome. Great job with the post. keep it up. Cheers

  4. error 404 Says:

    I agree, a custom 404 error page is a great service to your visitor and can help your bottom line.

  5. Graphic Design Seminar Says:

    I think having a 404 page is nice, it makes whoever went to your site and found a non existing page that you are not letting them down and that they can find their way back onto the path.

  6. web hosting reviews Says:

    Thanks for the post on how to create error pages.
    now i can create one.
    thanks!.

  7. Alex Says:

    I dont understand why so many webmasters neglect having custom error pages. When someone follows a broken link or something, they dont stick around to fix the problem if they see a standard 404 page, they just leave. That is why it is imperative to have custom error pages. Great post!

  8. Zack Says:

    When someone follows a broken link or something, they dont stick around to fix the problem if they see a standard 404 page, they just leave. That is why it is imperative to have custom error pages. Great post!

  9. Fatcow Reviews Says:

    I don’t understand why so many webmasters neglect having custom error pages. When someone follows a broken link or something, they don’t stick around to fix the problem if they see a standard 404 page, they just leave. That is why it is imperative to have custom error pages. Great post!

  10. Nickme Says:

    WordPress has its own 404 pages, which use the site template and may be easily setup to include links to existing relevant pages of the site (i.e. index page, main categories and so on).

    Another issue with 404 pages is that they need to return the ’404 – Page not found’ in header, in order to be accordingly classified by search engines, but this is another issue …

  11. Wordpress Designer Says:

    As a young designer, I used to ignore the 404 error page, but as I gained experience, I realized how important a custom 404 is. It is all about usability. How can you help your users find what they are looking fo.

  12. Coat Rack Says:

    Personally I like to have a custom 404 page that mimics my index page that way people have plenty of links within my site to click on and they don’t come up with the error message which I think makes them simply leave the site

  13. Razibul Hassan Says:

    Having a customer 404 page is really important for any business website. People often do typing mistakes and reach to your website on a non-existing page. Having the custom 404 message and items like feature product, link to your homepage, navigation makes sure the user does not go ways to your competitors website.

Custom Error Pages Was Mentioned Here:

  1. 404 Error
  2. Web Hosting Checklist
  3. Find Broken Links
  4. Free Web Hosting VS Paid Web Hosting
  5. Structure of Link Exchange and Article Pages

Join the Conversation by Leaving a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> within your comment.

By leaving a comment, you acknowledge that you have read our terms of use.