Home About Us Contact Us Advertising Submit Site Link to Us Terms of Use Privacy Policy
 
 
NAVIGATION
DIRECTORY

Published: November 30 1999

INTRODUCTION

A 404 or Not Found error message is displayed to a website visitor whenever a file they requested could not be found on the server. Chances are that every now and then your visitors will see such an error on your website. When this occurs your server will display a default 404 error code, often using a template that your web hosting provider created. This can make your website look less professional, and if the user has just arrived at your site from a third party website or search engine, they are likely to leave without seeing what your site has to offer. To see what your current 404 Error page looks like, go to your website, and try to visit a non-existant page like http://www.yoursite.com/alsjdfl.html. If you're not happy with how the page looks, then this article will come in handy.

This guide illustrates how to create a custom 404 error page that can be displayed whenever your visitors attempt to view a non-existant file. Displaying your own customized error file consists of two steps:

  1. Creating (or modifying) your .htaccess file
  2. Creating a custom 404 error page

CREATING (OR MODIFYING) YOUR .HTACCESS FILE

.htaccess (short for hypertext access) files serve as directory level configuration files for Apache HTTP Servers. They are commonly used for restricting access, password protecting directories, customizing error documents and rewriting URLs. The .htaccess files are hidden from view, and apply to the folder in which they are located, along with any sub folders within that folder (providing they don't have their own .htaccess file). This guide will focus on the .htaccess file's ability to configure a custom 404 error page.

Check your root directory (the folder in which your homepage is located) to check if a .htaccess file already exists. If it does, you can add the following code to the bottom of it. Otherwise you can create a new file called .htaccess. If you use software like notepad, be sure to save the file using parentheses ".htaccess" to avoid having the software name the file .htaccess.txt or with some other file extension.

Below is an example .htaccess file:

ErrorDocument 404 /404errorpage.html

/404errorpage.html is the file that will be displayed in the event of a 404 error. This example file is located in the root directory (the folder in which your homepage is located). You should always define the file location using an absolute path as opposed to a relative path (/my404page.html instead of my404page.html) otherwise the reference won't work when displaying a 404 error for a file in a different level sub folder. [1].

You can name the file whatever you like, using the file extension that you like, but I suggest you make it obvious to yourself that it is a 404 error document. If you wanted to create custom error pages for a number of error documents, you could set the file location as something like /error_documents/404.html.

CREATING A 404 ERROR PAGE

Creating the 404 error page itself is a simple as creating a new page on your site. Be careful, however, with any images, links or references to CSS files, because this page could be called on from any sub folder in the site. For this reason it is prudent to use absolute rather than relative links [1]. See the example below:

<html>
<head>
<title>File Not Found</title>
<meta name="robots" content="noindex, follow">
</head>

<body>
<h1>File Not Found</h1>
<p>The URL you requested was not found</p>
<p><a href="/index.php">Return to the homepage</a></p>
</body>
</html>

Note the meta tag "noindex, follow", which states that search engine robots should not index this page, but should follow any links found on the page.

And there you have it. Upload the .htaccess file and the 404 error document to your server and you're done. Just make sure the reference to the location of the error document is correct.


Notes:
[1] To use an absolute reference, start the url with the forward slash /. For example if the file is located in the images folder, which is in turn located in the root directory, use the reference
<a href="/images/filename.gif">link text</a>. This link would work regardless of the location of the file that calls on it. A link to the homepage would simply be <a href="/">link text</a>. In contrast, a relative file reference would look something like:

<a href="./images/filename.gif">link text</a>
<a href="../images/filename.gif">link text</a>
<a href="images/filename.gif">link text</a>

 

Home About Us Contact Us Advertising Submit Site Link to Us Terms of Use Privacy Policy
© 1998-2017 Walshaw.com. All Rights Reserved.  

Walshaw.com is owned and operated by Walshaw Internet Services

ABN: 43 549 443 349