Creating a Custom 404 Page for your Website

The 404 or “Not Found” is the error message displayed whenever someone requests a Web page that is not available on your Website. The 404 message is an HTTP standard response code indicating that although the client could communicate to the server, the server could not find what was requested. As there is no Web page to display, the Web server sends a generic page that says “Not found”. More from Wikipedia.

List of HTTP Response Status Codes

When you visit a Web page, your browser requests the data from the server through HTTP. The HTTP protocol is designed to enable communications between browsers and servers. The server returns a response message to the browser. The response contains completion status information about the request. A standard response for a successful HTTP request is a 200 OK. This is the list of HTTP status codes from Wikipedia.

Two essential steps are needed for your 404 page:

  • Creating your custom 404 page.
  • Configuring the server to display your page.

Step One: Creating your Custom 404 Page

Since a Generic 404 message can be frustrating to the user, it is better to create a custom page. This makes it easier for your vistors to find the information they need, and makes it less likely that they will leave your Website. A custom 404 page is an added advantage to your Website. It shows professionalism and that you care about your visitors.

Qualities of a Good Custom 404 Page

A good custom 404 page directs the visitor out of the 404 box. This means:

  • having the same look and feel as the rest of your Website.
  • having a clear message.
  • Telling the visitor what possibly went wrong.
  • Including the same navigation menu like the rest of your Website.
  • Avoiding auto redirection to other pages.
  • You don´t want search engine´s robots to index or archive your custom 404 page. Otherwise; it might be included in search engine results. To do that, include the following meta tag within the <head></head> tag of your custom 404 page:
<meta name="robots" content="noindex, noarchive" />

Step Two: Configuring the Server

Configuring the server to use your custom 404 page depends on the server´s type hosting your Website. This article covers the following Web servers:

  • Apache servers on Linux.
  • Windows servers.

There are two ways to setup your custom 404 page on Linux servers. You could:

  1. Use the cPanel.
  2. or Add the ErrorDocument directive in the .htaccess file.

I want to emphasize that these are general guidelines and they might not work for your specific Web server, or your Web host company might have different control panel.

Setting up your custom 404 page on Linux using cPanel

This video tutorial shows you how to setup your custom 404 page on Linux using the cPanel. This video requires Adobe Flash player, which can be installed from adobe.com.

Setting up your custom 404 page using “.htaccess” file on Linux

The .htaccess is the Apache´s directory-level configuration invisible file that allows you to manipulate the behavior of the Web server. Other Web servers handle the customization of 404 error pages differently. More from Wikipedia.

The .htaccess can contain all kinds of directives for the Apache server. To create an .htaccess file, open any text editor like Notepad or Notepad++, name it .htaccess (there is no extension).

If you already have an .htaccess file on your server, download it to your computer and open it with your favorite text editor.

Now open or create your .htaccess file and type the following directive:

#ErrorDocument directive, followed by the HTTP response code and a relative URL. 
#The URL begins with a slash (/) for local Web-paths (relative to Root folder). 
#This method has the advantage that robots will receive the 404 status response.  
#Replace the file “name/extension” with your custom 404 file. 
 
ErrorDocument 404 /doesnotexist.html

The above code will return the 404 Not found response from the server.

You might be tempted to type in the following code:

#ErrorDocument directive, followed by the HTTP response code and the full URL path. 
#Replace “yourdomain” with your domain name.

ErrorDocument 404 http://www.yourdomain.com/doesnotexist.html

The above code will cause the Web server to issue a redirect to another page. Also robots will receive the status 200 OK response from the server rather than the 404 Not found response.

Once you are done with your changes, upload the .htaccess to the root directory of your Website.

Tip: Since your custom 404 page might be served up from any subdirectory of your Website, make sure that all links in your custom 404 page are defined absolutely. Use href = “/index.html” or href = “http://www.yourdomain.com/index.html” to link back to your homepage instead of relatively like href = “../index.html” or href = “index.html”.

Setting up your custom 404 page on Windows Servers using Helm Control Panel

If your Website is running on a Windows server, there is only one way to setup your custom 404 page which is from your Web host control panel.

Tip: In order for the server to return the proper 404 Not found response code:

  • Fordynamicpages, use the URL option.
  • Forstaticpages, use the File option

Step Three: Test and Test again

Now test your custom 404 page by typing a URL that you know does not exist and see if your custom 404 page is displayed. Also check that all links in your custom 404 page are valid, including any images.

Common Mistakes with a 404 Custom Page

  1. Writing the wrong path or filename in the .htaccess file.
  2. Using relative paths in the 404 custom page instead of absolute paths.
  3. Getting from your custom 404 page the 200 OK response instead of the 404 Not found response. This is known as soft 404.

Soft 404?

Soft 404S are actually “Not Found” errors returned by a Web server as a standard Web page with a 200 OK response. There are two kinds of 404 responses: “hard 404” and “soft 404”. Google discourages the use of “soft 404s” because they can be a confusing experience for users and search engines. Instead of returning a 404 response code for a non-existent URL, Websites that serve “soft 404s” return a 200 OK response code. The content of the 200 OK response is often the homepage of the Website, or an error page. More from Google.

The proper behavior for an error page is to return a 404 response code.

You may also like...