Error codes in websites – create your own error pages

How to configure your website error pages with one simple .htaccess file. Control 404 Not Found errors as a well as 400 Bad Request, 401 Unauthorized, 403 Forbidden, 500 Internal Server Error and 503 Service Unavailable errors.

  • To start controlling your own website error messages you need to create a text file and name it .htaccess and save it.
  • Open it and write the following line:
    ErrorDocument 404 default
  • Save and upload the .htaccess file to your htdocs directory.

Note: Depending on your device and/or operating system you may not be able to view and/or create file names starting with a dot because those are hidden by default. You might tweak your device and/or operating system to make it show hidden files. But this is out of the scope of this article.

  • If your device and/or operating system don’t allow you to create file names preceded with a dot, then name it HTACCESS and save it.
  • In the same fashion, open it and write the following line:
    ErrorDocument 404 default
  • Save and upload the HTACCESS file to your htdocs directory.
  • Finally rename the file in the web server from HTACCESS to .htaccess.

Now, if someone types a nonexistent document, say example.com/iinnddeexx.html, he/she will see the generic 404 Not Found server response. Some of the causes for this response are:

  1. visitor mistyped the URL to a resource
  2. visitor followed a malformed link
  3. the requested resource was not found, it may have been moved or deleted

We recommend to create the .htaccess file with the default 404 rule as soon as you can. The advantage to use it is that the load on the servers is minimized. The disadvantage is that the default error message is not very useful for the average visitor.

A good compromise is to create a meaningful and lightweight 404 error page.

A meaningful 404 error page

When a visitor mistypes a URL to a photo or a page, or clicks on a malformed link, or tries to access a missing file, the visitor will see a 404 error page. This is a good opportunity for the webmaster to tell visitors they cannot reach the content requested. But you can also include a search box, or a contact form to report missing files and bad links, or a link to your homepage, or links to other pages and social networks such as Pinterest or Twitter.

A lightweight 404 error page

It is important to create the smallest 404 error page as you can. Try to make your error page slightly bigger than 512 Bytes just because there’s an old browser that will display it’s built-in error instead of your error page. We recommend you use just one HTML file with internal CSS and without images.

The first step is creating a 404.html file. Paste the following code:


<html>
<head>
</head>
<body>
404 Error. Sorry, the resource you requested couldn't be found.
</body>
</html>

Now save it. Next, upload it to your htdocs folder.

The next step requires changing the .htaccess file so the server loads the custom 404 error page 404.html. Copy the following code to your .htaccess file

ErrorDocument 404 /404.html

Save and upload the .htaccess file to your htdocs directory.

Now try to load a missing resource in your site, for instance, example.com/abcdefg.hij and you will see your custom 404 error page.

You can include more rules for other error states, for example:
ErrorDocument 400 default
ErrorDocument 401 default
ErrorDocument 403 default
ErrorDocument 404 default
ErrorDocument 500 default
ErrorDocument 503 default

And if you create more error pages you can include your pages to the rules for other error states, for example:
ErrorDocument 400 /400.html
ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 404 /404.html
ErrorDocument 500 /500.html
ErrorDocument 503 /503.html

If you have problems creating the .htaccess file or uploading it, we recommend to:
– login to control panel
– click in Online File Manager
– navigate to htdocs folder
– create a new file and name it .htaccess
– include the previous code and save it

References:

htaccess how to
htaccess rewrite guide