Many people go through tons of trouble organizing their site, building their brand, tweaking their online presence… you get the idea. So, if you’re bound and determined to make sure that your entire website is as “together” as possible, why then do so many people forget about custom error pages?

What are custom error pages?

Custom error pages allow you to show a fully branded page in the event of an error occuring on the website. There are five primary errors that are typically handled with custom error pages:

1. 400 – Bad Request
2. 401 – Authorization Required
3. 403 – Forbidden
4. 404 – Not Found
5. 500 – Internal Server Error

Now that we know the names of the common error codes, let’s get a little more detail about each. After all, knowledge is power. For reference, I will also link you to W3’s HTTP/1.1 Specification which one could say is the definitive source.

400 – Bad Request

From: W3 HTTP/1.1 Spec

The request could not be understood by the server due to malformed syntax. The client SHOULD NOT repeat the request without modifications.

This is essentially a programming 404 (missing/unusable page). Think of it something close to “Either there is an error in the website, in the link you used, or in the application that powers the site.”

401 – Authorization Required

What this code means, is this area is protected by a username/password combination. Webservers are designed to use this status code both on the initial request for authentication, and when authentication fails. Most browsers will try credentials three times before they display an error page.

403 – Forbidden

A 403 error code means that the webserver processed the URL correctly, but for one reason or another, is refusing to display the page. A real life example of receiving a 403 error is when Mod Security blocks a URL that contains potentially harmeful code in it.

404 – Not Found

This has to be, hands down, the most common error code ever seen. It has even made it’s way onto T-shirts! So if there is one page out of all of these you would want to spruce up, this would be it. Google also has a handy widget for your 404 page which can help direct people to where they are meant to go. To get to it, go to your Google Webmaster Tools Dashboard and click on the domain you are working on. From there, go to Tools (on the left), then to Enhance 404 pages. I outline the directions as direct links are not possible, and it took me a minute to find myself.

500 – Internal Server Error

There are a number of issues that can cause the “Internal Server Error” message to be displayed. Bad .htaccess directives, bad file/directory permissions, or even the program completely erroring out.

Enough! How do I make a custom error page?!

Now that we know what is behind them, we have enough knowledge to impart some meaningful errors in our custom pages.

Here are the steps I recommend to create custom error pages with Apache:

1. Create a folder named ‘error_pages’ under your ‘public_html’ or ‘www’ folder. If you can access it by http://www.example.com/error_pages/ then you’ve set it up right.
2. In here, we create 5 files, let’s leave them blank for now:
   1. 400.html
   2. 401.html
   3. 403.html
   4. 404.html
   5. 500.html
3. You’ll want to add HTML to each file to present a display. I will cover this below.
4. To finish it up, we add the following to your .htaccess file in ‘public_html’ or ‘www’:
   

   ErrorDocument 400 /error_pages/400.html
   ErrorDocument 401 /error_pages/401.html
   ErrorDocument 403 /error_pages/403.html
   ErrorDocument 404 /error_pages/404.html
   ErrorDocument 500 /error_pages/500.html

Now for the content of the files. For the purpose of this example, I will leave these very simple. You will want to modify them with your design/layout code to ensure they match the design of your site. If your site uses templates, you can also the file extension .php instead of .html and they will be processed by php before being displayed.

The basic design

So now we’re ready for the page itself. I’m just going to show one example, but feel free to use it for the base of the others.

<html>
 <head>
  <title>Error 400 - Bad Request</title>
 </head>
 <body>
  <p>Something in your request didn't agree with our webserver. Please go back
  and try again.</p>
 </body>
</html>

So there you have it, the basics of how to set up custom error pages. Don’t forget to include your custom 404 widget on your 404 error page, to help people navigate to a page that will help, as opposed to leaving them at a dead end.

It’s nothing life changing, it’s not radical, it’s just one of those steps that you take to help ensure a cohesive website browsing experience, even when things go wrong.