Optimized 404 pages calm frustrated users, keep visitors on your site, and create a positive brand association for your business, among other benefits.
Web developers and marketers dread website error pages. I mean, what’s worse than your website not performing as you or your users anticipate?
But traffic to your website’s 404 page—also known as a "Page Not Found” error page, which tells the user they’ve tried to access something that has moved, was deleted, or never existed—doesn’t have to be the end of the world.
After all, there’s so many reasons why a user can land on one: misspelled URLs, a missing page redirect, or content that was moved or deleted. And as users, we’ve all landed on them at some point or another. We get that these things happen, and if the 404 page is user-friendly and helps us get where we want to go, it’s no big deal.
So as business owners and website managers, it’s our duty to make sure we optimize our 404 error page, to remove the confusion (and maybe frustration) of not landing on the page they anticipated. We turn what could be a negative situation into a positive one by guiding our users toward relevant content, and delighting them along the way.
Let’s break down the whys.
1. A generic 404 encourages your traffic to leave.
Look at it—no help whatsoever. With this dead end, where do we go now? (Answer: Your competitor’s website, or back to Google.)
2. An optimized 404 keeps visitors on your site, and can drive traffic toward specific pages.
Now’s the time you can steer traffic toward the content you want to highlight. That might include:
- Your homepage
- A blog feed of popular or trending posts
- A blog that isn’t ranking well yet, but you think has great value for your user
- Popular or suggested products
- A Frequently Asked Questions page
You may also consider including a search function, so if your suggestions don’t hit the mark, your users can still search for what they’re looking for and stay on your site.
Of course, less is more. You don’t want to overwhelm the user by including all of these elements on your 404 page, so carefully identify where you’d want your traffic to go next, and build toward that end result.
Over time, you can look at the clicks and performance of your 404 page and see where your traffic goes next. If your bounce rate is very high, you can adjust or A/B test links to different pieces of content.
3. An optimized 404 creates a positive brand association.
People are going to hit a 404 page even if you do everything perfectly on your website. Users may mistype a URL, or another external website may link to the wrong page, etc.
It doesn’t matter why traffic lands there, so you should avoid making any statements that suggest it was somehow their fault (e.g., “Looks like you’ve made a mistake!”).
All that matters is what you do now that they’re there: Own the fact it’s mildly annoying for your traffic, and make an effort to fix it for them.
The more helpful you are, the more you delight your traffic, the more likely they are to associate your company positively—and the more likely they are to engage with your business.
4. It is an opportunity to showcase your brand’s personality.
As social strategist Renny Gleeson says in his great TED Talk all about 404 pages, “Little things, done right, matter. Well-designed moments build brands.”
If you think about your 404 pages as a way to reaffirm your brand’s identity—maybe through humor, or slick graphics, or snark—your marketing team can have fun developing a unique page that also delights your target audience.
After all, a lot of traffic to your 404 page may not know your business very well, or even at all. This is a chance to introduce your brand’s personality to them for the first time. It could be the difference between a bounced user and a future prospect.
Here’s some inspiration:
The LEGO 404 injects a little humor through its full-page graphic of a minifig. Since it’s primarily an ecommerce site, it makes sense that there’s one large CTA to “Start Shopping.” Users can still access the rest of the site through the header and footer navigation.
Imgur is essentially one large gallery of funny memes, so it’s fitting its 404 page would also be a gallery. A clever animation causes the figures’ eyes to follow your pointer around the screen.
If you enter “hubspot.com/404” in your browser, a redirect takes you to an in-depth blog all about 404 pages. Smart! But if you land on it from a mistyped or broken link, you’ll see a great 404 page: It thanks the user for their patience and provides helpful links to the blog, to products, and to sign up for a demo.
A website about a cookie doesn’t need much here besides a “Back to Home” button, but they’ve still found a way to have fun with their 404 page while also cleverly highlighting the product.
MoMA’s 404 error page features a bit of humor by linking to the painting “OOF” in its permanent collection. To help the user stay on the site, it includes the header and footer navigation, a search feature, and contact link.
BigCommerce gets a lot right with its 404 page: a beautiful custom illustration, links to specific content, and a chatbot in the lower right hand corner with a message of “I can point you in the right direction.”
404 error pages should not just be about acknowledging an error, or you run the risk of frustrating your audience. It should above all convince your traffic to stay on your website despite the error. Your business should see 404s as opportunities to help your users not only find what they were looking for, but also feel connected to your brand.
Subscribe to Morey Creative Studios' Marketing Blog
Get Morey Creative Studios' latest marketing articles straight to your inbox.
On this episode of 'Inbound & Down,' host Jon Sasala chats with marketer, podcaster and author, David Bain about his book ''Marketing Now,'' based on hours of audio/video interviews. Read More
On this episode of 'Inbound & Down,' host Jon Sasala sits down with the Go-to-Market Lead (Web & CMS Hub) for HubSpot, Luke Summerfield to chat about the inbound marketing company's brand new Content Management System (CMS) Hub and his Growth-Driven Design initiatives. Read More
Morey Creative Studios formed an accessibility team to educate staff and clients on compliance measures and to contribute to the shared goal of making the web a more accessible place for all. Read More