Creating custom page for 404 File Not Found error
How would you feel when visiting a website you type a URL or click on a link and get the following ugly and horrifying message in your web browser?
I guess, not too comfortable. It feels like a website you are trying to reach is dead. Not a good feeling neither for you – the visitor, nor for that poor website which is about to lose a potential visitor.
Why can you get such a chilling message? The reasons could be many. For once, you may have misspelled the page URL while correctly spelled the domain name part; or you may have clicked on some link on a referring website that incorrectly spelled that web page file name; or you may have tried to access some old page that has been removed or replaced with a different one...
Why you need custom 404 Error Page
In any case, if you are a thoughtful webmaster, you may foresee such a frustrating “hard landing” and instead of abandoning your baffled would-be visitors, use this as an opportunity of providing them with a custom meaningful and helpful 404 Error Page.
A custom 404 Error page creates a user-friendly experience for your visitors even in the face of an error. Most of the users, when presented with a generic 404 Error page, will just click back to get out of the trouble. On the other hand, a well-designed custom 404 Error page is a great occasion not just to keep them on your site, but engage them in doing more to reach their intended destination.
Custom 404 Error pages are proven to keep your visitors engaged with your website, to increase user retention, and eventually turn your visitors into your customers.
Implementing custom 404 Error Page
Here, I am going to share with you how we did this for our own website, Lenetek.com.
What our custom 404 Error page conveys? First, we acknowledge the awkwardness of the situation. We also apologize for such an unpleasant experience, and we offer our visitors options to explore our website through its navigation menu. Here is how our custom 404 Error page looks like for this website:
Below are the three steps that you would need to make in order to implement the custom 404 Error page.
Step 1. Create HTML file
We have created an HTML file, gave it a name 404-error.html (it could be any name) and saved it in the /error-files directory (again, that could be any directory name). In the <head> section of the HTML file, we used the following:
<title>404 Error: Page not found</title> <meta name="description" content="Lenetek's custom 404 page"> <meta name="robots" content="noindex">
Step 2. Modify .htaccess file
In the .htaccess file in the root directory of our Apache web server, we added the following line of code:
ErrorDocument 404 /error-files/404-error.html
Note of caution. Do not use an absolute path such as https://www.lenetek.com/error-files/404-error.html in the above code line since in some web server configurations (e.g. Apache) this may result in so-called soft 404. It means that even though an attempt to access a non-existing web page results in displaying your custom 404 Error web page, HTTP return code is 200 (OK) instead of desired 404 (Error). The problem with the soft 404 is that for many automatic methods of discovering broken links this may be misleading as 200 HTTP return code falsely indicates that this link in not broken and therefore may be reported as a valid link.
Step 3. Modify robots.txt file
In the robots.txt file that is in the root directory of the Apache web server, we added the following line of code:
Disallow: /error-files/
This step might be a bit redundant as it somewhat duplicates the message contained in <meta name="robots" content="noindex"> meaning we don’t want Search Engines to index that custom 404 Error page, but there is no harm telling them twice "please do not index our custom 404 error web page".
Testing custom 404 Error Page
Now you need to check and make sure that if you enter a URL or click on a link to some non-existing web page under your domain name, your custom 404 Error page indeed gets displayed. For example, while you are here try acessing www.lenetek.com/aaa.html non-existing page on this website, and you will be re-directed to and see live our custom 404 Error page.
Another thing to check is to make sure that your custom 404 Error page actually returns HTTP status code of 404 for non-existing webpage. You can do that by going to the following website and entering there URL of a non-existing web page, e.g. www.lenetek.com/a .
Hope, you find this post helpful in setting up your own custom 404 Error page. In case you need help, Lenetek will be happy to do this for you.
Blog Home