Web Designing can be fun and interesting. Using the current cutting edge of web programming courtesy HTML5, CSS3 and jquery a beginner can easily create mind blowing web templates that look cool and refreshing. But all the hours of work to decorate the face of your site is wasted if the user encounters a bland looking error page containing technical jargon that leaves visitors scratching their heads. So custom error pages are the order of the day!!!
Advantages of custom error pages
- You can create an error page using the template you used to create your website. Thus even when someone encounters an error he/she will feel at home (or at your site)
- Custom error pages boost your search engine ranking.
- Since the error page is at your control you can write stuff that tells the user in plain English what caused the error.
So lets take a look on creating custom error pages on the mostly widely used open source web server software Apache HTTP server.
Step 1: Design the error page
I say design instead of create because you should use the same theme/template which the website uses for the error. The next man thing is that it should contain both technical and non technical information about the error. For example if you’re designing a “404 page not found” error page tell the user all the possibilities of arriving at this error. It could be due to an outdated link or a misspelt word or using a different case (lowercase or uppercase) for the web page name.
Use the php code $_SERVER[‘REQUEST_URI’] to display the name of the non existing page/directory. Include a search box and tell users to search for what they were looking for. Tell them to also take a look at your Sitemap. Save the file as 404.html or any name that best describes the error. Pages can be created for the following common error codes
| Error Code | Reason |
|---|---|
| 401 | Authentication Required This error occurs if you are prompted to enter a valid username and password to view a page and you press cancel i.e. if you try to view a htpasswd or htdigest protected directory/file |
| 403 | Forbidden This error occurs if you try to view a file/directory that doesn’t have permissions to be viewed to the world. This includes htaccess, htpasswd files and directories forbidden from listing out their contents |
| 404 | Page Not Found If a non existing file or directory is requested this error is displayed |
| 500 | Internal Server Error Occurs when wrong syntax is used in htaccess file |
Step 2: Edit the .htaccess file
Now that you’ve created the error page you should tell the web server to display it whenever an error is encountered instead of displaying its own default. So you need to create/edit your htaccess file. Search for it inside the public_html or www or htdocs folder. Don’t fret if it isn’t there just create a file named .htaccess (the dot at the beginning of the file is very important) Add the following line to that file.
ErrorDocument [error code] /[path to error page]
Example:-
ErrorDocument 404 /errors/404.html
Don’t forget to save the htaccess file.
Step 3: Testing the error page
Now for the fun part starts. Type your website’s url followed by some rubbish e.g. https://websistent.com/something Now if you’ve done everything correctly you should see your custom 404 error page. If you get a 500 Internal server error check for any syntax errors in the .htaccess file. If you see the error page file name, then its because you’ve omitted the slash in front of the file name path.
Bad practices for custom error pages
I’ve come across some websites which use their home page as an error page. Now this might seem simpler but just imagine the plight of a newbie who clicks an outdated link on that website and lands up on the home page. Such a person would be clueless on what has happened. Another bad practice is to show the website’s Sitemap.
[…] How to create custom error pages in Apache […]