What is a 404 error page? And how a custom page boosts your brand.

Imagine you’re driving down an unfamiliar street. You see that the road ahead is blocked, but you can’t see a diversion sign and don’t know which way to go. You’re left feeling stuck and frustrated because you’re unsure how to continue your journey.

A 404 error is the website equivalent of that roadblock. And a 404 error page acts as that bright yellow diversion sign.

Every website experiences navigation problems from time to time. So a 404 page, ideally with a custom message, is something every site needs. It gives your users the reassurance they need to stay on your website and try again to find the content they’re looking for.

Here we take a closer look at the 404 error, exploring its definition, best practice and some incredible 404 page examples.

Contents

• What is a 404 error page?
• What causes a 404 error?
• How 404 errors affect your website
• 404 error management: best practice
• Benefits of a custom 404 page (plus what to include)
• 5 of our favourite 404 page examples

What is a 404 error page?

A 404 error page appears when a user tries to navigate to a website page that doesn’t exist. The chosen URL can’t be found on the server.

On most websites, a 404 error page will present an error message that says something like this:

• 404 Error
• 404 Not Found
• Error 404 Not Found
• 404 File or Directory Not Found
• HTTP 404 Not Found
• 404 Page Not Found

What causes a 404 error?

So why does a 404 message appear? There are a couple of different things that can go wrong when a user is navigating to or around your site.

Mistyping a URL: a user makes a mistake when typing or copy-pasting your URL into the address bar of their browser

Broken or dead links: there’s a mistake in a link URL or a link points to a non-existent webpage

Content restructure or removal: you’ve chosen to move or remove a page on your website without redirecting its URL

How 404 errors affect your website

Lots of 404 errors are bad for user experience (UX). When users continually fail to find what they’re looking for, they may give up on a website – and a brand. A scary 88% of consumers say they’re less likely to return to a website after just one bad experience.

Too many 404 errors on your website are also bad for SEO. Poor UX is part of the problem. But if a page that had lots of inbound links has been moved or removed, all of that valuable link equity goes to waste. This can affect your domain authority and SERP rankings.

While a few 404 errors are inevitable, particularly for big websites with lots of changing content, you need to know how to identify, fix and prevent them where possible.

404 error management: best practice

Identifying 404 errors

There are several tools available that can help you to spot 404 errors on your website. Google Search Console is one of the free ones. Here’s what you need to do to get a handy list of 404 errors.

Go to your Google Search Console website dashboard. From here, go to Index in the left-hand sidebar and click on Coverage. Look at all errors. Select Submitted URL not found (404). And view your 404 error list. Easy!

Fixing 404 errors

A 404 error isn’t necessarily a problem. If content has been permanently removed from your website, a 404 error and an appropriate 404 message are considered best practice. However, there are some instances where you’ll want to fix 404 errors.

Depending on what has caused a 404 error, you can correct it by restoring an accidentally deleted page or by fixing broken internal links.

If a page has been permanently moved you can redirect users to the new page. With a 301 redirect, you can send users straight to relevant content and preserve link equity from the old page too.

Preventing 404 errors

Going forward, think carefully when you move or delete content to avoid creating too many 404 errors on your website. Consider which related content provides the same or similar information for a user and use a 301 redirect wherever it makes sense.

For example, if you delete the page for a product you no longer stock, you might like to redirect users to a higher level category page. From here, users can continue their journey without bumping into a 404 message.

Benefits of a custom 404 page (plus what to include)

You can’t (and shouldn’t) avoid 404 errors at all costs. This would lead to poor UX because users would be redirected to irrelevant content. A 404 error page is a website essential. And when you customise your 404 page, you stand to get the most benefit from it.

With a custom 404 page you can:

• Reduce bounce rate
• Improve UX
• Showcase your brand personality

You can also include all of the essential features that characterise a good 404 error page.

An acknowledgement of the problem

A good 404 page includes a clear message acknowledging the problem and its possible causes. Avoid technical jargon here. Most web users won’t understand it and it does nothing for your branding.

A solution

Without a clear next step, users may decide to leave your website. So give users a couple of useful routes away from the roadblock. Include a link to your homepage, product category pages or customer support.

A bit of branding

A 404 error page should always fit with the style of your website branding. Find a way to do all of the above while communicating a bit about who you are as an organisation and you’ve hit the nail on the head.

6 of our favourite 404 page examples

Want some inspiration for your custom 404 page? Here are a few examples that we love. They all offer the very best UX by turning a simple error message into a memorable brand experience.

Virtually Visiting

Here’s a 404 page we created for our client Virtually Visiting, a company that provides virtual, 360 tours of the world’s best destinations. A Lottie animation illustrates the brand and a touch of humour, while users have all the links they need to navigate back to an active page.

IKEA

In this 404 page example, IKEA combines quirky animation and helpful links to go beyond the bog-standard error message experience. Users can click on the link to go straight back to the IKEA homepage or scroll down to find a range of other site links.

Cadbury

The Cadbury website provides an excellent 404 page example. The cookie image and heading are beautifully on-brand but there’s lots of useful info there too. Users get an apology, an explanation and options for what they can do next, all written in easy-to-understand language.

Headspace

Headspace uses its 404 error page to communicate what its brand is all about. During a moment of frustration, users are encouraged to take a deep and mindful breath before navigating back to the website homepage.

Patagonia

Another great 404 page example! Here, Patagonia uses striking imagery and on-brand language to convey their brand’s informality and sense of humour. But they don’t stop there. They provide links – to both the website homepage and customer support – so users know where to go next.

Octopus Energy

We could happily while away a tea break playing with the Octopus Energy 404 error page. Give it a go! Just move your cursor to send little purple octopuses bouncing around the screen. This is a great example of how a 404 page can be used to surprise and delight users.

Need help with your 404 error page?

So many websites out there don’t provide even a basic 404 error page. Others don’t have a custom 404 page, which means they’re missing out on an opportunity to delight users and stand out from the competition.

If you want a 404 page with a difference, get in touch with the Radical Web Design team. From bespoke website design, to redesign, to little tweaks and improvements, we provide a range of web design services in Manchester and beyond.