All web users will at some point encounter the dreaded 404 page
. It’s pretty much inevitable. But even though it’s common, that doesn’t mean it’s something for brands to treat lightly.
When your users land on a 404 page, it can cause frustration. It makes your visitors more likely to leave your website, and high bounce rates can hurt you when it comes to SEO (search engine optimization). And if you have too many links that lead to 404 pages, it makes it look like you don’t take your business website seriously and aren’t worthy of trust.
In short, those 404 pages matter.
When it comes to 404 pages, the main thing you can do to improve your visitors’ experience is reduce the likelihood of them ever landing on a 404 page to begin with.
But you should also accept that you probably can’t avoid all possible instances of your visitors coming to a 404 page on your website, so your secondary goal should be to make sure that when they do, the 404 page is well designed and useful.
You might like…
Step 1: Find Your Current Broken Links
There are a number of tools designed specifically to help website owners quickly and easily identify all the broken links that are serving 404 errors on a website. Better yet, many of them are free. A few of your top options are:
Use a Free Broken Link Checker
A number of websites provide free tools for finding broken links. With tools like Broken Link Check, Ahrefs Broken Link Checker (pictured below), and Dead Link Checker, all you have to do is plug your website URL in and wait for the website to scan the site for you.
ahrefs broken link checker
Use the Broken Link Checker WordPress Plugin
If you have a WordPress website, then you know by now that there’s a plugin for just about everything. Naturally, that includes finding broken links. The free Broken Link Checker plugin will monitor the links on your website, compile a list of the ones that don’t work, and make it easy for you to edit or unlink each one.
One downside of using a plugin like Broken Link Checker is that it can temporarily slow down your site while it’s running, so do keep that in mind when deciding what to use.
Find Broken Links with SEO Spider
The SEO Spider tool from Screaming Frog will crawl your website to automatically help you identify a few different issues, including broken links. And for websites with less than 500 pages, using it is free. To find broken links with SEO Spider, you will need to download the tool. Once you have it downloaded, you just need to enter your URL and click Start. It may take a few minutes to crawl your whole website.
You’ll be able to see broken links by clicking on Response Codes and selecting Client Error. Find out where the link is on your website by clicking on the link, and then selecting Inlinks. To get a list of all your broken links in spreadsheet form (which can make tackling the project of fixing them easier), choose Bulk Export, Response Codes, Client Error Inlinks.
Step 2: Fix Your Broken Links
Once you have your list of broken links, it’s time for the harder part. You need to go in and fix each one. Determine which ones need an updated link, and which links should simply be removed. Track your progress as you go so you make sure you don’t miss any, and open each web page to double-check the updated link yourself before moving on to the next.
This takes time, but it ensures your visitors will have a better experience on your website. It’s best to take this step once every three months or so to fix any new broken links that come up as quickly as possible. And the more often you do it, the less work it will be each time. If you’re lucky, you’ll spot the bad links before any visitors do.
Step 3: Update Your 404 Page
Even if you regularly check for broken links, there will likely be times you don’t spot one in time, and other times when users enter a URL wrong. Some of your visitors will almost certainly land on your 404 page no matter what you do. So make the most of it when they do.
404 Page Best Practices
To make your 404 page more useful, consider some of the main 404 page best practices.
1. Keep it on brand.
You want people to know they’re still on your website when they land on a 404 page, to reduce confusion. Many brands still use generic 404 pages that have no branding and no visual relationship with the rest of the website.
A page like this takes someone further away from your website mentally and almost certainly ensures that they’ll click away completely.
Instead, you want people to know they’re still with you. Make sure the page manages to stay within the overall branding style and messaging you want to put forth. NASA pulls this off with a page that shows the beauty of the stars, while still including the NASA logo and website’s main menu.
Clearly you’re more likely to stick around if you land on that page than the one up above.
2. Make it helpful.
The visitor that lands on your webpage got there while trying to get somewhere else. You don’t want them to give up on finding the original page they were trying to get to, so do what you can to make it easy.
Include a search bar and suggested links that help people navigate back to the main areas of the site most of your visitors want to be on.
404 page includes a hamburger menu and a search bar up top, along with links to some of the main pages they want to drive visitors to, like New Arrivals and Bestsellers. Also, it includes a cheesy pun, so points for that.
Those who end up stuck on a 404 page on their website know that it doesn’t have to be the end of their destination, they can easily find their way back to a more useful page.
3. Inject some personality.
404 pages are often technical and dull. Your user is already stuck seeing something other than what they were trying to find, you don’t want to make the experience any worse – so make it better instead by being entertaining and bringing some real personality to the page.
Both of the examples above do a good job of reflecting the personality of the brand and adding something a little more interesting to the experience of landing on the page.
How to Update Your 404 Page
If you’re convinced that it’s time to create a custom 404 page for your website, but you’re not too sure how the technical side of updating your 404 page works, that part shouldn’t be too difficult to figure out.
Check with your web hosting provider for instructions on how to access and update your 404 page. If you use WordPress, you can follow these instructions, or go an even easier route and try a plugin like this one.
If you use HostClick, here are the steps to take (If you don’t use HostClick (you can sign up here!):
- Login to your cPanel account.
- Find and click on the icon for Custom Error Pages.
- Select 404 Wrong Page from the list.
- You’ll see a page with a text box. Fill this in with the html code for the page you want to appear.
- Click save.
- Navigate to a fake URL on your website to check that your update worked and you like how it looks. (You can usually create a fake URL by adding a random letter to the end of the real one, for example http://your-site.com/a).
And you’re done! If creating the actual html code for the page sounds out of your depth and you don’t have a good web designer to turn to, HostClick site builder makes creating all your pages—including a 404 page—fast and easy.
Want Inspiration? 10 Great 404 Page Examples
For more 404 page design inspiration, check out these ten examples.
1. Disney
Disney’s 404 page has an extremely on brand animation that references one of its popular movies, Ralph Breaks the Internet. It shows Ralph breaking through the numbers 404 (get it? Listen, 404 page humor doesn’t have to be SNL ready), and features the character KnowsMore from the same movie alongside a search bar that makes it easy for anyone that lands there to find what they were originally looking for.
It’s functional, clever, and fun.
2. Atlas Obscura
The Atlas Obscura 404 page is super simple, but manages to stay on theme for the website. “You’ve gone off the map” is a phrase that makes perfect sense for a website for travelers interested in the “world’s hidden wonders.” And while the page foregoes a menu or search bar, it makes it easy for people to navigate “home” where they can find all those things.
3. Birds Barbershop
Admittedly, a lot of the examples on this list are from big websites with big budgets to match. So to show you how a small business can keep things on brand with their 404, we move to a local barbershop based in Austin.
The Birds Barbershop 404 page keeps the website’s main menu at the top, so visitors have an easy way to navigate to any page they’re interested in (or to book a service, the website’s main call to action). There’s a clear “Oh no!” centered on the page, so people can tell at a glance they’re not on the page they meant to reach.
The main background image of the page is a photo of the side of one of their locations which is painted in rainbow colors—an image that’s literally representative of the business (being a photo of it), but also speaks to its branding of being an inclusive business that supports the city’s diversity.
4. IMDB
Do you love movies? Most visitors to the IMDB website presumably do. Instead of being bummed out when they land on a 404 page on the site, they get the delight of seeing variations on popular movie quotes.
Pop culture fans know the thrill of seeing a reference you recognize, and IMDB is smart to take advantage of that. The site also includes a link back to the imdb homepage, as well as the IMDB page of the quoted movie.
5. Wired
Wired’s 404 page includes a pretty straightforward message about the page being missing, as well as links to some of the website’s current articles. So why did it make our list? Because it does something so many 404 pages don’t: it asks visitors to alert the website to the broken link so they know to fix it.
Why not enlist your visitors to help in the cause? They know it’s optional (it’s not like you’re demanding their work), but it also makes clear that you’re actively working to make their experience better.
6. NPR
The National Public Radio (NPR) 404 page starts with the main navigational information you might need: the main menu, a link to the search function, a link to how to report the page missing, and one to the homepage. Further down the page—where you could miss it if you’re not paying close attention—is where things get clever.
The bottom half of the page is devoted to stories about things and people that have been lost—from Amelia Earhart to Waldo (of Where’s Waldo? fame) to the lost city of Atlantis. NPR listeners are likely to be curious types, so giving them a few interesting on-theme stories is a good way to ensure they leave the 404 page with curiosity and interest, rather than frustration.
7. Chewy
You know what Chewy customers like? Pictures of cute animals. So naturally, the website delivers. The 404 page includes the basics: a search bar and a link to the homepage. And it supplements those elements with pictures of cute pets. What else could you need?
8. Spotify
Spotify’s 404 page is clearly designed with music lovers in mind, with an image of a record player and line that sounds right out of song lyrics “404s and heartbreaks.” The page also includes the website’s main menu for navigational purposes, and a link to the FAQs and Community pages.
9. Slack
Slack’s 404 page includes a colorful, interactive animation. It’s enough to keep you on the page for a few seconds just to see what happens as you scroll from side to side, or click on a chicken. But once you’re ready to get back on track, there’s a link to the Help Center, along with the website’s main menu and footer links.
10. Canva
Slack may offer an interactive animation, but Canva goes one further and provides an interactive puzzle on its 404 page. Way to take the bad experience of a broken link and make it something unexpected and fun.
And for a website all about creativity, a visual puzzle makes perfect sense for the site’s users. There’s also a link back to the homepage, for once the visitor finishes the puzzle and is ready to head back.
Ready to Transform Your 404 Pages?
Businesses do so much work to get people to their websites, the last thing you want is for that work to be wasted because a customer bounces after landing on a generic 404 page. If 404 pages must occur (and as we said at the beginning, they’re pretty much inevitable), then you can put them to use to do more for both your brand and your users.