ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Create a Custom Page Not Found 404 Error Page

Updated on December 23, 2016
Sock Puppet profile image

Victor writes about diverse topics dealing with history, literature, and technology.

The Page You Are Looking For Cannot be Displayed

How many times have you seen a message like this: The Page Cannot be Found. Turn your 404 error traffic into real visitors with a custom error page.
How many times have you seen a message like this: The Page Cannot be Found. Turn your 404 error traffic into real visitors with a custom error page.

What is a 404 Error Page?

A 404 Error Page is the default page that is displayed when someone tries to access a web page that does not exist.

It is called a 404 error because that is the code assigned to this type of error by the web site's server. There are other numbers designating different types of errors, but we do not need to concern ourselves about them here. The important thing to remember is that when a page does not exist, a web server will show an error page, warning the visitor that they have reached or attempted to reach a non-existent page.

This type of error most often occurs when a page has moved, or has been deleted, or where the link your clicked on points to a non existent web address. For example, the person coding the site may have made a typo, so that the link does not take you where you wanted to go, or you may have typed the address of the page incorrectly.

How it Works

When a 404 error is triggered by someone attempting to reach a page that does not exist, the web server will display an Error Page.

Ironically, the Page Not Found is actually a page. In most cases, a web server will display a bland and generic page not found message, that really doesn't tell you anything except that you are lost and should go back to the main page and also giving the visitor a bunch of useless information about how they can trouble shoot to find out why the page they were looking for is not loading. No one reads this and no one cares.

The standard page not found error does provide a link that you can click to go back to the main page of the site, but it is a small link buried in a lot of wording that no one reads, so chances are that most people will not click it. They will most likely go to a different website or hit backspace which may bring them back to the search engine that they came from. The result: you have lost a valuable visitor. Whatever you are selling, they are not going to buy it.

You Can Personalize Your 404 Page

The generic page not found page usually comes pre-installed with the software that runs your web server. But like any page on your site you can customize it, provided you have access to your server's .htaccess file (usually found in the root or main directory of your site).


Quick Tips on How to Create a Custom Error Page

  1. use an web page editor such as FrontPage to create a nice looking error page. Although you can use your server's online text editor, you are better off designing the page offline and then pasting into the document on your server.
  2. You can add graphics, flash animation and other bells and whistles to your error page. A custom 404 error pages does not have to be text and it should not be boring. In fact, it should entice the viewer to explore other parts of your site.
  3. Do not place any Adsense code on your error page. This is against Adsense's terms of service and may get you banned.
  4. Your error page can display a site map, or provide some links to selected content. You can also provide links to other sites that you wish to promote.
  5. If you have an ecommerce site you can use your error page to promote some of your products. Who knows, the visitor may not have been looking for those items but they may be interested any way.

Creating Custom Error Pages

If you have access to your server, you can create a custom page not found error page. In fact you can add whatever content you like to your page.For example, if you have an e-commerce site, you can make your error page display products, or a search box. You also can put a search box or a site map on your error page.

The goal is to keep your visitor on your site and not let him or her click away when the page they were looking for does not exist.

If you have access to your web server account, use the control panel to access and edit a file called .htaccess

Note: The .htaccess file is usually only accessible through your server control panel; it cannot normally be uploaded or downloaded using an FTP program and you cannot access it directly by typing its web address.

Using your Web Server's control panel, open the .htaccess file and edit it. Add the following wording:

         ErrorDocument 404 /errorpage.html
 

The code above tells the server that whenever a visitor to your site goes to a page that does not exist and a 404 error is generated, the server should display the page called errorpage.html

In other words, this code creates a default page called errorpage.html which will be displayed whenever the actual page is missing. You can call your own custom error page anything you like. In fact, you could make the default error page your main page by inserting the following code:

                ErrorDocument 404/index.html
 

In this example, whenever a visitor clicks on a non-existent page they would be brought back to the index.

Its important that you create your custom error page. So if you create a custom 404 error page, and call it errorpage.html, it is important that you create an actual file called errorpage.html and upload it to your server. The content you put on your error page is up to you.

The box to the right provides links to some pretty creative custom error pages. A more standard type of error page on an ecommerce site is to display some featured products from your catalog in hopes of generating a sale.

Whatever you decide to put on your custom error page, make sure that it is engaging and interesting so that it keeps people on your site. Otherwise they are likely to just backspace their way out of your site as quickly as they got there.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)