When a web page fails to load (e.g., 404 Not Found or 500 Internal Server Error), the server typically displays a generic error message.
While functional, these default pages lack branding and may confuse visitors.
Creating custom error pages allows you to provide clear, user-friendly messages, maintain consistent website branding, and guide users back to important pages.
This article explains how to configure custom error pages for 404 and 500 errors in both Apache and Nginx web servers.
Table of Contents:
Why Custom Error Pages Matter?
Default server error messages like 404 Not Found or 500 Internal Server Error look unprofessional and can drive visitors away. Custom error pages help maintain your site’s branding, improve user experience, and guide users back to important pages. They also support better SEO by reducing bounce rates and keeping visitors engaged.
Custom error pages help with:
- User retention: Visitors stay longer when guided correctly.
- Brand credibility: Keeps site design consistent.
- SEO improvement: Prevents search engines from flagging “broken” pages.
Create Custom Error Page Files
Create simple HTML files for your custom error pages inside your site’s root directory (e.g., /var/www/html/).
Example: 404.html
<!DOCTYPE html> <html> <head> <title>404 - Page Not Found</title> </head> <body> <h1>Oops! Page Not Found</h1> <p>The page you’re looking for doesn’t exist or has been moved.</p> <a href="/">Go Back to Home</a> </body> </html>
Example: 500.html
<!DOCTYPE html> <html> <head> <title>500 - Internal Server Error</title> </head> <body> <h1>Something Went Wrong</h1> <p>We’re working to fix the problem. Please try again later.</p> <a href="/">Return Home</a> </body> </html>
Configure Custom Error Pages in Apache
- Open your Apache virtual host configuration file with the following command:
sudo nano /etc/apache2/sites-available/000-default.conf
- Add the following directives inside the <VirtualHost> block:
ErrorDocument 404 /404.html ErrorDocument 500 /500.html
- Save and close the file (Ctrl + O, Ctrl + X).
- Restart Apache:
sudo systemctl restart apache2
- Test by visiting:
http://yourdomain.com/nonexistentpage
If your 404.html file loads, your configuration is successful.
Configure Custom Error Pages in Nginx
- Edit your Nginx site configuration file:
sudo nano /etc/nginx/sites-available/default
- Add or modify the following inside the server block:
error_page 404 /404.html; error_page 500 502 503 504 /500.html; location = /404.html { root /var/www/html; internal; } location = /500.html { root /var/www/html; internal; } - Test your configuration:
sudo nginx -t
- Reload Nginx to apply changes with the following:
sudo systemctl reload nginx
- Visit a broken or missing URL to confirm your custom page appears.
Set File Permissions
Ensure the web server can access your error pages:
sudo chmod 644 /var/www/html/404.html /var/www/html/500.html sudo chown www-data:www-data /var/www/html/404.html/var/www/html/500.html
Test and Verify
You can test the configuration by:
- Accessing a non-existent URL to trigger a 404 error.
- Temporarily modifying a server directive to simulate a 500 error.
If the custom pages display correctly, your setup is working as expected.
Troubleshooting Tips:
- The default Apache/Nginx page still appears
Cause: Wrong file path
Solution: Check that the file path in your configuration is correct. - “403 Forbidden” when accessing the error page
Cause: Incorrect file permissions
Solution: Verify the ownership and permissions of your error page files. - Nginx not reloading
Cause: Syntax error in configuration
Solution: Run sudo nginx -t to check the configuration for errors.
Conclusion
In this manner, you have successfully configured custom 404 and 500 error pages for Apache and Nginx.
These pages improve your website’s professionalism, enhance user experience, and support SEO best practices. For additional help, please reach out to our support team.
A Linux VPS Hosting solution provides full control over Apache, Nginx and server configurations for advanced website management.
Facing a 500 error on your control panel? Check out our guide on How to Fix Plesk Panel 500 Internal Server Error