{"id":21125,"date":"2025-10-18T10:31:41","date_gmt":"2025-10-18T10:31:41","guid":{"rendered":"https:\/\/www.webhosting.uk.com\/kb\/?p=21125"},"modified":"2026-06-03T09:40:47","modified_gmt":"2026-06-03T09:40:47","slug":"how-to-set-up-a-custom-error-page-404-500-in-apache-nginx","status":"publish","type":"post","link":"https:\/\/www.webhosting.uk.com\/kb\/how-to-set-up-a-custom-error-page-404-500-in-apache-nginx\/","title":{"rendered":"How to Set Up a Custom Error Page (404, 500) in Apache\/Nginx"},"content":{"rendered":"

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.
\nWhile functional, these default pages lack branding and may confuse visitors.<\/p>\n

Creating custom error pages allows you to provide clear, user-friendly messages, maintain consistent website branding, and guide users back to important pages.<\/p>\n

This article explains how to configure custom error pages for 404 and 500 errors in both Apache and Nginx web servers.<\/p>\n

\n

Table of Contents:<\/strong><\/h2>\n
    \n
  1. Why Custom Error Pages Matter?<\/a><\/li>\n
  2. Create Custom Error Page Files<\/a><\/li>\n
  3. Configure Custom Error Pages in Apache<\/a><\/li>\n
  4. Configure Custom Error Pages in Nginx<\/a><\/li>\n
  5. Set File Permissions<\/a><\/li>\n
  6. Test and Verify<\/a><\/a><\/li>\n
  7. Troubleshooting Tips<\/a><\/li>\n
  8. Conclusion<\/a><\/li>\n<\/ol>\n<\/div>\n

    Why Custom Error Pages Matter?<\/strong><\/h3>\n

    Default server error messages like 404 Not Found<\/em> or 500 Internal Server Error<\/em> look unprofessional and can drive visitors away. Custom error pages help maintain your site\u2019s branding, improve user experience, and guide users back to important pages. They also support better SEO by reducing bounce rates and keeping visitors engaged.<\/p>\n

    Custom error pages help with:<\/p>\n

      \n
    1. User retention: Visitors stay longer when guided correctly.<\/li>\n
    2. Brand credibility: Keeps site design consistent.<\/li>\n
    3. SEO improvement: <\/a>Prevents search engines from flagging \u201cbroken\u201d pages.<\/li>\n<\/ol>\n

      Create Custom Error Page Files<\/strong><\/h3>\n

      Create simple HTML files for your custom error pages inside your site\u2019s root directory (e.g., \/var\/www\/html\/).<\/p>\n

      Example: 404.html<\/p>\n

      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n\u00a0 <title>404 - Page Not Found<\/title>\r\n<\/head>\r\n<body>\r\n\u00a0 <h1>Oops! Page Not Found<\/h1>\r\n\u00a0 <p>The page you\u2019re looking for doesn\u2019t exist or has been moved.<\/p>\r\n\u00a0 <a href=\"\/\">Go Back to Home<\/a>\r\n<\/body>\r\n<\/html><\/pre>\n
      Example: 500.html<\/p>\n
      <!DOCTYPE html>\r\n<html>\r\n<head>\r\n\u00a0 <title>500 - Internal Server Error<\/title>\r\n<\/head>\r\n<body>\r\n\u00a0 <h1>Something Went Wrong<\/h1>\r\n\u00a0 <p>We\u2019re working to fix the problem. Please try again later.<\/p>\r\n\u00a0 <a href=\"\/\">Return <\/a>Home<\/a>\r\n<\/body>\r\n<\/html><\/pre>\n
      Configure Custom Error Pages in Apache<\/strong><\/h3>\n
        \n
      1. Open your Apache virtual host configuration file with the following command:\n
        sudo nano \/etc\/apache2\/sites-available\/000-default.conf<\/pre>\n<\/li>\n
      2. Add the following directives inside the <VirtualHost> block:\n
        ErrorDocument 404 \/404.html\r\nErrorDocument 500 \/500.html<\/pre>\n<\/li>\n
      3. Save and close the file (Ctrl + O, Ctrl + X).<\/li>\n
      4. Restart Apache:\n
        sudo systemctl restart apache2<\/pre>\n<\/li>\n
      5. Test by visiting:\n
        http:\/\/yourdomain.com\/nonexistentpage<\/pre>\n
        If your 404.html file loads, <\/a>your configuration is successful.<\/li>\n<\/ol>\n
        Configure Custom Error Pages in Nginx<\/strong><\/h3>\n
          \n
        1. Edit your Nginx site configuration file:\n
          sudo nano \/etc\/nginx\/sites-available\/default<\/pre>\n<\/li>\n
        2. Add or modify the following inside the server block:\n
          error_page 404 \/404.html;\r\nerror_page 500 502 503 504 \/500.html;\r\nlocation = \/404.html {\r\n  \u00a0root \/var\/www\/html;\r\n  internal;\r\n}\r\nlocation = \/500.html {\r\n  \u00a0 root \/var\/www\/html;\r\n  \u00a0 internal;\r\n}<\/pre>\n<\/li>\n
        3. Test your configuration:\n
          sudo nginx -t<\/pre>\n<\/li>\n
        4. Reload Nginx to apply changes with the following:\n
          sudo systemctl reload nginx<\/pre>\n<\/li>\n
        5. Visit a broken or <\/a>missing URL to confirm your custom page appears.<\/li>\n<\/ol>\n
          Set File Permissions<\/strong><\/h3>\n
          Ensure the web server can access <\/a>your error pages:<\/p>\n
          sudo chmod 644 \/var\/www\/html\/404.html \/var\/www\/html\/500.html\r\nsudo chown www-data:www-data \/var\/www\/html\/404.html\/var\/www\/html\/500.html<\/pre>\n
          Test and Verify<\/strong><\/h3>\n
          You can test the configuration by:<\/p>\n