How To Create Custom 404 Page in Apache

Last updated on July 18th, 2024 at 04:55 am

By default, when Apache server is unable to find a requested URL, it returns a ‘404:Page not found’ error message. But this server response is not of much use since it does not tell users what they need to do next. Therefore, it is advisable to display a custom 404 page that is user-friendly. Did you know that Apache web server allows you to configure custom 404 error page for your website? Using ErrorDocument directive you can easily configure custom error page in Apache, without any coding. In this article, we will look at how to create custom 404 page in Apache. You can also use these steps to configure custom error pages for other error codes such as 403, 500, 502, etc.

Why Create Custom 404 Page

Generally, when web servers cannot find a requested URL, they display a plain HTML page with a terse error message. It is different from other pages on your site and does not contain any of their visual elements. So it is not user-friendly and makes the visitors think that there is something wrong with your website. This spoils their user experience and forces them to leave abruptly. It also affects search engine rankings since these URLs return a page with thin content. Therefore, it is recommended to design your own custom 404 page that can be displayed in case of 404 error responses.

How To Create Custom 404 Page in Apache

Here is how to create custom 404 page in Apache. For our purpose, we will use the ErrorDocument directive to setup custom 404 page.

What is ErrorDocument Directive

ErrorDocument directive allows you to serve custom error messages that are user-friendly, according to your website’s branding and style. You can add ErrorDocument directive in .htaccess file, virtual host configuration file or your main server configuration file, as per your requirement. Here is its syntax.

ErrorDocument <response_code> <uri>

Once you have setup this server directive, then when Apache encounters an error response 4xx or 5xx, it will internally redirect the visitor to the URI assigned to that response code, in ErrorDocument directive.

In addition, you also get access to a set of environment variables such as REDIRECT_HTTP_ACCEPT, REDIRECT_HTTP_USER_AGENT, REDIRECT_URL that are automatically set using request header. They help you get the proper request context of original request. They can also be used to customize your response based on variable values.

Now that we have a basic understanding of ErrorDocument directive, let us look at the steps to setup custom 404 page in Apache server.

1. Open .htaccess file

You will typically find .htaccess file in your site’s root folder (e.g /var/www/html/). You can open it or create it using vi editor

$ sudo vim /var/www/html/.htaccess

If you have not setup .htaccess but have setup virtual hosts, then you can also open your virtual host configuration file (e.g /etc/apache2/sites-enabled/example.com for your domain example.com)

$ sudo vim /etc/apache2/sites-enabled/example.com

Alternatively, you can also open the default virtual host configuration file

$ sudo vim /etc/apache2/sites-enabled/000-default.com

2. Configure 404 Error Page

Add the following line to .htaccess file. Please note, if your website has multiple .htaccess files, place the following directive in the file located at the root location.

ErrorDocument 404 /error404.html

In the above line, we specify the error response code 404 and the custom page error404.html to be served for it. You can also configure error pages for other response codes such as 500, 502, 403, etc.

If you are using Virtual host file, add the above line inside VirtualHost tag

<VirtualHost>
   ...
   ErrorDocument 404 /error404.html
   ...
</VirtualHost>

Please note, if you place the above code in .htaccess or virtual host file, it will be applicable only for that specific website. If you place it in the main configuration file, then it will be applicable for all websites hosted on your server.

3. Create 404 Error page

When Apache server encounters an ErrorDocument directive in response to an error, it looks for the custom error page in root folder /var/www/html. In our example above, we have assumed that our error file error404.html is located at website root folder /var/www/html/. Create custom error file error404.html using text editor such as vi editor, or a page builder like Squarespace, WordPress, or Wix.

$ sudo vi /var/www/html/error404.html

The above page will be rendered as it is. So you can add any kind of HTML code in it. Here is a sample.

<h1 >Error 404</h1>
<h2>PAGE NOT FOUND</h2>
<p>Sorry, we're unable to find the requested page.</p>
<p>Please click <a href="/">here</a> to go to our home page instead</p>

In the above page, we have displayed the response error code 404 along with the message saying that the page is not available. We have also instructed the user to click the link to our home page to proceed further. It is always good to mention a call to action (CTA) on these custom error pages. Otherwise, visitors get confused and leave your site.

4. Restart Apache Server

Restart Apache Server to apply changes

$ sudo service apache2 restart

5. Test Custom Page

Open web browser and request any URL that does not exist on your website. You should see the custom 404 page instead of Apache’s default message.

Useful Tips

There are a couple of important things to keep in mind while designing an error document.

1. Make the web page look similar to other pages on your site. This means using the same logo, header, footer, css styles, and visual elements. This will give a sense of continuity to visitors.
2. Display a clear call-to-action that tells visitors what they need to do next. It can be clicking a link, emailing administrator or making a call. Otherwise, they will leave your website.

Conclusion

Hopefully, this article will help you create custom 404 pages for your website. You can use these steps to configure custom pages for other error codes such as 500, 502, 403, etc. It is recommended to create separate error documents for each error response to avoid confusion. This will improve user experience and ensure that visitors do not leave your website unnecessarily.

Ubiq makes it easy to visualize data, and monitor them in real-time dashboards. Try Ubiq for free.

Also read :
How to Create Self-Signed Certificate for Apache
How to Use Apache bench for Load Testing
How to Remove index.php from URL
How to Install Fail2ban in Apache