Increasing Conversions with Custom 404 Pages

The dreaded 404 page, can cause many frustrations for both you and your visitors. Nearly everyone that uses the internet has seen one, but when this occurs most commonly users will simply leave your site to go find one that “works”. This is of course bad news for you, costing you either a lost sale, or conversion!
When the world wide web was first getting starting the “white screen of death” was probably what you saw if you entered the URL incorrectly, but it doesn’t have to be this way now. You should build a custom 404 page that will help your visitors find their way to whatever it was that there were looking for.
 
Broken URLs
 
There are a lot of reasons and ways that URLs can become broken. The page might simply have been moved, renamed, or just plan deleted, a user could try typing in the URL and misspell or forget something, or a webmaster adding a link could have entered it wrong.
So to run through a little example here, a visitor tries coming to your site to learn more about your company or products/services and finds a “404 file not found page” instead. This could have happened in any of the ways mentioned above, but what really matters is that now they are frustrated by this, because they have not found what they want, and most likely will be moving on to a competitor’s site, which equals a lost sale/conversion for you. Or you could build a custom 404 page that will help them find what they are looking for and get them to that page which keeps them and happy and on your site, which equals you guessed it a potential sale!
So now let’s cover a few things you as a webmaster can do to help out. One thing you can do is when you move or rename a page is to create a redirect from the old URL so the user will get to the intended page they were seeking. The second is to create a custom 404 error page which I will cover in greater detail in the next section.
 
Custom 404 error page
 
Creating a custom 404 page is a relatively easy task to complete, but it’s often overlooked by many webmasters, but as you may now know it’s a very important page to create. As a webmaster you should also know that eventually a visitor will come to a 404 page no matter how well your site is laid out and put together, and  by providing this user with a mean to find and get the information they are after will go along way in keeping them on your site.
So let’s create a custom 404 page shall we? First you will have to know what type of web server platform you are using before we can do this. You will also have to decide weather you would like to create a dynamic or static page for this.
To help in this decision, I would suggest that if you have a larger site you create a dynamic 404 page, and if you run a smaller website a static page should do just fine. Being that this is just a short post I’m not going to cover building a dynamic error page here, but I will cover building a basic static 404 page as that is relatively easy to explain here.
 
What Should I include?
 
Well so far you have decided that you would like to create a custom static 404 error page, but what type of information should you include on it? And further more what type of stuff is best left off the page? When building the page I would suggest:
You make the page look and follow the same theme as the rest of your website.
You should also include the navigational menus on this page along with a sitemap and or a dedicated site search if you have these.
Towards the top of the page you should let the user know that the page they were trying to find doesn’t exist. Next you may want to offer a brief description of you website and or your product(s)/service(s). Then you will want to make a suggestion that they use the navigational options you have included on the page to find what they were looking for.
Some things that you will want to avoid usage of on this page:

  • Audio/video that automatically starts playing
  • Off putting pictures or animations
  • Advertisements

 
Remember that the whole point of having this page is to keep users on your website, so don’t distract them with unnecessary clutter on this page. So keep the page clean, easy to read and user friendly to get them back on your site looking at what they wanted to in the first place.
After creating this page you will want to save it to the root directory of your web site.  For the purposes of this post I will call this file 404.html.
Setting up a 404 page in Apache
Setting a custom 404 page in Apache is easy, after loading the file into the website directory locate the .htaccess file in the root directory. Edit this file with the text editor of your choice and include the following line in it:
ErrorDocument 404   /404.htmlYou of course may have to modify this depending on where your 404 page file is located and what you have named it.
 
If you are using an IIS server follow these directions:Open IIS and select the website you would like to work on. 
For IIS versions 5 and 6:

  • Right click the website and select Properties.
  • Then click the Custom Errors tab
  • Double click on the listing for status code 404 to edit
  • In the Edit Custom Error Properties box, set the Message type drop down to list the URL
  • In the URL text box enter in /404.html
  • Finally click ok to save you work.

IIS 7 and higher:

  • In the right pane, locate in double click Error Pages
  • Double click the listing for status code 404
  • In the Response Action group, select the option Insert content few static file into the error response
  • Click Set
  • In the Root Directory path text box, you can either type the physical path to the files‘ directory, or you can click Browse and navigate to the error file directory and then click OK
  • In the Relative file path text box, you will want to enter the path of the localized error file, in this example it would be for English only so you can enter that now. It could be written as \EN\404.html.
  • If you would like to use localized versions of a 404 error page, you will want to tick the Try to return the error file in the client language check box, and then click OK twice to save it.

 
In IIS 7 and higher versions you can also choose to edit the web.config file to accomplish this same task. Using my 404.html example again the code should look something like this:<?xml version=“1.0” encoding=“UTF-8”?><configuration>     <system.webServer>          <httpErrors errorMode=“DetailedLocalOnly”>    <remove statusCode=“404”/>    <error statusCode=“404” path=“404.html” responseMode=“File”/></httpErrors></system.webServer></configration>
After creating and implementing a custom 404 error page, you will want to test it out. To do this, in your browser type in your domain and following it with some random characters, that you know won’t bring up an existing page. If you have done everything correctly you should see the custom 404 page that you created. Now whenever your visitors try to find a URL that isn’t there they will be presented with this page and find their way to whatever it was that they were looking for, keeping them on your site giving you another chance to turn them into a potential customer.

No votes yet

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters (without spaces) shown in the image.