CUSTOMIZE YOUR 404 ERROR PAGE

Creating a useful custom error page

404 error pageFirst and foremost, you should avoid serving 404 error page to your visitors, customers and potential clients, but unfortunately, you can't stop someone from typing (or copying and pasting) the wrong URL. But just in case you need to, we recommend using a custom 404 error page instead of the default.

The default 404 error page is Ugly and if left alone, your visitors will click on their browser's back button and leave you! Is that what you want? We didn't think so - So read on...

Creating a useful "404 not found error" page is a sign of good design and years of web design skills! With today's focus on user experience, you can't just settle for, and serve the plain and sometimes ugly, 404 error page to your visitors, and would be customers!

Give your visitors more features and options with a custom error page, and help them find what they came to your site for in the first place, your product, or services! Check out SimplerWebs' custom 404 error page to get some "404 not found error" page design inspiration! - Do you like it? Don't worry if you don't - We won't bite!

TIPs IN AVOIDING 404 ERRORS

There are steps you can take to avoid serving a 404 error page! These steps are easy but depending on the size of your website, it might take some time. Here are our tips (in order of preference).

  1. Renaming the page - If you have to rename the page, and if possible, do not change the alias because that is what triggers the 404 error page
  2. Monitor your 404 errors - Using your Webmaster Tool, download your site error report and fix all errors (using the right redirect) as soon as they arrive.

What is a 404 error Page?

A 404 error page (Page Not Found) is the standard HTTP response telling the client, a browser, that even though it was able to talk to the hosting server, it was not able to fine the requested page. View Wikipedia's definition of 'Custom Error Page'.

A 404 error page is what your visitor will see when they try to access a page that no longer exist, or by clicking on an internal/external link that was mistyped when the link was created.

Default Vs Custom 404 error page.

When a visitor clicks on a link of a page that does not exist, they will be served with one of the two types of 404 error pages:

  • Standard 404 page: This 404 error page will be served showing very basic verbiage with possibly one option for the visitor to choose from such as a link, or a button to 'Home' page
  • Custom 404 error page: This one is the most preferred option for it provides the visitors with a custom message and more option to choose from than just the 'Home' link or button. This custom 404 error page can be customized, using HTML and CSS for a better presentation of the 404 page.

You should also be able to create a custom 404 error page if you access to your server.

Create a Useful Custom 404 page to help your visitors

When thinking of designing a custom 404 page, try to make it simple yet to the point and only provide helpful information your visitor is looking for or might need to see. Also, try to entice your visitors to further explore your website.

How to create a custom 404 error page in Joomla, or WordPress?

Joomla and WordPress do not provide a good 404 error page, and your professional Joomla template, or WordPress theme might already include one but, from the ones we've seen, we recommend that you add some spices to your custom page. No matter how good is the 404 error page, that came with your template, is, you might still want to make some changes to better guide your visitors when they come to your site from a broken link, that you created by mistake, or mistyped by the person who linked your page from their website.

Here, we are going to walk you through the steps of creating a custom 404 error page with the features we recommend you add.

We are going to cover the following important steps

  • Think what you want to include in your 404 custom page such as a good image, verbiage to use, important internal links to include, and don't forget a 'search' feature. Then create a new article
  • Think of a good title (not for SEO purpose but for yourself, and your users)
  • Choose the right 'Robots' option
  • Create a menu (hidden)
  • Write down the link
  • Via your FTP, or File Manager (cPanel), locate and open the error.php file
  • Don't forget to test your 404 custom page

Think what you want to add in your custom 404 error page

Your template default 404 error page might be boring and does not include important features every error page should have! So take the time to think of a good image your error page you want your error page to have, good copy (please do not make it boring), a couple of links to your important pages, and last but not least, a search feature

Write a good title

We are talking about the actual error page and not your menu title here. It does not have to be SEO optimized but short and sweet so people can tell they've landed on an error page.

Choose the right 'Robots' Metadata option

Since this is a custom 404 page, you don't want it to be indexed by search engines! So make sure to choose 'No Index, No Follow' from your 'Robots' option

Create a hidden menu for your 404 error page

For SimplerWebs, we have several Menus setup. One for the standard navigational menu you see on top, one for our Blog articles, another one just for articles that do not fall under the blog category, and last, a menu for every page we don't want to be indexed. Everybody have their own way of managing their back end, so you don't have to follow our style.

  • Create your new menu, write a short menu title, and choose something like '404' for your alias
  • Copy the link URL (the alias) and paste into your favorite text editor
  • Save the menu but make sure that it is not published!

Edit your 'error.php' file

Using your favorite FTP client, or the File Manager (found in your cPanel), locate the default Joomla/WordPress error.php file, which should be on the root of your website (you can alternatively copy the file into your theme's folder if the error.php file does not exist in your template/theme folder). For Joomla, it should be under 'templates/Your Template'.

Once you have the error.php opened, add the following code

if (($this->error->getCode()) == '404') {
header('Location: /404');
exit;

Test your custom 404 page

Before you think you are done creating your 404 page, you need to test your work.

  • Visit your website and add the URL of the error page article after the domain. For our case, it is /404  Depending on how you have your Joomla/WordPress setup, you might need to add .html to the end of the URL.
  • Visit any page of your website, then click somewhere in the URL, and add any letter(s), number(s), or character(s) and hit enter. If done properly, you will see the custom error page you've just created

Guidelines for creating a Good Custom 404 page

Below are SimplerWebs' simple guidelines to follow in order to create simple yet useful custom 404 page that your visitors will thank you for.

  • Only use what you need in order to convey your 404 error page message. At Simplerwebs, we decided to use a simple graphic we designed and is optimized for speed because our motto is 'Simple Yet User-Friendly Design". We are not saying that you cannot use a picture you have downloaded from the internet but if you decide to use one, make sure that it is optimized for SEO and speed,
  • Use simple verbiage (very shot paragraph) to let your visitor know that the page they were looking for cannot be found. Be funny but professional,
  • Use the same look as the rest of your other pages and include your website navigation in your 404 error page,
  • When creating your 404 page, name it like '404', 404-page' or '404-error-page',
  • Include links to your most important or popular pages or menus,
  • Help your visitors help you fix the problem by providing them with a way to report the broken link or missing page,
  • Prevent your 404 error page from appearing in the search engines search results by making sure that your server returns 404 HTTP status code. You can also add something like 'Disallow: /404' to your Robots.txt file. Note: replace the '404' with the actual URL of your 404 error page (i.e: 404-error-page, or 404-error-page.html),
  • Embed a search box within your 404 error page which will make the error page useful and provide your visitors with a mean to search your website from within your error page

Note: If the 404 error page is served because of a mistyped URL, or a page that no longer exist, use your .htaccess to let the search engines know that the page in question no longer exist, using a 401 Redirect, or has been moved by using a 301 Redirect.

Remember to think of a 404 error page as a mean of letting your visitors know that the page they were looking for is missing or no longer exist, and use it to help them navigate to other pages of your website while providing them a feature to search your site.

 

SimplerWebs

Custom 404 Error Page - A Sign of Good Design!