How To Create A Custom 404 Not Found Error Page Using .htaccess File

How To Create A Custom 404 Error Page Using .htaccess File

Have you ever seen a page with text similar to the following, usually discovered when you mistype a URL or go to a page that no longer exists?

“Not Found
The requested URL was not found on this server.
Apache Server at www.somewebsite.com Port 80″

If you have, what did you do, how did you respond to the page? Probably, like most people you just hit the back button and moved on to another website.

• For the owner of the website you were trying to reach, another visitor has just been lost.

The above error page is known as the, HTML 404 Not Found page error and if you don’t want to lose visitors to your website this way, then why not make a custom 404 page that’s friendly for your website visitors and gives them a way back into your pages.

For those interested, the full HTML error status code definitions can be found in RFC 2616 at http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html. Section 10.4.5 – 404 Not Found, states the following:

10.4.5 404 Not Found
The server has not found anything matching the Request-URI. No indication is given of whether the condition is temporary or permanent. The 410 (Gone) status code SHOULD be used if the server knows, through some internally configurable mechanism, that an old resource is permanently unavailable and has no forwarding address. This status code is commonly used when the server does not wish to reveal exactly why the request has been refused, or when no other response is applicable.

Who Needs A 404 Not Found Page?

Well anyone with a website where pages may be moved or deleted. This applies especially to bloggers using CMS software such as WordPress.org where the structure of the site can be redesigned and articles moves quite frequently. If you think about it, any site with dynamic content is prone to “misplaced links/pages”, we’ve all deleted or moved a page at sometime or other without thinking of the consequences. So, really everyone with a website should have a catch-all 404 Not Found page.

Who Doesn’t Have A 404 Not Found Page?

The easiest way of seeing if a particular web site has a 404 Not Found page is to force an error on the web site (don’t worry, nothing will be harmed in the process). So pick a web site and type an address you know does not exist. Try something along the lines of:

http://www.somewebsitename.com/xyz

Who’s Has A Poor 404 Not Found Page?

Strangely enough, Google has what I think is very unfriendly 404 page. I would have though Google would have redirected the error back to their search page, with a polite error warning but in actuality you get a very unfriendly (in my opinion) error page.

Try typing the URL,

http://www.google.com/oops

into your browser. You should be presented with Google’s 404 Not Found page.

Who’s Has A Good 404 Not Found Page?

Well, lots of web site have good 404 pages but you can have a look at mine. Try typing this address into your browser:

http://kingsolutions.org.uk/wordpress/oops

and you should be presented with my helpful and friendly version of the 404 Not Found page.

Requirements for Customizing the 404 Not Found Page

To customize your own 404 error page your web host must enable this facility for your website by allowing you access to the .htaccess file for your site. With commercial hosting such as JustHost, iPage, HostGator, Godaddy and many others this will be done automatically. Free web hosts such as Geocities or Tripod will not enable this facility so you will not be able to customise your 404 page if you host with these sites. Another good reason to get a proper hosting account.

The .htaccess file is what Apache web servers use to allow you to fine-tune your web server configurations at a directory level. Other types of web servers handle the customization of 404 error pages differently.

How To Create A Custom 404 Not Found File

Note 1: The following methods are for Linux based servers such as the Apache Server (the most popular). For Windows based servers you will have to find other tutorials, sorry.

Note 2: You will need a text editor such as Notepad to write/modify files. A WYSIWYG editor such as Microsoft Word will not work.

Note 3: You will administrator access to your server.

Where Should I Put The .htaccess File?

One .htaccess file in your public root directory will do the trick for that directory and its subdirectories. However, if you want a certain subdirectory to show a different 404 Not Found message, you can place a different .htaccess file into those directories. This will override any .htaccess file you have in the public root directory.

Step 1 – Create Or Modify The .htaccess File

If you have an .htaccess file, open it. If you do not have an .htaccess file, create one in your servers public root directory. Once you have your  .htaccess file open it in your text editor and add the following line:

ErrorDocument 404 /404.php

The “404.php” part is the name of the error page you are going to create, call it what you fell comfortable with, i.e.,

theMostGloriousErrorPageInTheWorld.php or
mySimple404page.html or
notfound.html

it’s up to you. The “ErrorDocument 404″ directive essentially tells the Apache web server that whenever it cannot find the file it needs it is to use the document specified in the URL that follows, 404.php, in my case.

Save the file as .htaccess in the public root directory of the server (upload the file if necessary).

Step 2 – Create The Custom 404 Page

Create the file, 404.php, or whatever you decided to name the 404 file using your text editor and add the code you want your users to see when the error page is called. Don’t forget to explain what’s happened and give them the opportunity to move to another page, your search page for example. Possibilities, link to…

• Your main page.
• Your search engine.
• Your site map.

Step 3 – Upload The Custom 404 File

If you are not working directly on your server, upload the, 404.php file, otherwise save the file in the same directory as the .htaccess file.

Step 4 – Check Everything Works

Make sure your browser cache is clear and type in a file you know does not exist on your server as in the examples above. You should be seeing your new and much more welcoming 404 Not Found page.

Step 5 – Double Check It – Advanced Users!

You can check you’re your custom 404 is actually sending a 404 header by using the Firefox extension called “Live Http Headers“. This utility displays the entire conversation between your browser and the website. With Live Http Headers open, type in a file you know doesn’t exist on your page and you should see the 404 Not Found header in the code. If you’re receiving the wrong code, edit the .htaccess file and try again.

Internet Explorer 404 Not Found

To ensure Internet Explorer 5 and up display your 404 Not Found page make sure the files size is over 512 bytes otherwise Internet Explorer will display “friendly error messages” and not your carefully crafted 404 page.

Meta Tags And 404

For the benefit of search engines, it’s a good idea to add,

<meta name=”robots” content=”noindex, nofollow”>

to the top of your 404 page just in case a search engine lands on it or gets the header wrong.

Common Errors With A 404 Custom Error Pages

1. The most common error people make with their custom error page is specifying a none existent file for their error page in their .htaccess file. This causes a loop in the web server. Check, double check and test that your coding is correct.
2. Always use the full URL path to files in both your .htaccess and 404 file, including the http://. Do not use relative paths.

Conclusion

Don’t lose the visitors you’ve worked so hard to obtain because a page goes missing from your web site. Create your custom 404 error page and minimize the number of visitors lost.