404 Day: A guide to error code “404 page not found”

April 4th marks 404 Day – a day of observance for web developers and SEO professionals to acknowledge the humble “404 page not found” error code. Why would we do this? It’s surprising how useful a good 404 page can be.

In this article, we’ll explain what a 404 page is, best practices for using 404 pages, how they differ on different platforms, and some of the best and worst examples of 404 pages we’ve seen.

What is a 404 page?

Error code 404 is one of the most commonly recognised HTTP status codes. When a server returns a 4xx code in response to a request, a client error has occurred. In the case of a 404, the page cannot be found.

Usually, you will get a page with a 404 error displayed when you enter a URL incorrectly or if you click on a link to a page that has been removed or moved elsewhere. Otherwise, you might click on a link that is incorrectly linking to the target page.

A “soft 404” is slightly different. This refers to a page that Google recognises as a 404, but the server has returned a 200 OK status code. The page may display a 404 error in this case or have no main content. It may be an issue where the page loads to the server, but the content isn’t visible in the viewport.

Unlike hard 404 pages, soft 404s always need to be fixed. Too many soft 404s can waste crawl budget as Googlebots see them as crawlable pages before crawling them.

Hard 404s, however, signal to bots that they need not crawl the page, meaning crawl budget isn’t wasted.

SEO best practices for 404 pages

While having a few 404s on your site won’t dramatically affect your rankings, there are ways to handle them which may better optimise your site.

The purpose of a 404 page is to inform the user that the page they’ve navigated to can’t be found and to direct them to more useful pages, such as the homepage or other main pages. The key thing is to ensure you use a custom design and format.

The 404 page should include copy clearly stating that the page is not found, does not exist, or may have been moved. It can include any or all of those suggestions as long as a statement is given.

Be mindful of your audience — if they’re heavy web users, they don’t need too much information about what a 404 page is. If your customers aren’t web-savvy, explain the error to help the user understand what’s happened. Doing so in a friendly and unintimidating way is a bonus for user experience.

You can use a graphic to display the information, as long as the important stuff is in the copy too, or at least in the image alt-text for the sake of those using screen readers.

Links should be available to quickly take the user to the homepage or other important pages. A search bar is a helpful feature for those looking for something specific, and a Call-To-Action (CTA) should tell visitors what they need to do next.

A useful addition is an option for a user to report a broken link, allowing you to track and resolve 404 issues quicker than using Google Search Console alone.

The page should also be consistent with the rest of the website in terms of design, so the user should be in no doubt they are still on the site they expect to be on. You can use humour, graphics, and interactivity to enhance your site’s user experience when they hit a 404 page, making it more likely a user will view more pages. Getting creative with your 404s won’t be acknowledged by Google, but it will make your site stick in the minds of your visitors.

With that being said, simplicity is also important. This is a 404 page after all and you want to nudge your users to indexed pages on the site, not keep them on a fun error page and lose potential traffic.

Some sites prefer to use 301 redirects to the homepage or other relevant pages rather than deliver 404 pages. Redirecting to relevant pages is generally considered good practice when you want to delete a page, but redirecting all 404 pages to the homepage isn’t always a good idea.

There’s a mistaken belief that redirecting to the homepage spreads link equity. According to John Mueller, this method is actually confusing for users and Google treats them as soft 404s that have no benefit.

Redirects should only be used in the following circumstances:

• When a page with a misspelling in the URL has been linked to.
• When a page has been moved to a different location.
• When a fix has been made for a broken link in a template that has caused 404s — these links can redirect to the correct page.
• When a 404 page has a lot of inbound links — not redirecting to a relevant page in this situation may result in a drop in rankings.

404s should be used in the following cases:

• When a page needs to be removed and there’s no relevant page to redirect it to. Using a 404 is appropriate, but you can also use a 410 status code to remove the page from Google’s index sooner.
• When a page has never existed on your site and the URL does not appear to show a misspelled version of an existing page.

It’s also not uncommon to redirect a 404 page to a page with an error message in the URL. This approach is used by the Bank of America on their site, with the URL reading: “https://www.bankofamerica.com/banking-information/error-page-en.html”

There doesn’t appear to be any extra benefit in doing this —- as long as the page follows Google’s guidelines on 404 pages, it works the same way.

How to handle 404 pages on different platforms

Depending on the platform you’re using for your site, there are various ways of dealing with 404 pages, including creating custom pages and adding redirects.

WordPress

WordPress has a number of options for handling 404 pages. You can take your pick from the handful of 404 redirect plugins that are available.

For creating your own 404 page, you can either use another plugin or use a page builder like Elementor to add custom error pages. The other option is to copy the 404.php file from a chosen theme and modify it in Theme File Editor.

Shopify

If you want to redirect a 404 page on Shopify, go to Sales Channels > Online Store > Navigation > URL Redirects. You are then given the option to redirect an old URL to a new URL.

To create custom 404 pages, you can edit a copy of your site theme layout file, adjust and remove elements as you like and link it to the 404 template. You can also upload an image to the platform, and add the URI to the CSS in the 404 template. Shopify has detailed instructions on how to do this, as well as how to add other elements to the page.

SAP Hybris

When it comes to SAP Hybris, dealing with 404s is slightly more complicated. Unlike WordPress and Shopify, you have to configure the code yourself. To add a redirect, you must create a file with directives written in Apache syntax and add it to the Filtering and Redirects of your Endpoint page. To create a custom error page, you need to build it in the web.xml file.

Salesforce Commerce Cloud

For redirects on Salesforce Commerce Cloud, all you need to do is go to Merchant Tools > SEO > URL Redirects and select New. Salesforce also makes custom 404 pages a little easier than SAP Hybris. It’s a case of going into Business Manager and navigating through Administration > Site Development > Custom Error Pages. You can then download a .zip file with all the error pages, customise the 404 page, and re-upload.

404 pages ranked from worst to best

Because 404s can happen easily, there are plenty of them out there. Let’s take a look at 44 examples of 404 pages, from the complete worst to the very best.

Examples of 404 pages

44. The biggest SEO sin for 404 pages is using a page with no CSS at all — just a generic “Not Found” message in Times New Roman with a lot of white space. This wasn’t uncommon a few years ago, but thankfully most sites opt for custom 404 pages nowadays.

43. This is the 404 page for StairRopes.com — a niche company that makes rope bannisters and handrails. You wouldn’t know it by this screenshot though, which seems to take the user to the default 404 page from the site builder. There are plenty of links to information about Freeola on there, but nothing to lead back to the original site.

42. The strangest thing about this 404 page is not that it doesn’t display an error, or even that it’s hard to tell what website it’s from (ThePinkStuff.co.uk). It’s that it doesn’t even link to the homepage. It does link to the Star Brands site, which is the company that owns The Pink Stuff, but that’s not helpful if users don’t already know that information.

41. Again, this 404 page doesn’t even tell us there was an error. At the very least, we can tell it’s the Heinz site and we can navigate back to the homepage.

40. Another default 404 page from a site-builder. As much as it displays the error, includes a link to the homepage and even a link for more support from the site-builder, it’s incredibly boring. It’s certainly off-putting to any user.

39. This default 404 page is from a Wix site. The only consolation is you can’t tell it’s Wix just by looking at this page. Plus, while there’s no information at all about the site you are trying to navigate, there is a link to the homepage.

38. Yet another generic 404 page from a site builder. You can’t tell which site it’s for, but there is more than one link back to the site, which is a little more helpful to users. The thing that stands out for us as SEO professionals is the incorrect phrase “Server Error”. A 404 page is actually a client-side error rather than a server error.

37. Nothing about this page suggests it’s a 404, but be assured that it is. Anyone who stumbles upon this by accident is going to think it’s just a poor homepage because there’s no information anywhere that tells you it’s a 404.

36. This 404 page was a good opportunity for Reddit to display some popular topics, a search bar, and perhaps a log-in option. Instead, we get a very basic page with nothing but a modified logo, a link to the homepage, and an error message that doesn’t really tell us anything.

35. This Forbes 404 page doesn’t even look broken. Look carefully and you’ll notice a dismissible banner explaining the error. It’s not clear to the user at all and it almost looks like a homepage redirect. Trying to hide a 404 page is confusing for the user.

34. A huge, blurry 404 graphic dripping blood for KitKat’s website is a shock, especially with no explanation. In this case, don’t assume your visitors know what 404 means, and avoid using poor-quality images even if it is just an error page.

33. For some reason, Parcel Force tells us that its website is down when we land on a 404. This is incorrect, and users are likely to click away from the entire site when they see it instead of trying to access other pages.

32. This feels off-brand for Coursera. The graphic and the font don’t match up to the rest of the site, and some of the key links are far too small. At the very least, it could include the main menu with the search bar.

31. Technically, this 404 page ticks most of the boxes. It fits the theme of the site, includes links, and clearly states the problem. But that’s about it. The footer has been shifted to the centre of the page, which is good in the way that it’s putting more links above the fold, but it almost looks as though the page hasn’t finished loading. The only CTAs we see here are the ones in the menu buttons.

30. It’s not immediately obvious what the offending element is on this 404 page until you read the message. “It’s on our side and we are fixing it” isn’t a great statement, as it incorrectly attributes the error to the website and not the user (which isn’t always the case). Moreover, it’s technically lying. Not all 404s are broken pages, and they don’t all need “fixing”.

29. It’s a cute animation and the error is explained, along with a CTA and homepage link. It’s perhaps too simple for a site with so much content, though, and this 404 page could have benefitted from a few more internal links.

28. This 404 page is fine until we get to the dog. They made it clear that an error has occurred and offered the search box and a link to the homepage to help users find what they need. It doesn’t feel entirely on-brand to have a dog though — yes, it has the “aww” factor, but that’s not usually why people use Amazon.

27. This is a strange thing to see for a global software company. “We found a phone” in big letters is confusing for the user as it has nothing to do with what Oracle is all about. If it’s a joke, it’s unclear what the punchline is.

26. It’s amusing, but there’s one thing we can’t get past. It looks as though the underlined copy “Luckily, we make stuff that fixes things” is a link (to product pages for glue/tape, perhaps). It isn’t, however, which feels like a lost opportunity.

25. Channel 4’s 404 page looks fine at first — appropriate image from a much-loved show (The Great British Bake Off), casual language, clear explanation of the error, and links to other pages. However, it’s missing an obvious CTA, which would be helpful to users.

24. DashThis is a SaaS company selling reporting software to marketers and business owners. Although a lot of effort has gone into its Lord of the Rings-themed 404 page, it’s not actually that user-friendly. It relies on the user understanding a particular reference. The graph is an amusing touch and fits their brand of visual data reporting, but the CTAs and links leading to more useful pages are below the fold and not immediately visible.

23. This is a cute design from Slack. On a 404 you get taken to this animated carousel with pigs and chickens bounding along. However, it’s unclear what the animation has to do with Slack — a communication company — and the message “There’s been a glitch” could be more helpful.

22. This is a fun interactive page from Mad.ac made from toggle switches. You can toggle the buttons on and off and create different images and messages, but from an SEO standpoint, it could be better. While the minimalism ties in completely with the rest of the site, it’s not clear what the brand is and the homepage link is tricky to locate. There’s also no copy explaining that the user has hit a 404 page.

21. At first glance, Pantone’s 404 page looks fairly basic. But it’s cleverer than it appears. The colour scheme is based on colour number 404 C of its colour chart — a smart way to stay on-brand.

20. NASA went intellectual for their 404 page which is completely on-brand. There’s no CTA or real explanation for the error, but the main menu is there and it certainly appeals to their audience.

19. Another appropriate 404 message for Fitbit, tying in nicely with their ethos. It also includes a CTA and a choice of two links, though “Start Another Journey” isn’t the clearest navigational button.

18. Unfortunately, this isn’t going to be an amusing page for someone to land on if they’re trying to complain about a company losing their luggage. On the other hand, it’s neatly laid out with the links clearly visible alongside a CTA. The light-hearted language will get most people on-side — unless they’ve lost their luggage.

17. Disney changes its 404 pages regularly, which keeps things interesting, and it always includes a reference to a much-loved movie — in this case, Monsters Inc. (2002). It’s minimalist enough to look like a 404 page but clear enough to send the user to a more helpful page.

16. A witty pop culture reference complete with links to appropriate pages and a search bar — Github’s is the 404 page we are looking for.

15. A silly picture can be a great addition to a 404 page — as long as it stays on-brand. This Lego graphic is the perfect image for the Lego site. Along with the casual language and a clear statement regarding the error, this is exactly what we want to see on a 404 page.

14. It’s silly, but it does a good job of delivering the 404 message and directing users to other areas of the site without patronising them. After all, Sketch is a SaaS company with a customer-base that is likely to understand 404s.

13. Screaming Frog is an audit tool for SEOs, so it doesn’t need to give too much direction when it comes to its 404 page. Instead of patronising the user with information they’re likely to know, it uses the opportunity to share an ironic joke instead.

12. A very on-brand way of delivering a 404 page. Ford returns a stunning image, a light-hearted pun, and a bunch of links to lead its customers to the right pages. This is a classy error page.

11. While the Bank of America’s 404 page might look boring compared to others on this list, fancy graphics and funny messages aren’t what SEO is all about. This page gives a decent amount of information without overwhelming the user, explaining why the page might be broken, offering suggestions on where to go next, and even a link to request further assistance. It’s easily understood by any user who might land on the page.

10. The passing of Steve Irwin was a great tragedy to the world, so immortalising his famous catchphrase on the 404 page for the Australia Zoo website is perfect. He is who most people associate with Australia Zoo, so it’s a joke the majority of users are going to get. It also gives a clear CTA directing users to the menu bar and the search box.

9. With a button that says “Mmmrrgmgrrrgmll!”, analysing this 404 page from an SEO perspective initially presents uncertainty. It doesn’t mean anything, and yet it’s amusing enough that users are going to click it and be led right back to a useful page — which is what a 404 page should aim to do.

8. D&D Beyond doesn’t break the Dungeons & Dragons fantasy for a minute — even when delivering a 404 page. This is another great example of engaging with the audience, while still stating very clearly: “Page Not Found”.

7. Whoever is in charge of Bernie Sanders’ website is a genius. Every page is utilised as a political opportunity — including the 404 page. Instead of a CTA leading you to a homepage or a search bar, you are directed to the “Donate” page as campaign funding is a key purpose of the site itself.

6. Codecademy is a site dedicated to delivering courses on coding, and so the creators’ idea to include a simple game is clever for a few reasons. It’s intriguing enough that a user is likely to play it, and is a great way to persuade the user to then navigate to the course on building games like this via the “(B)uild your own” link.

5. Dribbble is a social networking site for digital designers and their 404 page is one of the most creative we’ve seen. It’s actually been turned into a useful tool, with the “404” graphic made up of lots of creative pieces that you can click on and discover. Adjusting the colour slider will show you a bunch of designs in that colour.

4. MIT doesn’t disappoint with its 404 page. At first glance, it’s simple. Presenting the menu and a prominent search bar. On further inspection, you realise that you can actually doodle on the black background — here’s a bad drawing of a salt cellar.

3. IMDb has one of the most entertaining 404 pages for movie buffs. If you land on one, you are met with a link to the homepage and an adapted quote from a popular movie — such as this Lord of the Rings (2001) Refresh the page and you’ll get another quote.

2. Innocent makes a negative into a positive with its 404 page, and instead of just redirecting the user to other pages on the website, it actually makes it into a hidden gem. Below the fold, it lists a few of the mistakes it’s made as a company, which is an amazing way to connect with your customers.

1. If you want to see a 404 overdone, go to https://visitsteve.com/404. There you will find a video of artist Steve Lambert talking about his 404 page, and it’s slightly too long to be comfortable. It all adds to the hilarity though, as he dubs it “The most awkward 404 not found page on the internet”.

These examples clearly show the difference between a 404 page that’s fit for purpose and one that’s unhelpful to users.

Remember, it’s all about the user experience. When creating your own 404 pages, keep in mind the importance of clear communication, helpful CTAs, and effective design.