How to Create Custom 404 Error Page

In my last article I discussed about the various reasons for which a website can throw a 404 error. While they are largely avoidable, with a little effort we can actually get the 404 errors to work for our website rather than working against it.

The solution is simple, create a custom 404 page. Instead of the ugly “404 Error – Page not Found” we can have a nice page that tells the visitors that something has gone wrong and provide him with alternatives. This would help retain the visitors to your website to great extent.

Now the question is, how to create a custom 404 page ?

Creating Custom 404 Page in Apache

a) Download your .htaccess file from server using FTP.
b) Open using Notepad and look for the line below..
ErrorDocument 404 /path/to/your/error/file.html
c) Download this error file mentioned in the path and modify the HTML to customize it, alternatively, create a separate custom 404 page and replace the “/path/to/your/error/file.html” with the path to the new file.
d) Save the .htaccess file and upload to your server.
e) Type in a wrong URL that you know doesn’t exist and check if the custom 404 page shows up.

Points to Note:
a) Make sure you keep a back up of your .htaccess file before uploading the new file. This is a very crucial file for websites on Apache and can create a mess if you write anything silly in it.

b) In case you don’t have a .htaccess file on your server, you can create a new one in a notepad. Just add the line below and it should work well.
ErrorDocument 404 /path/to/your/error/custom404page.html

c) Though most web hosting companies that offers Apache server gives access to .htaccess file, some of them still don’t. In case you are on one of those servers speak to your host.

How to Create Custom 404 Error Page in IIS

This is again a very simple process but you will need to have access to your server to do this.

a) Open Your Internet Service Managerand right click on the website for which you want to set the custom 404 error page.
b) Click on Properties
c) CLick on Custom Errors tab.
d) You will see a long list of errors, scroll down till you see 404 HTTP error on the left column.
e) On the right column (Content) you will see a file associated with it.
f) You can edit this file and customize it. Alternatively, choose Edit Properties and change the file to the custom 404 file that you have already created.
g) Check if the custom 404 error page is working by typing a wrong URL.

So don’t let those visitors bounce off , create a nice and attractive custom 404 error page and keep them in.

Related Post: Various Causes of 404 Error Code and Solutions

About "" Has 249 Posts

Check out the About SRC Page for more details about Saptarshi Roy Chaudhury.

5 Comments to “How to Create Custom 404 Error Page”

  1. Phil Simon says:

    Hello

    I have a template-based site with register.com. I can’t ftp pages to a root directory but, if you look at my site, you can see that I’ve added html in many places.

    I would like to add the code below to customize the 404 error msg:

    http://philsimonsystems.com/404_error.html

    Any ideas?

    Thanks.

  2. seo-kolkata says:

    How are you adding the HTML code to the pages – is there an option to edit the template or are you adding the HTML through an WYSIWYG editor ? I can see that the sample code you showed is using JS document.write to write the HTML code – at times the WYSIWYG ar not provisioned to support JS .

    Also, if you are adding it through WYSIWYG you don’t need the first part of the code that writes the html and body tag etc because teh WYSIWYG would automatically place the content within the body tag.

    It is very difficult to say teh exact reason without looking into the files and system that you are using but I presume one of this would resolve the issue

  3. secret eye says:

    the information in your site is good but i want clear information regarding creating 404 customized page in my blog in blogspot.com

  4. seo-kolkata says:

    If your site is hosted on Blogspot.com you can’t have a custom 404 error page because you do not have control on the server.

  5. Pavan says:

    I found this regarding blogspot domains see if it helps..

    http://www.shaliwahan.com/2010/09/set-custom-404-page-in-blogger-blogs.html

Leave a Reply

Your email address will not be published. Required fields are marked *