How To Make A Custom 404 Page

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:

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:

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.

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.