Make a customized 404 error page

The 404 error or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but either the server could not find what was requested, or it was configured not to fulfill the request and not reveal the reason why. 404 errors should not be confused with “server not found” or similar errors, in which a connection to the destination server cannot be made at all.

The default 404 error page is very ugly. Too simply and no way for user to get the useful information.
I would like to tell you how to make a customized one and what we need to put on this page.

1) Creating/Modifying the .htaccess File
In Apache web server, find the .htaccess file in the root of the website. Create new one, if you can not find that it.
Add the following code and save it.

ErrorDocument 404 /404.html

You will of course need to put a 404.html file in the main web directory for the above directive to work.

“ErrorDocument 404” will tell the server when the file requested can not be found, the /404.html will be displayed with HTTP status code 404.

2) Prepare your own 404 error page.
Use any editor to make your own 404.html
I prefer to put following information on this page.
* Tell user the page can not be found on the server;
* Which reason. For example the file is removed or moved from one folder to other foler.
* Give a site-wide search box. Let user has a way to search the correct page within the site.
* Put some category links.
* Add tag cloud, if you site is a blog.

3) Test the 404 error page
When finish your own page, it is time to test it.
Just type a URL, you know it is not exist.

The following screenshot is my current customized 404 error page.

My 404 error page has charset=utf-8. Because of the site has two parts. One is DavidYin’s Blog. The other is a Blog writing by my wife, Vivian, and me, in Chinese. So the error page is written in two languages.

I would like to emphasize that how we need to make a customized 404 error page.
The user came to your site and get a no meaning 404 default error. No useful information to help him to get the page he wanted. You may lost this user, which you attract from Search Engine or other related site. If he leaves your site within 2 to 5 second, that means he may never come back.
The customized error page is build to help the user find the right page and help you to retain your traffic.

Reference links:

  • HTTP 404 wiki
  • Yahoo’s error page, which use a meta refresh to redirect user to the home page of Yahoo.
  • Google’s error page is too simple.
  • Live search’s error page is a standard IIS error page.