THE DREADED 404 ERROR. DOES IT HAVE TO BE SO DREADED?
It happens all the time:
You try to visit a specific page on a website only to find a message saying “Error 404” or “404 page not found.”
As a website visitor, that’s no big deal—the search simply didn’t fulfil what you were looking for, so you can choose to search for something else that will.
But what happens if the website is yours?
You certainly don’t want people landing on a generic error page on your website, do you?
In this post, you will see great examples of effective custom 404 pages and learn everything there is to know about the benefits of having a custom 404 page. You’ll also learn about how to use your 404 page as a tool to improve your website!
Let’s jump in!
REASONS TO HAVE A CUSTOM 404 PAGE
IF PEOPLE LAND ON YOUR 404 ERROR PAGE, IT’S NOT A BIG DEAL: BUT IT BETTER BE CUSTOM
Some people are under the misconception that they should overlook 404 pages because they are the last place you want your users to end up on your website.
However, not having a custom 404 page can be detrimental to the user experience of your website and reflect poorly on your search rankings.
Your 404 page is your chance to turn a negative situation into a positive one and if you haven’t taken advantage of it already, you should.
Sometimes it can be hard to imagine why someone would ever land on your 404 error page. Even if you think you’ve built your website flawlessly, it’s much more common than you think.
Here are a few examples:
1. People can misspell urls
Consider our website, sweor.com for a moment. A user may want to find our recent Content Tips which can be found at www.sweor.com/contenttips. Instead, they type in www.sweor.com/contentips. That’s an honest mistake that you, as a webmaster, cannot control. But you can control the page they land on if they misspell the url. And if that page keeps them on your website, you can still retain that traffic because they can still find what they need.
2. You may change a page’s url but forget to 301 redirect
A 301 redirect tells Google that a previous url should be “redirected” to a new url moving forward. Say you make a modification to a url on one of your site’s pages and do not perform a 301 redirect (this happens often after a website redesign). Anyone searching for that url or clicking on a previous link to it will land on a 404 page. Make sure what they see when they get there is in your best interest.
3. You deleted old content and now it’s back to haunt you
Well, it doesn’t have to haunt you. It’s common to delete old, irrelevant and/or underperforming content from your website. It can actually help your website perform better if you do so. But what happens if there were links to that content somewhere on the internet and one of those links happened to be the only way a user would find you? If the user clicks on it and finds a generic 404 page, they won’t think you exist. If they find one that gives them access to your site, you have a better chance of retaining this visitor.
So what’s the general benefit of having a custom 404 page vs. a generic one?
A custom 404 page takes away the confusion of not landing on the page they had intended to land on. It lets your user know that there is an error with their request. Perhaps they mistyped the URL, the page is temporarily unavailable, or the page no longer exists. An effective 404 page will recognize the mistake and guide them back to relevant pages of the site.
This provides you with the opportunity to put valuable links in front of your users that would have otherwise been lost with a default HTTP error page. These links could be to your homepage, your FAQ or any other relevant links that will keep them on your website when they could have otherwise left.
In our first example above, someone searching for our Content Tips blog post using the wrong url won’t be too far away from what they’re looking for if they find this:
They’re only one click away from our blog and will be able to easily find the post.
Obviously, it’s not quite as perfect as landing on the exact page a user is looking for, but as we mentioned above, that’s just not always possible.
Now imagine this:
You type in a url for a specific page you’d like to visit on a particular website and get the image below:
What do you do?
Well, the generic 404 page gives us nothing to work with. We don’t really know if the website we thought housed the page even exists, and we obviously have no links on the 404 page to guide us to different pages on the site.
Personally, I would click the back button and search for something else.
AN EASY HACK: USE ANALYTICS TO IMPROVE SITE PERFORMANCE BY TRACKING 404 TRAFFIC
Having a well-designed custom 404 page isn’t good enough.
In fact, the goal of any custom 404 page, in addition to keeping people on your site, should be to give you insights on how you can improve your website’s performance.
You can track hits on your 404 page using tools like Google Analytics, which allows you to check for broken links and the origin of traffic to the page.
Here’s a quick step by step guide using Google Analytics:
STEP 1: Open Google Analytics
STEP 2: Under the “Behavior” tab in the toolbar, click on “Behavior Flow”
You will see a visual representation of the traffic flow through your site. Your 404 page will not be listed under “Starting Pages” (if it is, then this step by step guide should be the least of your concerns).
STEP 3: When you’re in “Behavior Flow,” find your 404 page
You should find it among your user interactions listed as “/404”. Hover the mouse over “/404”.
STEP 4: Click and you will see a drop down menu with three options. Click on “Explore traffic through here.”
This brings you to a new page that shows how people arrived at your 404 page and where they navigated from there.
STEP 5: Use this data to identify broken links you may not have known about and take action by fixing them.
If you find that users are regularly misspelling a url (which leads them to the 404 page), consider simplifying the url and setting up a 301 redirect away from the old url.
You can also determine the effectiveness of your 404 page in retaining traffic. If everyone is leaving, you may want to provide more helpful links or make the page more engaging.
If people do stay on the site after landing on the 404 page, you will be able to see the subsequent pages they visit, which can help you identify what’s working and double down.
For example:
If people tend to go straight from your 404 page to your contact page, consider customizing your 404 page with direct contact information.
YOUR 404 PAGE: WHAT TO DO
Above all else, your 404 page should explain why your users are seeing the unexpected error message and direct them back to helpful links on your website so that you don’t lose visitors.
Be honest about what’s going on and don’t be scared to own the error with some humor and personality to make the situation less frustrating for your users. This will also help them find what they are looking for.
Not only does a custom 404 page point out that something went wrong, it can also make light of the situation by adding your company’s personality or a brand-reinforcing design to the page, further enhancing the user experience.
EXAMPLES OF GREAT CUSTOM 404 PAGES
Here are some of the companies that are absolutely owning the 404 error and spinning it to their advantage:
Airbnb:
Airbnb uses a light-hearted animation of a girl dropping her ice cream to distract from the unfortunate situation of landing on a 404 page in addition to a list of helpful links.
GitHub:
GitHub uses humor and pop culture references on their 404 page that is on-brand, and directs users to a search bar to find what they are looking for.
The Atlantic:
The Atlantic’s 404 page doesn’t use comedy, but it does a great job creating consistency with the rest of the website and includes a relevant graphic to draw you in.
Entrepreneur:
Entrepreneur’s 404 page is neither funny nor especially pretty, but it does a tremendous job predicting what a user may be looking for and makes it easy to click on one of their top resources.
Entrepreneur:
Another great example of an on-brand, useful 404 page. This one from Basecamp even helps users understand the issues that may have led them to the 404 page in the first place.
NFL.com:
It doesn’t get much more on-brand than this 404 page from NFL.com. The very relevant page also includes a link straight back to the homepage, along with the navbar for accessibility to all other major pages.
A few additional 404 page recommendations to keep in mind:
- Make the 404 page design consistent with that of your website. If a user has been there before, they will be more likely to stick around due to the familiarity
- Make sure the user understands they have found the page in error
- Use Google’s Webmaster Tools to verify that your 404 page actually returns a 404 error, or ensure the content depth is deep enough to avoid triggering a “Soft 404”.
YOUR 404 PAGE WHAT NOT TO DO
There are a certain cardinal sins your 404 page should never commit:
1. Don’t use a generic page that fails to link back to your website
We’ve already covered that.
2. Don’t use a random page on your website as your 404 page
Perhaps the biggest faux pas is making your 404 error be a copy of your home page, contact page, or really any other unexpected page without any explanation. You don’t want to leave your users confused, or worse have them leave your site to find business elsewhere.
Not only that, but redirecting a 404 error to a homepage or similar page on your website can cause major SEO issues.
Here’s why:
If nonexistent pages are redirecting to irrelevant pages on your website, Google starts to associate those pages with 404 errors, which can put you at risk of Google de-indexing one of your website’s major pages.
Google actually wants you to have a custom 404 page, and it indexes these pages just like any other page on your website.
3. Don’t use your 404 page as a crutch
And although it’s important to have a custom 404 page, it’s also important that people aren’t landing on it too often–stay on top of your broken links and eliminate/reduce them as much as possible.
Your 404 error page won’t be harmful for your SEO efforts unless it becomes a crutch for too many links. If it does, your SEO will suffer because Google will recognize the fact that people are failing to find what they need on your website. Soft 404 errors can also affect SEO...
THE BOTTOM LINE
As meticulous as you may be with the construction and management of your website, the occasional 404 error is nearly impossible to avoid.
The best plan of action is to use your 404 page to your advantage. Give users access to the pages they may have been looking for, reinforce your brand, and be honest. This can only be done through a custom 404 page.
Finally, be sure to use your 404 page as a tool for the improvement of your website—a security system of sorts. By having a great 404 page, and tracking traffic to it, you can make sure users are finding what they need on your website.
