How to configure Apache to use a custom 404 error page?

Where necessary, you may need to have access to a VPS server so you can follow how to implement the steps in this article. You can get a cheaper VPS Server from Contabo with 4vCPU cores, 8GM RAM, and 32TB Bandwidth for less than $5.50 per month. Get this deal here now

UPDATED: 9 months ago | Elijah Were

$5.50 Monthly

4 vCPU Cores | 8GB RAM

$15.50 Monthly

6 vCPU Cores | 16GB RAM

$17.50 Monthly

8 vCPU Cores | 24GB RAM

When visitors encounter a “404 Not Found” error on your website, it means that the server couldn’t locate the requested page. This error message can be frustrating for users and potentially harmful to your website’s credibility. To enhance user experience and maintain a professional appearance, you can create a custom 404 error page that provides helpful information and guides visitors back to relevant content on your site. Apache, one of the most popular web servers in the world, allows you to configure custom error pages, including the 404 error page. In this step-by-step guide, we will walk you through the process of configuring Apache to use a custom 404 error page.

Step 1: Create the Custom 404 Error Page

You need to create a custom 404 error page using the suitable technologies your website is built on. For example, if your website is built on PHP and CSS, then you can use any text editor or HTML editor to create this file.

After coding or designing your template, you have to save it with a recognizable name, such as custom404.html. In this file, you can add a friendly message, a search bar, and links to popular pages on your website to help users navigate back to relevant content. Below is the the sample HTML code for creating a custom 403 error page;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found - Custom 404 Error</title>
</head>
<body>
    <h1>Oops! Page Not Found</h1>
    <p>We're sorry, but the page you are looking for does not exist.</p>
    <p>Feel free to search for what you're looking for or explore our popular pages below:</p>
    <!-- Add search bar and popular page links here -->
</body>
</html>

You can also customize the content in the above code according to your website’s design and structure.

Step 2: Upload the Custom 404 Error Page

The next step is to upload your custom404.html file to your website’s root directory or any other directory where your website’s HTML files are stored. You can use FTP (File Transfer Protocol) or a file manager provided by your hosting provider to upload the file.

Step 3: Configure the Custom 404 Error Page

Now, you need to configure Apache to use the custom 404 error page. You can do this by editing your Apache configuration file or creating an .htaccess file in your website’s root directory. Here, we’ll demonstrate how to do it using a .htaccess file, which is a convenient method and doesn’t require a server restart.

So, you need to create a file named .htaccess if you don’t already have one in your website’s root directory, and you need to add the following line to your .htaccess file:

   ErrorDocument 404 /custom404.html

This line tells Apache to display the custom404.html file whenever a 404 error occurs.

Redirect to a specific page on your site

To redirect a 404 error page to a specific page on your site, you can use Apache’s ErrorDocument directive. This directive allows you to specify the URL of the page to which you want Apache to redirect users when they encounter a 404 error.

Here’s an example of how to redirect 404 errors to a page named “not-found.html”:

ErrorDocument 404 /not-found.html

This directive will tell Apache to redirect users to the “/not-found.html” page whenever they encounter a 404 error.

Redirect to a different website

You can also use the ErrorDocument directive to redirect 404 errors to a different website. For example, the following directive will redirect 404 errors to the website “example.com”:

ErrorDocument 404 http://example.com/

This directive will tell Apache to redirect users to the “http://example.com/” website whenever they encounter a 404 error.

Use module-rewrite module

Alternatively, if you don’t want to use the .htaccess file to define the custom 404 page, you can also use Apache’s mod_rewrite module to redirect 404 errors. Mod_rewrite is a more powerful tool for URL rewriting, and it gives you more flexibility in how you redirect 404 errors.

Here’s an example of how to redirect 404 errors to a page named “not-found.html” using mod_rewrite:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^/ not-found.html [L]

This code will tell Apache to redirect users to the “/not-found.html” page whenever they encounter a 404 error. The first two RewriteCond directives are used to check if the requested file or directory exists. If it does not exist, then the RewriteRule directive will redirect the user to the “/not-found.html” page.

You can use either the ErrorDocument directive or mod_rewrite to redirect 404 errors. The ErrorDocument directive is simpler to use, but mod_rewrite is more powerful and flexible.

Step 4: Test the Custom 404 Error Page

After configuring Apache, it’s essential to test whether the custom 404 error page is working as expected. To do this, try accessing a non-existent page on your website (e.g., http://yourwebsite.com/nonexistentpage). If everything is set up correctly, you should see your custom 404 error page instead of the generic browser error message.

Conclusion

Configuring Apache to use a custom 404 error page is a simple yet effective way to enhance user experience and guide visitors back to relevant content on your website. By following these steps and customizing the error page to match your website’s design, you can turn a frustrating error into an opportunity to engage with your audience and provide them with a better browsing experience.

Hire us to handle what you want

Hire us through our Fiverr Profile and leave all the complicated & technical stuff to us. Here are some of the things we can do for you:

Website migration, troubleshooting, and maintenance.
Server & application deployment, scaling, troubleshooting, and maintenance
Deployment of Kubernetes, Docker, Cloudron, Ant Media, Apache, Nginx, OpenVPN, cPanel, WHMCS, WordPress, and more
Everything you need on AWS, IBM Cloud, GCP, Azure, Oracle Cloud, Alibaba Cloud, Linode, Contabo, DigitalOcean, Ionos, Vultr, GoDaddy, HostGator, Namecheap, DreamHost, and more.

We will design, configure, deploy, or troubleshoot anything you want. Starting from $10, we will get your job done in the shortest time possible. Your payment is safe with Fiverr as we will only be paid once your project is completed.