How to Design A 404 Page That Drives Traffic to Your Website

There is a thin line between engaging and enraging when it comes to a site’s 404 error page. They are the most neglected of any website page. The main reason being, visitors are not supposed to end up there. These pages indicate a broken URL, when a server is down, or missing content.

An appealing 404 page offers you a chance to connect visitors with your brand and create an awesome user-experience that leaves them searching through your entire website.

In this article, I’ll share my favorite 404-pages used by top brands, strategies they apply to increase sales, and how you can optimize your error pages for higher conversions, too.

Why a custom 404-page is important

Links can go bad over time. Products get removed, pages get deleted, or there is a change to a website’s structure.

When visitors click on a “dead” link (removed or deleted page), they will see your 404 error page. So you don’t feel too bad, there are times when visitors simply type in the wrong URL. When they enter an incorrect link, they will be redirected to the 404 page.

For example, instead of opening medium.com/@divadsanders (my Medium profile page), try to open medium.com/divad-sanders (this page does not exist). Make sure to come back. We’ve got more to discuss.

See the difference? Typing the wrong URL leads to Medium’s 404 page. A 404 error page will display one of the following messages:

• 404 Not Found
• The requested URL was not found on this server
• 404 Error
• The page cannot be found

Instead of thinking this page as a mistake, think of it as a safety net. A 404 page should not be the end of the visitor’s journey. They should not be forced to close the window, but instead, be redirected to another page on the site.

A 404 page is an opportunity to express your brand and leave visitors with value instead of frustration.

Why branding makes a difference

Let’s say your 404 page was a visitor’s introduction to your entire business. Would they know it was you? Would they get a sense of your company’s personality, offerings, values, or mission?

The more generic and lackluster the page, the greater the disappointment. Also, the more apparent the mistake is. A 404 page should be a happy accident that does not lead to confusion or annoyance.

The best 404 pages are on-brand and continue to tell the story of the business. It is consistent in imagery, voice, colors, font, and message.

Learn more: The Ultimate Guide to Creating a Memorable Brand Identity

How to make the most out of your 404 page

Your site’s homepage should determine how the 404 page feels to visitors.

The homepage acts as an introduction to not only your website but also your brand. The page must deliver a personality that visitors can immediately connect with. First impressions are everlasting.

The 404 page is a continuation of that personality. It should retain the same brand guidelines as any other page. However, you have more opportunities to deliver your brand’s quirkiness on the error page. See it as a hidden gem.

Incorporate your Product

This error page by Disney features one of their most beloved characters, Wreck-It Ralph. As you can see, where most pages are static images, this 404 page offers a fun animated video to enhance the user experience.

The page also includes two references from the movie Ralph Breaks the Internet that only fans would know.

Add search bar navigation

In a situation such as a page being moved, give the user the option to search for the page or the content it contained by including a search bar.

For example, this 404 page on the Star Wars website provides visitors the option to search the entire website to find the page they were looking for. The imagery of an incomplete Death Star that is “not fully armed and operational” is a great nod to the movies.

Even though this is an error page, visitors can still see the brand, story, and personality of the business.

Share your latest offers

A standard 404 page gives users little to no options — go to the homepage or leave the site. There is so much opportunity left on the table. Think about the main goal of your website.

Do you want to gain subscribers, contact information, book appointments, or sell a product? This is your chance.

Ever notice eBay’s 404 page? Their best deals are stationed for you to see in the hopes that you buy. Any page you come across on the entire eBay website will show multiple products that you can purchase. An error page is no different.

Make visitors laugh

Every Medium writer’s favorite place to find free to use images, Unsplash, offers visitors with a funny video for their 404 pages. It features something different every time.

The videos have nothing to do with the Unsplash business. But each one will leave you laughing out loud. Instead of leveraging their products or service, Unsplash is using positive emotions to build a relationship with users and provide an enjoyable experience that makes the brand stand out.

Try it for yourself: Click here and refresh the page a few times.

Take the blame

Businesses receive criticism every day for mishandling shipments, terrible customer service, even poor quality in what they produce. But how many actually own up to their mistakes? Not many.

The coffee giant Starbucks relieves visitors of any wrongdoing on their part. Where most 404 pages seem robotic and automated, this one emotes a sense of remorse. Very human don’t you think? This is not by accident.

Branding gives an otherwise lifeless entity, such as a business, a human personality that customers feel comfortable connecting with. The best way to do that is through the messaging, tone, and voice of a brand.

Let’s go down the list of everything Starbucks does right on this page:

• Apologizes for the mistake
• Expresses their fault in users landing on the page
• Explains why visitors may have run into an error page
• Attempts to remedy the situation with next steps
• Adds multiple links to the homepage, contact page, and sitemap
• Allows visitors a way to comment about the broken link

These components demonstrate the experience visitors should expect when interacting with the Starbucks brand. Ideally, this expression of customer service, accountability, and understanding should be apparent wherever customers and Starbucks connect (online, in-stores, on the phone, etc.).

Fix the broken links

Ideally, your website should not have a 404 page. Every link should function properly allowing visitors to find exactly what they are looking for. However, that’s wishful thinking. Mistakes happen. But a 404 page makes sure you don’t lose potential customers.

The best way to prevent visitors from landing on an error page is to eliminate their need. Check your site for broken links. Depending on how large your site is will determine how often you should review your links.

Search for missing articles, videos, pictures, and even hyperlinks to other sites. You may need to update due to missing links on websites you reference.

If there are just too many pages for you to search through, try using Dead Link Checker. It’s a free tool that crawls through your entire website to identify broken links.

Every 404 page will not be the same. There are a variety of ways that companies design their pages. Some get straight to the business while others elicit a light-hearted approach to their interaction with visitors.

Either way, you want to give visitors a path to prevent them from leaving the website and express your brand to build a connection with them.