How to Create a Great Custom 404 Error Page

Evan Hall, SEO Strategist

Updated 7/16/20 to include new information.

You’ve spent a lot of time making sure your website is user-friendly, has a descriptive navigation, is organized in a way that makes sense, but what if someone makes a typo when typing in a URL? What if another website links to a page you don’t have any longer? What will the user see on your 404 error page?

If it’s a default server error page, it will be an ugly, confusing experience that is sure to drive them away:

""

Server error pages are pretty rough to look at, and what’s worse is that they don’t help users navigate to the actual website.

A basic 404 error page is better, because it has main navigation, but is still not ideal:

""
404 error page from redwingshoes.com

The problem is that pages like this aren’t clear about what’s happening, and they don’t help users stay on the site.

eFax has a custom 404 page that is pretty good. It’s not a creative or silly 404 page, but it does a very good job of getting users back on track:

""
404 error page from efax.com

Creating a functioning custom 404 page isn’t hard. By following the steps in this guide, you can deliver a 404 page that will keep users from leaving your site by helping them find what they are looking for.

Step 1: Design the Page

At the start of your design process, you need to decide how funny and creative you want your custom 404 page to be. Some brands have elements of creative design or fun in them already, and the 404 page is a great way to show that off. Canva has a great list of things you can do to make your 404 page creative and interesting.

""
404 error page from moz.com

Not all 404 pages need to be creative, though. Some brands are more serious, and their 404 pages can be just about getting users to where they want to go.

Either way, a good 404 page should have these features:

  • A clear statement that the page the user requested isn’t available
  • Advice to help your users correct a possible mistake in the URL
  • The main header and footer navigations
  • Links to important sections of the website
  • A search bar for the website’s internal search function

At the very least, your 404 pages should tell the user there is a problem with their request. We don’t even have to use the term “404” to do this. People who aren’t digital marketers don’t need to know about HTTP response status codes.

We want the user to understand that even though the content they wanted isn’t at the URL they used to get to our site, it’s probably still available, and they can navigate to it. That way, they are less likely to bounce and go to a competitor’s site, and you increase the chances that they will convert on yours.

Step 2: Configure the Server

Nowadays, most content management systems have a built-in feature for 404 error pages, but not always. If your infrastructure doesn’t support them out of the box, then you’ll need your developer to configure the server for it. Here are technical instructions for Apache, Microsoft IIS, and Nginx servers if you need to do it yourself.

If you have to configure your webserver to show custom error page content, an easy way to generate HTML for the error page is copying the source code of a regular website page. Change the main content section to show the error message, and your 404 error page will match the rest of the site pretty well.

If your website is developed as an application with frameworks like ReactJS, Angular, or Ruby on Rails, you’ll need the routing part of the application. These approaches tend to look like creating a catch-all route that sends users to a 404 page component.

While doing research for this post, I found this novel idea for recommending the most likely correction of a non-existent URL. If your infrastructure is capable of this type of feature, definitely add it to your error page.

Step 3: Test Your Configuration

However your infrastructure is configured, there are a few best practices we must have in place for a proper 404 error page.

Return a 404 HTTP Response Code

Displaying the missing content message and returning a 200 status code (the normal response given for a working web page) will confuse crawlers, and you will receive soft 404 errors in search consoles. Test for this with a crawler like ScreamingFrog or an HTTP status code checker by inputting a bogus URL like “www.yourbrand.com/asdf.”

""

Give the Error Page a Descriptive Title Tag

Page titles are visible in browser tabs and available to users using assistive technology like screen readers. We want to make sure that our error message is clear to everyone. Giving the error page a unique title will also help us with web analytics down the line.

Put Web Analytics on the Error Page

We’ll want to see how often users encounter a 404 page and where they go after.

Don’t Redirect to an Error Page URL

Make sure your website is just displaying the content of the error page and not redirecting the user to a URL like /404 or /error.html. Redirecting will prevent users from examining the problem URL, and it won’t send useful information to your web analytics.

Don’t Redirect to the Homepage

Sending all users that would otherwise see an error message to the homepage seems like a clever solution, but search engines don’t appreciate it and will treat the instance as a soft 404 anyway.

Don’t Use a Meta Refresh Tag Redirect

I’ve seen some websites use a meta refresh tag to send users somewhere else after being on an error message page for a few seconds. Don’t do this. Navigating a user off of a page without their consent is usually a bad practice.

Step 4: Track 404 Sessions in Google Analytics

Paradoxically, we don’t want users landing on our 404 error pages, but we want to monitor that traffic when they do. We want to know how well our error page succeeds in recovering the user’s session and guides them toward content.

We also want to know which URLs are broken so we can fix something that changed with our website or redirect the 404 URL to something relevant. Luckily, if we followed best practices, it’s easy to see how our lost users are doing in Google Analytics.

See Which URLs Return 404

Create a segment to only show pages that use the title tag of your custom 404 page:

""

Then go to Behavior > Site Content > All Pages to see the pageview report of the 404 error pages:

""

Here we see users are still navigating to some posts we removed in a content cleanup project. We’ll need to create redirects for these to solve the problem, but how is our 404 page performing after people see it?

To answer that question we’ll need to take a look at the navigation summary report for one of these pages:

""

Only 44% of users are exiting the site after seeing this page. Not bad, but not ideal.

See Which Pages are Sending Traffic

If we want to see which other domains are sending users to our 404 pages, we can add Full Referrer as a secondary dimension to the pageview report:

""

Broken backlink reports should give us most of these pages over time, but the backlink reporting services are limited to how quickly they can crawl the web. If we have a time-sensitive need to know which other pages are sending users who are at risk of exiting our site, this report gives us that.

Link Rot is Real and That’s Okay

The web is not static. Pages are constantly being created and deleted, and the links between those pages are breaking and disappearing every day. This phenomenon is called “Link Rot,” and it’s naturally occurring.

Our links are going to break over time. As SEOs, web managers, and good citizens of the web, we should be making sure users are able to navigate through link rot smoothly. And the first line of defense is a custom 404 page.

Evan Hall, SEO Strategist

Evan Hall

Senior SEO Strategist
Senior SEO Strategist

Evan is a senior SEO strategist with nearly a decade of experience in digital marketing, including web analytics and split testing. He loves solving technical SEO problems and is currently learning JavaScript and Python. When not taking the SEO world by storm, Evan enjoys table-top games and reading science fiction.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Comments

  1. I would recommend that all 404 pages have these things.
    * A search form so that the user can search your site for what they were looking for.
    * A contact form so that they can ask for help if the error persists.
    * A little self-deprecating humor regarding the error. I’ve seen some really funny ones in the past from companies that you wouldn’t think have a sense of humor.

  2. I completely agree – when I worked at Amazon, I remember users loved the little doggie that appeared on 404 pages. I also agree with Chris re: self-deprecating humor – it makes your company more memorable.

  3. great post.. and yes.. after having done over 500 websites.. it’s still not used… it should be the first thing after site redesign is completed.
    like as part of posting the new site.

  4. dave – yea you have to do that with mod_rewrite – which can get complicated but do some research on google about it. There is also a new service from google webmaster – 404’s that generates links on your 404 pages for related urls in your domain users may have wanted to go to. You can use http://www.httpviewer.net/ to check to make sure your http status codes are setup right for 404 pages too

  5. Great post is right – Thank you very much! I agree it should be contained within many sites. As I am re-designing a site now I was thinking a humorous and customized 404 page would be a great idea. Not only does this site show me how to do that but it gave me even more! I love the other ideas people had to add to a 404 page – like a search feature and form!! What a great idea and so simple. Thanks much again and good luck with your futures and web designs 🙂

  6. I’m using 1and1 as my domain keeper and host.
    my .htaccess file reads:
    ErrorDocument 404 /404.php
    and that is it (am I missing something?)
    the 404.php file exist. and they are both on the server, but I still received the same default error.
    This is supposed to be a broken… and yes it’s long.
    http://super-private-server-thats-so-high-end-you-dont-even-know-how.k8r.us/like-its-way-beyond-anything-youd-ever-think-of-like-in-forever-dont-even-mess-with-this-divine-knowledge/pasgggg
    SEOT: mBcWbn6FEsRp3EnIXe3G

  7. Using your advice, I built a notfound.html file about a year ago.
    I update it whenever I see a bad link that I can’t get the referer to fix, by listing the correct link on the page.
    But I can’t find a way to track the activity that it sees and whether or not my approach is effective.. I’d like to know how often a request actually gets there and where it goes from there. like GA Navigation stuff like Landing page and Next pages.
    notfound.html doesn’t show up anywhere on GA or in Cpanel that I can find.
    Any ideas?

    1. Hi Satta,

      It’s possible to redirect URLs you know are going to return 404 otherwise, but you’ll need to create redirect rules for those instead of using ErrorDocument. Dreamhost has a good guide to the types of redirects you might want to use: https://help.dreamhost.com/hc/en-us/articles/215747748-How-can-I-redirect-and-rewrite-my-URLs-with-an-htaccess-file-

      One thing we don’t recommend is redirecting every missing page to the homepage instead of returning a 404 message. That’s an instance of a “soft 404” and it’s not helpful to users or search engines. If you want to redirect users to other content instead of showing an error message, help users by sending them to the next best piece of content to answer their query.

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay