How to Set/Use custom 404 Error page in HTML Template.

First off before you do anything else you should make sure that customizing error codes in this way is allowed or even possible. Some webhosts will not permit this sort of tampering because it might mess something else important up. This is generally thought of as an “advanced” modification. Find an FAQ or email your Host and ask if you can set it up. If you have your own domain, you shouldn’t have any restrictions of this kind.

The .htaccess file


Your .htaccess text file is the special file that sets up the deal for you. It can contain all sorts of directives for the Apache server. If you’re not using an Apache-based server, you’ll have to read your server’s manual on how to do it. Look in your root directory, the place where your homepage is, for this file (.htaccess). If it’s not there don’t fret, you can just create it afresh and it won’t make any difference. When doing so, just make an empty text file in text or html editor, and make sure you start the filename with a dot — it’s vital. Starting a filename with a dot makes it a hidden file in Unix.

TIP: You may have problems creating a filename that starts with a dot. If your operating system won’t let you create a file like this, name the file something else temporarily and rename it through your FTP program once you’ve uploaded it.

Edit it


Now you need to point your .htaccess file in your server to your custom 404 Error page. Simply add this line to the file (edit it with a text editor or html editor):

ErrorDocument 404 /404error.html

Make sure it’s all on one line. Start the file path with a slash, which tells the server to start looking in your root directory (where your homepage is), and follow the path you specify. For example,

ErrorDocument 404 /subdomain/404error.html

This will load the file 404error.html in your subdomain directory.

TIP: Make sure you don’t specify a full URL to your 404 page, as in something like “http://www.example.com/404error.html”. This will cause your server to return the wrong response code, and will actually make it seem like the page was found correctly. If you specify the path to your file as shown above (relative to the root, like “/404error.html”), you won’t have these problems. It’s also a good idea to add the following code to the head section of your 404 page, so that search engine robots don’t add it to their indexes.

<meta name="robots" content="noindex">

Now upload your .htaccess file to your root directory, and your 404 page to the location you specified, and you should be all set.

Notes


Use Karma’s default 404error.html file as a starting point and customize it as needed. Bellow are just some notes for you.

  • Explain the error that has occurred, and perhaps describe common reasons for the error (mistyped URLs, outdated content etc.). Use clear language and don’t ramble. Since it’s such a well-known error code, including the number “404” in this summary will get the message across quickly.
  • If your site has a search function, include a search box.
  • If you have an index/sitemap, add a link to it, and definitely link back to your homepage.
  • Include an email link or link to your contact page so that visitors can report the problem. Don’t expect a lot of them to take the time to do it, but some will, and it again enforces the point that you care that they’ve had a problem.

Overall, just make sure you motivate your reader not to lose all faith in your site, and give them options as to where to go next. Above Tutorial is for HTML template only and NOT for WordPress theme.