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.
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>
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.
- User Notifications – W3C
- SC 3.2.3 Consistent Navigation – WCAG
- Create custom 404 pages – Google
- Why should a 404-error page return the correct HTTP status code and not be redirected, for example? – SISTRIX
- The Truth About 404s and 301 Redirects – Global Reach
- Semantic HTML: the foundation of web accessibility – UX Collective
- HTML: A good basis for accessibility – MDN web docs moz://a