How to Set Custom Error Pages Using .htaccess

This article will guide you through configuring custom error pages for your website using the .htaccess file.

1. Access Your Website’s Root Directory

Navigate to your website’s root directory, typically public_html, using FTP or your hosting control panel’s file manager.

2. Edit the `.htaccess` File

If you already have a .htaccess file, open it for editing. If there’s no .htaccess file, create one by selecting "New File" and naming it .htaccess.

3. Add Custom Error Page Code

To specify custom error pages, add the following code to your .htaccess file:

ErrorDocument 404 /error-pages/404.html
ErrorDocument 500 /error-pages/500.html
ErrorDocument 403 /error-pages/403.html

In this example:

ErrorDocument 404 /error-pages/404.html: Customizes the 404 error page (Page Not Found).
ErrorDocument 500 /error-pages/500.html: Customizes the 500 error page (Internal Server Error).
ErrorDocument 403 /error-pages/403.html: Customizes the 403 error page (Forbidden).

4. Create the Error Pages

Create the HTML files for each error page (e.g., 404.html, 500.html, 403.html) and upload them to the specified directory (in this case, /error-pages/).

5. Save the Changes

Save the .htaccess file and upload it back to the server if necessary.

Explanation of the Code:

ErrorDocument: This directive allows you to specify a custom URL for a specific HTTP error code.
Custom Error Pages: Error pages are helpful for providing a better user experience when something goes wrong on your site, like a missing page.

Important Notes:

Ensure the Error Pages Exist: Make sure the error page files (e.g., 404.html, 500.html) are uploaded to the correct directory and accessible.
Test the Custom Pages: After adding the code, test each error page by visiting a non-existent URL (for a 404 error), triggering a server error (for a 500 error), or attempting to access a restricted page (for a 403 error).
Customize Your Error Pages: You can design your error pages to match your website’s branding, making the error experience less jarring for users.

By following these steps, you can ensure your visitors are redirected to informative and aesthetically pleasing custom error pages when issues arise.

Knowledge Base