We love digital 0330 353 0300

Laura Phillips

How To Create An Effective 404 Error Page

2nd May 2013 SEO Blog, SEO Blog, SEO Resources 6 minutes to read

The 404 page is an important, but much overlooked and unloved part of many websites. What is it for? How do you create one? Does anyone care? In this post we aim to explain all these things plus give you some brilliantly unusual examples to inspire you.

What Is A 404 (Not Found) Error Page?

Simple Answer:

The 404 page of your site will appear to any user when a page is ‘not found’.

This can happen for a number of reasons, most commonly because:

The 404 response code exists to tell the user, browser, and search engines that the page does not exist.

Slightly More Technical Answer:

404 is the HTTP status code returned for a page ‘not found’ on the server. Broken down, the first ‘4’ indicates a client error, the ‘0’ denotes a general syntax error, and the final ‘4’ refers to a specific error in the 4XX group, all of which indicate that the user has probably made the error.

In an ideal world, when a page has been moved a 301 response is most appropriate, and if it has been deleted a 410 should be returned, but they are not often utilised.

What Is a Soft 404 Error?

Soft 404s are ‘not found’ pages that return a 200 (OK) error code. Their use is discouraged as it can easily create confusion for all involved. In many instances websites using Soft 404s will have a working link, but present a simple ‘Page Not Found’ message on the page that is returned.

Here’s a visual representation of a Soft 404 from Google Webmaster Central:

Google describe this situation quite eloquently:

The content of the page is entirely unrelated to the HTTP response returned by the server. Just because a page displays a 404 File Not Found message doesn’t mean that it’s a 404 page. It’s like a giraffe wearing a name tag that says “dog.” Just because it says it’s a dog, doesn’t mean it’s actually a dog. Similarly, just because a page says 404, doesn’t mean it’s returning a 404.”

Creating a Good 404 Page

404 pages are often overlooked and seen as an ‘admin’ hassle rather than a legitimate, usable page. As with any web page the provision of good content can make you stand out, be remembered, and help to stick in the mind of your user.  Basic content for a good 404 page should include:

What Makes a Bad 404 Page?

There’s no excuse for a poor 404 page, though many sites persist. The main culprits are:

404 Page Customisation

404 pages can be fully customised to suit the look and feel of your website.

Creating an HTML 404 page is not difficult. Open your editor, go to a basic page on your site such as ‘about us’, right click and select ‘View Source’, copy the code and edit the text. Be sure to check it over before and after upload.

WordPress provides one of the easiest platforms for creating web sites and the creation of a 404 is very simple. You will find a plethora of plug-ins offering to help you create almost anything within your site, such as this custom 404 plug-in.

404 Page Analytics

Keep on top of your broken links with the Crawl Errors area within Webmaster Tools. Crawl Errors not only show you where Googlebot has had trouble on your site but also includes dates, response codes, and a graph recording problems encountered. Plus you can download all the information to pick through later.

You can find it in the Webmaster Tools area here:

For more information on using Google Webmaster Tools to fix broken links you can read more.

It’s easy to see which pages are being returned as 404s via the Content area in Google Analytics:

 Even better, you can add event tracking to see not only the URL that returned a 404, but also the source and trigger keyword, as described in this post by James Green:

The code can be implemented within the <body> tag in the page source.

Script:

<script type=”text/javascript”>
var strPage = document.location.pathname;
var pageTracker = _gat.getTracker(“UA-*******-*”);
pageTracker._trackEvent(“Errors”,”404″,strPage,1);
</script>

The element above tells the search engines 3 things:

1. var strPage = document.location.pathname; – This tells Google the naming dimensions of the page to be included within the report i.e. URL, Keyword.

2. var pageTracker = _gat.getTracker(“UA-*******-*”); – This ensures that the events are recorded within the correct Google Analytics profile

3. pageTracker._trackEvent(“Errors”,”404″,strPage,1); – These are the event parameters that need to be shown within the Events report in Google Analytics. This will ensure that the URL and page dimensions are pulled into the report.

Screaming Frog is a great tool for quickly and easily listing all your 404 errors into one spreadsheet, and seems to pick up more than Google Webmaster Tools sometimes.

You can install a Broken Link Checker plug-in for your WordPress site to help you keep on top of site errors in a similar way to using Webmaster Tools. The plug in is described as being able to:

Avoid Users Landing on Your 404 Page

Good site maintenance is the best way to prevent users from landing on your 404 page. By using the above tools regularly, and any others you may find, you can help minimise the risk of users landing on your 404 page in the first place via broken links and incomplete redirects.

Awesome 404 Pages

If you’re struggling for ideas for your 404 page take a look at these fantastic and unusual examples:

Kevin Smith:

Geek Squad:

Distilled:

Some people even went one step further and have created dedicated 404 page videos…

Nosh:

Including what has been described as the ‘Most Awkward 404 Not Found on the Internet’…I am inclined to agree.

Steve Lambert:

I hope this post has given you some ideas for creating your own unique 404 page, if you have any thoughts, questions or ideas to inspire others please share them in the comments section below.

Image Source

404 error, page not found, via BigStock

View on Koozai.com

Leave a comment

Exit mobile version