January 21, 2018

404 Error Page: Definition, Detection & Winning Examples

404 error page

What is a 404 Error Page?

404 error pages are exactly what they sound like – error pages. If you are browsing a certain website, and you click on a link and reach a 404 titled-page, you have actually reached a page that is no longer available on the site (and an error returns to the server). This could be caused by either the removal of a page from a website or an error in the outgoing link, meaning a link was not typed correctly.

Are 404 Error Pages Bad For Your Site?

Since Googlebots are actually skimming through your website, it is your job to make their jobs as easy as possible. One of the steps towards a “healthy” website is to ensure there are no errors behind the scenes. Google will obviously crawl your website more easily and faster if you configured or fixed 404 errors. Moreover, less errors will increase the likelihood of having the Googlebot come back to crawl your site again in the near future. Just because robots like robot-friendly sites! The more your site is crawled, the more pages will be indexed and users will be able to find your content faster in SERPs. Lastly, users appreciate a website that doesn’t lead to broken internal or external links.

Having that said, the most important step is to make sure the Googlebot gets a 404 code (customized or not). Gary Illyes (Webmaster Trends Analyst at Google) has stated in 2015 that 404s will not lead to penalties.

gary-illyes-404-tweet

As we see it – it’s a question of balance. Having a few 404 pages will not be bad for your site. But if you have several and they interfere with user-experience, you should go ahead and fix them.

How Do I Detect 404 Error Pages to/from My Site?

Wondering if your site has 404 error pages, but have no clue how to detect them? There are some great tools out there that you can use:

  • Google Search ConsoleUnder the “crawl” -> “crawl errors” section, you can find a list of internal broken links (that Google actually recognizes).
  • Ahrefs.com – This online tool is great for detecting backlinks, but it also has a “broken links” section. By entering the domain name in the URL, you can easily see a list of outgoing broken links on your site. Take into account that Ahrefs.com will usually not detect ALL 404s.

outgoing-links-ahrefs

  • Screaming Frog – This terrific tool screens your entire site for meta data, content duplicates and, most importantly, for the purpose of detecting broken links. You will need to download this tool to your computer. Simply enter a certain URL to the text box and it will begin the scan. Filter the list by pressing on the “status code” column. If they exist, you should see a few 404 codes.

screaming-frog-status-code

redirection-plugin-wordpress

How Do I Fix a 404 Error Page?

  1. If possible, fix the incorrect link. If it’s on your own website, this task is very simple. However, usually broken links will be coming from external websites. In that case, if you have a good working relationship with the incoming link resource, then go ahead and contact them to fix it. Otherwise, execute number two:
  2. Make sure to redirect (code 301) any URLs which are incorrect. For example, if people are reaching an error page www.yourwebsite.com/blogg, simply redirect it to www.yourwebsite.com/blog.
  3. You don’t HAVE to fix every 404 page, and sometimes it just won’t be possible. In this case, you should focus on creating a custom 404 page. A custom 404 page may actually help to keep a user on your site, rather than click “back” after a Google search query. How so? A winning customized 404 page will include a clear message, call-to-action and/or search option.

See some winning 404 pages from across the web:

Interactive 404s

See how the following websites add a clear CTA driving users to press on one of the options.

Modcloth 404:

modcloth-404

Email Center UK 404:

emailcenteruk-404

Focuslab 404:

focuslabllc-404

Search bar 404s

The following use a search bar to make it easy for users to find what they’re looking for

Twitter 404:

twitter-404

HowStuffWorks 404:

howstuffworks-404

Top links 404s

See how the following sites list a few top links from their site (or a link to their homepage) – another engaging way to keep the user on the site.

HubSpot 404:

hubspot-404

healthline 404:

healthline-404

airbnb 404:

airbnb-404

Creative 404s

See how these sites use graphics to intrigue the user to stay on the site.

People 404:

people-404

American Apparel 404:

american-apparel-404

Lego 404:

lego-404

Pixar 404:

pixar-404

Quaker Oats 404:

quakeroats-404

distilled 404:

distilled-404

We have room for one final example 🙂 See how the Coolappse 404 page catches your eye with this great creative:

coolappse-404

To sum up these great examples, when you create a custom 404 page for your site, make sure to tackle at least one of the following to ensure a user stays on your site:

  1. Add a list of top links on your site (chances are that a user will click one)
  2. Add compelling graphics/creatives so that a user will want to explore further
  3. Add a search bar so that a user can search for the original content they were expecting to see. Even if they don’t find it – there’s a good chance they will reach another similar page.
  4. Pro 404 pages – create an interactive page that will, in most cases, draw the user to click on a call-to-action button

Where do I upload a custom 404 error page?

So now that you got some inspiration, we will explain the technical process of uploading a customized error page. The first step is finding where the 404 page is located. The location depends on the CMS. If you have a WordPress site, there should be a 404.php file in the theme files. You can access it directly from your server or from the wp-admin panel (if you have admin access) and edit the file as you see fit with HTML or PHP. If your site is using another type of CMS, it might be located in a different folder, but you should look for it under the theme files. The file name will probably include “404” within it.

404-php

Once you have uploaded your customized 404 page, go to a page that doesn’t exist or www.yourwebsite.com/404 and make sure the new page is live. If you still can’t see it, we recommend contacting the Webmaster or system people and asking for further assistance.

Questions?

Should you have any questions regarding the importance of a compelling error page or how it may help keep users on your site, don’t hesitate to contact yellowHEAD’s SEO experts!

Good luck!

BACK TO BLOGBACK TO BLOG
Let's talk Marketing
Get in touch!