404 pages: Our tips & inspiration for your website

Your website needs good 404 pages. They tell visitors that the page they’re trying to reach is not available. The best ones however will also convey a sense of personality, and send visitors to a useful related resource on your site.

In this article you’ll learn why the 404 error page is important for your website user experience, how to create a 404 page that your visitors love, and we’ll also share some inspiring examples.

Start fixing 404 error issues with the help of our cutting-edge Quality Assurance features

Learn more

What is a 404 error page?

A 404 error page should be displayed when a client (such as an Internet browser) tries to access content that’s not available on the specified website.

Some websites use the default “Page not found” message created by their Content Management System (for example, WordPress).

However, it’s possible to customize this page and deliver a much better, more engaging experience. Read on…

How 404 errors occur

404 errors occur when a website server cannot retrieve the requested URL in response to a client’s request, because this URL is not available. The 404 error can be compared, for example, to the “sold out” display in a store, or the postal address of a school friend who has since moved.

URLs can no longer be found by the server for many different reasons. For example, if you’ve changed your website domain, or if URLs have been moved or changed, or if URLs have been completely deleted. 

As a rule, old URLs should be redirected to a new page via a 301 redirect. If this does not happen, calling up these URLs then leads to an error message in the form of a status code 404.

Tip: You should check your website regularly for 404 error codes. We recently explained how to find and fix 404 errors in a separate article.

What happens if I don’t configure 404 pages?

If no error page is created, the server won’t be able to deliver an adequate response to “resource not found”, as described above.

This is not good for two reasons: firstly, users don’t know why the called URL doesn’t work, which creates a negative website experience, and secondly the Googlebot gets confused by the lack of a 404 status code.

In both cases, a negative signal is sent to Google, which makes it all the more important to create a 404 error page.You may be thinking, “I can just redirect to the homepage”. However, this is not recommended, because it can lead to so-called “soft 404 errors”.

How to configure 404 error pages

In order to display an error page, a simple entry in the .htaccess file is sufficient. The following entry is added to the .htaccess file:

ErrorDocument 404 /my-404-errorpage.html

This tells the server that if a URL is requested that no longer exists (ErrorDocument 404), then it should serve the page indicated (‘/my-404-errorpage.html’). 

Of course you should create a corresponding page on your domain beforehand. As previously mentioned, many Content Management Systems already have default 404 pages.

In the simplest variant, a 404 error page can look like this:

However, this isn’t very appealing! Such an error page can easily cause visitors to bounce immediately and either go back to Google search, or close the browser altogether. 

Both outcomes are bad for your website. That’s why it’s best to follow these tips for good 404 error pages.

How to make a custom 404 error page

Who wants to be at a dead end, with no info and no way out? Not us. So let’s look at what needs to go on a good 404 page…

First of all, you should tell your visitor’s on the 404 page that the content they’re looking for is not available. To avoid bounces, you should also make it easier for them to navigate further on your website.

In the following section, we’ve collected a few tips on how you can design your error page to ensure a good website user experience.

1. Link to your homepage

The easiest way to keep users on your website despite 404 errors is to link to your homepage, like this:

2. Link to other categories

It also makes sense to inform visitors about possible reasons for the error, and suggest other webpages they might be interested in.

This is how the online store Beauty Bay does it, which also refers to the various online store categories in addition to the home page:

3. Offer a search function

When visitors land on a 404 page, it usually means that they can’t find the content they’re looking for. 

With a site search box, your visitors can search for topics and find relevant content on your website, like this one from WordPress:

4. Offer more possibilities for interaction

Linking to support hotlines, contact details or FAQs can also help your visitors. Always consider what the best next step is for your visitors after landing on the 404 error page and enable this from the error page!

In the above example, Coca-Cola links contact information and FAQs on the 404 page, among other things.

Google, by the way, doesn’t show too much ingenuity with its error page. But as the provider of the world’s largest search engine, it’s obvious which page users will go to next:

5 inspiring custom 404 pages

Besides helping with website navigation, 404 pages are also a great opportunity for your branding. They can be fun, entertaining and unusual.

With a pinch of creativity and a little wink, an annoying error can quickly become a reason for visitors to smile.

Need some inspiration? Here come five creative 404 error pages that we like:

1. Lego.com

Lego shows its visitors the way back to the online store on the error page, and makes hearts beat a little faster with its original design.

2. Disney.com

Of course, Disney knows how good storytelling works. No one can stay angry for long with Mike the monster.

3. Figma

On first glance, the 404 page of the design tool Figma is very simple. But take a closer look – it’s actually an interactive design that lets visitors move and manipulate the anchor points on the 404 text. Which perfectly conveys what Figma is all about.

4. Dribbble.com

The creative platform Dribbble even offers visitors an interactive experience on the 404 page. Very cool!

In line with the website’s theme, the 404 page shows and links to popular designs in freely selectable colors.

5. Zendesk.com

Zendesk chooses a rather unspectacular design for the 404 page, but combines it with stellar text.

An awkward error is transformed into a great achievement – such a clever, creative idea.

Final thoughts on 404 pages

404 errors are an inevitable part of operating websites. So in addition to regularly checking for unreachable pages, it’s also important to handle 404 errors correctly.

With an appealingly designed 404 page, you can ensure that visitors can still find their way around quickly and don’t leave your website in a hurry if they haven’t found a desired URL.