Skip to main content

The Dreaded 404: Don’t Leave Them Wanting More

Search Engine Optimization icon - magnifying glass with arrow point up and to the right in the background with DubBot logo in foreground

What’s the difference between 404 and 301?

Simply put, an HTTP 404 status code indicates that your browser cannot find the page requested, “File Not Found.” When a user requests a nonexistent webpage, you should return an error page to let the user know the page is no longer available. Besides, and just as important, make sure that the server returns a status code of 404.

Returning that status code lets the search engines know that this page no longer exists and needs to be removed from your index.

In contrast, a 301 status code is a redirect, sending the user somewhere other than where they asked to go. If a web page is still active but moved (for example, government.abc.edu is now polisci.abc.edu), place a redirect on government.abc.edu so that the user will now land on polisci.abc.edu. This example is a correct use-case for a 301 status code.

Why can’t I just put 301s on all of my 404s?

There are a couple of reasons why placing redirects on missing pages is not the best thing to do:

  • As stated above, using the proper status code of 404 for missing pages keeps the search engines informed and appropriately updates your website index.
  • As for the user and their experience, redirecting them does not get them where they requested to go, and they still have not been told the content they are looking for no longer exists.

So, you see, it’s far better to design and return an informative and useful 404 page.

Create a Good 404 Page

Here are two samples of generic 404 error pages.

Sample 404 Not Found Webpage with message reading Not Found The requested URL /404 was not found on this server.
Sample of a generic sever error page. Error message reads Server Error - 404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or it temporarily unavailable.
Images courtesy of Woorank

There’s not much information or clarification regarding the error, especially for non-technical users. There’s no navigation or even a logo to let the user know that the content was likely, intentionally removed. They are also just plain ugly.

Let’s take a look at a few ways you can take this error page up a notch or two.

  • Tell your user the server can not find the page they have requested.
  • Respectfully ask your user to ensure they keyed in the URL correctly.
  • If they came to the 404 page via a link on another page on your website, give your user a way to report the broken link.
  • And do all of this in simple, plain language.

All that is pretty easy, right?

These next techniques are a bit more technical, and here’s why.

The default 404 page sits on your server, not in your CMS. Therefore, adding attributes to create an informative and useful error page may have to be done manually, with no “auto-update” capability.

  • Consistent navigation
    Give your users the same choices here to navigate your site as they have on all your web pages.
  • Send the message with the <title> tag
    Use the page title tag to give immediate feedback that the page is not found. “The <title> element of the web page can be useful to indicate successes and errors. In particular, screen reader users will receive this feedback immediately when the web page is loaded. This can be helpful when the main heading is located deeper within the content, for example, after the navigation menus.” ~ W3C, User Notifications, example 2
  • Code in Semantic HTML
    Again, most status code pages reside directly on the server so creating one that’s useful and usable may take a little coding magic. Always code in semantic HTML. Why?Well, there are several reasons:

    • The foundation of a truly accessible webpage is Semantic HTML. Assistive technologies need that semantic structure in order to convey information and its meaning to its users.
    • Semantic HTML is easier to develop with, better for mobile (light file size), and is better for SEO – search engines prefer words inside of semantic tags.
  • Be prepared to use <noscript>
    Using JavaScript on your pages doesn’t mean that the pages will not be accessible. In fact, JavaScript can improve the accessibility of your pages and certainly increase user experience. But remember, some users, regardless of their abilities, disable JavaScript for whatever reason. Or, they might be using technologies that don’t support scripting. So be ready to provide alternatives.

Websites are meant to be dynamic…content in, content out. So naturally, 404s are going to happen. Making sure those 404 codes get sent back to the server is critical in keeping your search engine index up to date. Equally important is a thoughtfully designed, usable, and useful error page that will boost the user experience when a page “can’t be found.”

A Quick Win for DubBot Users

While it is important to provide a friendly resource when a link breaks, it should be a top priority for website administrators to find and fix broken links as quickly as possible. In DubBot, you can filter the list of pages that contain broken links to only show pages with a link leading to a 404 error. This makes prioritizing updates to pages with links that lead to a 404 response a simple project any website editor can undertake with DubBot.

Resources

Maggie Vaughan, CPACC

~ friend of DubBot, A11Y practitioner in higher ed

This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>