404 is the code a Web server returns for certain pages the cannot be found when access is attempted. It’s what Web users see when they land on a page (usually when following a link or manually typing in a Web address) where the link location has changed, moved, or no longer exists. Webmasters have started using custom pages instead of the default Web server 404’s in an attempt to retain more visits and better serve the user base. Custom 404’s have become a trend over the years as more and more eBusinesses attempt to direct customers, who find pages that cannot be found, to a custom page that keeps users on the site giving them another chance to navigate to a different page.

There was a post the other day on eCommerce Cache about custom 404 pages that featured 26 different examples of top merchant 404 page designs and features. It features 404 pages from big names like Walmart, GAP, Netflix and more and includes ‘essential elements’ of a 404 page alongside the ‘things you should avoid’ using on your 404’s. The post is in depth and interesting, however I recommend using a different method to direct users who manage to land on a 404 page.

In the EC article, Shannon discusses several rules of thumb for 404’s which includes things like a matching theme to the rest of your site, company name/logo, message about the page, links to important site sections, search function, link to contact page or email and more. She also discussed things merchants should avoid using within their 404’s which include not leaving an explanation, misleading the users, messy or cluttered design and giving users too many options, which may become overwhelming.

I agree with Shannon on all her points and any merchants that currently use 404’s within their design (that don’t already follow those tips) should certainly take her advice. Custom 404’s do work and will help your users to stay on the site longer and gives them another chance to navigate if they happen to land on a 404 page (whether it’s a linking flaw or user error). In my opinion, it’s always better to show users a custom page rather than the default browser 404 page. It’s not that I disagree with Shannon’s points, it’s that I think there’s a better way than remembering all those custom 404 pages rules and spending all that time basically building another landing page.

I prefer using an htaccess redirect back to the index page over building a custom 404 page that explains to users that they are on a 404 page.

As the trend of custom 404’s has spread around the Web, it surprises me to see that so many Webmasters have forgotten about the good old htaccess file, which can be used to redirect users back to index or any other page on the site. With an htaccess redirect, you don’t have to worry about elements of the page to include or leave out, you don’t have to design and perfect another page on your site and it can even be easier to implement than a custom 404 (depending on your platform, hosting and file flexibility).

htaccess File Overview:

First, you will need to know that htaccess files can be used for far more than just errordocument redirecting. You can also use them for url rewriting and redirection, among other things. Before you create a brand new htaccess file be sure that you are not already using one within your file system as two htaccess files within the same directory will not work correctly (they can typically be found in the root directory, but may also be within sub-directories). If you are already using an htaccess you will need to edit the current file rather than creating a brand new file for handling errordocument redirecting.

In order to upload or edit an htaccess file, you will need to use an FTP program and a text editor like notepad. Your host may provide you the ability to upload files other than FTP, but you will still need to be able to edit files and upload them to the root directory.

Editing an Existing htacess File:

To edit an existing htaccess file, simply access the file on your server, open it to view, copy the code that’s in your current htaccess file and paste it onto a new notepad document. This will ensure that the code you are already using gets included into your new htaccess file. Once you have the code copied, proceed to the section below that discusses creating errordocument redirects for 404’s.

Creating a New htaccess File:

To create a new htaccess file, simply open a new notepad document and save it as .htaccess (be sure you include the dot before the letter H). Once the dicument is saved to your computer, you are ready to include the code and upload it to your server. Proceed to the following step.

How to Create an htaccess Redirect For 404 Errors:

Once you have the ability to edit your current htaccess file or have created one for the first time, you are ready to begin adding the code that will redirect users who land on a 404 page back to the site index page (typically the home page). There is a special command line for htaccess files that is meant to help Webmasters handle errordocuments and what users see who happen to land on any errordocument pages.

The command line will follow the following format…

ErrorDocument 404 /filename.ext or ErrorDocument 404 /directory/filename.ext

The command line is added to the htaccess file (ON ONE LINE ONLY) and depending on what directory, filename and file extension is assigned, it will redirect users to the corresponding page on your site rather than showing them the default browser 404 page. You can also use the same method to redirect users to a custom 404 page, or any other page on your site.

An example errordocument redirect to the index page would probably look like one of the following examples, depending on file extensions…

ErrorDocument 404 /index.html
ErrorDocument 404 /index.htm
ErrorDocument 404 /index.shtml
ErrorDocument 404 /index.php

An example errordocument redirect to a custom page would probably look like one of the following examples, depending on directory structure and file extensions…

ErrorDocument 404 /404.html
ErrorDocument 404 /404.htm
ErrorDocument 404 /404.shtml
ErrorDocument 404 /404.php

ErrorDocument 404 /errors/custom.html
ErrorDocument 404 /errors/custom.htm
ErrorDocument 404 /custom.shtml
ErrorDocument 404 /custom.php

Uploading & Testing Your New htaccess File:

Once you have created the file or edited the existing code it is time to save the file and upload to your server. It is always a good idea to backup your existing file before you overwrite it or save over the top of it. You can usually rename the old htaccess file to something like .htaccess1 so that it remains on the server and is easy to name back if something is wrong with the new htaccess file.

Once you have renamed the od file, save your new htaccess notepad as .htaccess (don’t forget the dot before the letter H). Use you FTP program or hosting provider to upload the new htaccess file to the root directory. You should see the new file once it has been uploaded to the server. After you have the file uploaded, open a Web browser and visit your site homepage. In the address bar, after the .com/, add a filename and extension you know doesn’t exist on your server (example would be .com/non-existent-page.html). See what page comes up once you attempt to visit the non-existent page. If you end up on the same page as you included within the htaccess errordocument command, you have successfully created a 404 redirect back to the homepage. If you end up on a default browser 404 page, check the code you have and be sure everything is correct. Common problems may include having multiple htaccess files (causes a conflict), command code on two lines instead of one or you may have failed to include a trailing slash or correct file extension.

Conclusion & Final Thoughts:

Whether you choose to use a custom page or not for 404’s is ultimately your choice. I believe that if you have taken the time initially to create a good homepage design that you probably don’t need to include a custom 404 page and that it would be best to redirect your users back to the index page. It seems like an extra step in the process to me and is certainly a good idea, but just creates extra work and landing page design considerations.

Remember, it is better to have one rather than none at all, so be sure to consider how you handle 404’s when building your eCommerce site.