Tired of the boring “Error 404” type pages. Here’s how to make custom error pages for Apache and NGINX.

Suggestions on pages

Your error pages should be useful. People are going to land on them, and you want to help them find what they want.

The best thing you should be doing is redirecting deleted pages to newer, relevant pages. Search engines hold deleted pages for a long time, and other sites make have links to them. So pay attention to your logs, and if you see people going to an old page, send that “lost traffic” to a better page.

The 404 page is very important. You want people who land on there to stay on you site, if possible. Things that can help with that are

  • Have the 404 page using the same theme as the rest of the site
  • Show relevant pages that the user can click on
  • Load a relevant page one the 404 page, so the user can start reading without clicking.
  • You can have a search box, but most people won’t care to use it

Yes, make the error pages useful.

How it works

You get Apache and NGINX to show a custom error page by telling it what page/path to use to show the error page. The page you specify doesn’t usually need any custom return code. The webserver will add that code to it.

It just needs to exist, and be usable. When a webserver gets a request that needs an error code, it will get the page, attach the error code, and send that to the visitor.

Apache

In Apache, you can specify the error page you want to show. These can be put these in your VirtualHost file, or just in your .htaccess file.

But you’ll need to have the page exists. For example, if you want 403 errors to use the page example.com/error/forbidden, then you’ll need to have a page at that location. It doesn’t matter if it’s static, or a WordPress page, it just needs to be able to load.

###################
### Error Pages ###
###################

ErrorDocument 400 /error/bad-request
ErrorDocument 401 /error/forbidden
ErrorDocument 403 /error/forbidden
ErrorDocument 404 /error/notfound
ErrorDocument 406 /error/bad-request
ErrorDocument 409 /error/internal-server-error
ErrorDocument 410 /error/browser-error
ErrorDocument 500 /error/internal-server-error
ErrorDocument 502 /error/internal-server-error
ErrorDocument 503 /error/internal-server-error
ErrorDocument 504 /error/internal-server-error

NGINX

For NGINX, it’s the same thing, but just in your site’s server config:

error_page  400    /400.html;
error_page  401    /401.html;
error_page  402    /402.html;
error_page  403    /403.html;
error_page  404    /404.html;
error_page  406    /406.html;
error_page  409    /409.html;
error_page  410    /410.html;
error_page  500    /500.html;
error_page  502    /500.html;
error_page  503    /500.html;
error_page  504    /500.html;

Or you can use the template from above:

error_page  400 /error/bad-request;
error_page  401 /error/forbidden;
error_page  403 /error/forbidden;
error_page  404 /error/notfound;
error_page  406 /error/bad-request;
error_page  409 /error/internal-server-error;
error_page  410 /error/browser-error;
error_page  500 /error/internal-server-error;
error_page  502 /error/internal-server-error;
error_page  503 /error/internal-server-error;
error_page  504 /error/internal-server-error;

Testing

You’ll want to test it out. You can view the page via the browser. And you’ll want to make sure that the pages are giving the right code.

You can do this via curl:

$  curl -I https://www.example.com/some-page-you-cant-access
HTTP/2 403 
server: nginx
...

As you can see, it gave the right error code (403). If it had given 200, then it wouldn’t be working correctly.

You can also view this on Firefox or Chrome, using their developer tools to see what the response code was.

Static pages for DDOS and 500 errors

If you are under a DDOS attack, and you are wanting to block access using 403, then I would suggest using a static page. Otherwise if your CMS (WordPress, Dokuwiki, Drupal, etc) is producing a regular page (and you have no caching enabled), it will take enough CPU to bring down your site, just to say ‘go away’.

(Of course it would be better to null route / blackhole them)

Also, you’ll want to use static pages whenever the server/php is having issues. Otherwise it won’t be able to show the error page.

Redirecting to the home page

If you have a one page site, then it doesn’t make sense to show error pages when all your information is on one page. Instead, you can redirect anyone hitting a 404 page to your home page.

Apache:

ErrorDocument 404 /

NGINX:

error_page  404    /404.html;
location = /404.html {
   return       301 https://www.example.com/;
}

You could also do the same for other error codes, if you wanted.

Funny responses

I’ve seen some funny responses that people have come up with. Of course it really depends on your website/business on what to use. Paying services tend to be more professional, but some just want to be light about it.

Be polite, informative, and help the user along.

Error 400: Bad Request

Sorry but I’m just not understanding what your browser is saying.
Maybe it’s still Monday morning…

Error 401: Unauthorized

These are not the passwords we are looking for.

Error 403: Forbidden

You say you want to see that? Sorry,
My parents told me not to talk to strangers.

Error 404: Page not found

Sorry, but the Gremlins ate the page you were looking for.
Now who turned on the sprinklers again?

Here’s a cool page of some other funny ones.

Error 500: Server Error

Sorry, our script crashed.
Along with the kettle.
And there goes the sink….
Oh dear. We’ll be back shortly.

Conclusion

This is a great way to personalize your site. And it really doesn’t take very long, but others will appreciate it.