.jpeg)
TL;DR
Most 404 page examples online are consumer brands and design concepts, and many no longer look the way those articles describe: Pixar's page now uses an Inside Out 2 image, and Mailchimp's has a game. We tested the 404 pages of 33 B2B SaaS and developer-tool companies on 15 October 2026, logged out, and recorded what each one shows and the HTTP status it returns. Twenty-six returned a correct 404. The best follow one pattern: a short, plain headline, one brand moment, then a way forward through search, three to six links to the jobs visitors came to do, a status page, or support. GitHub, Stripe, Datadog, and Cloudflare lead the list. Seven did not return a 404: five send unknown URLs to a login or app screen, one shows a not-found message with a success code, which Google calls a soft 404, and one redirects to a /404 page that returns 200. This guide covers the 15 best, the mistakes to avoid, how to build a custom 404 page in Webflow, and why AI assistants send visitors to 404 pages nearly three times as often as Google Search, according to Ahrefs.
What A Good 404 Error Page Does For Customer Experience
A User-Friendly 404 Page Is A Recovery Page
After following a broken link, mistyping a URL, or clicking a link that an AI answer invented, a user will land on a 404 page. A 404 page has existed since the early ‘90s and refers to a page that can’t be found. Its goal hasn’t changed so far. Each website collects dead inbound links over time, because pages disappear: in May 2024, Pew Research Center found that across nearly one million pages from 2013, 38% of them were no longer available a decade later.
When it comes to 404 pages, two sources set the standard for how we should build them.
Google suggests that the right custom 404 allows users to discover what they were searching for, and preserves the site's layout and navigation.
The Nielsen Norman Group lists the 404 as a common example of technical jargon to be avoided when presenting error messages. Nielsen also advises to either hide or limit exposure of raw error code numbers.
Strong examples listed above provide at least one of these two things: the user can clearly see how their request failed (in non-technical terms), and the user has some method for finding what they are looking for. All of them maintain the same header and footer as the rest of the website. Carrying the site's design into the error page is the same discipline covered in our SaaS homepage design examples.
How We Tested These 404 Page Examples
For each company, we requested a URL that is not accessible on their primary website, logged out, in a regular desktop browser. The content of the page and the HTTP status returned by the server were captured on 15 Oct 2026. If a page appears to be useful yet returns a successful HTTP status, then the page failed as a crawler will read the HTTP status and ignore the content.
Only two types of app domains were excluded from our main listing. Those are app domains that redirect all URLs that have never been seen before to the login screen are making decisions about how to create products, not providing a marketing 404 message.
These only show up in the errors portion. In addition, those pages that return a successful HTTP status also show up here. In order to keep things interesting and not repetitive, some very good pages that passed the tests were omitted to keep similar patterns to a minimum.
Examples include: Atlassian, Dropbox, Calendly, Webflow, Airtable, DigitalOcean, PagerDuty, Canva, Figma and Slack. The table shown earlier includes summaries of the 15 tested pages. "Not detectable" refers to whether or not a particular feature existed in the logged out version of the test.
Search-Led 404 Pages
Search-led pages give a lost visitor a way to type what they want. Each entry below covers what the page shows, the recovery features, and the takeaway.
GitHub: Search, Support And Status Behind A Star Wars Joke
GitHub's page shows a Star Wars image whose alt text plays on "not the web page you are looking for". Under the joke sits a full recovery kit: a search box, a Contact Support link, GitHub Status, and the full global navigation.
Illustrator Cameron McEfee created GitHub's scene-based error pages in 2011, by his own account. Other lists describe this page inconsistently, with one placing it in outer space and another in a desert, which suggests they copy one another instead of checking.
Takeaway: the joke earns its place because all the utility is still there.
Datadog: A Mascot, Then Five Helpful Links
Datadog shows its sad Bits mascot with a one-word headline, followed by site search and five links: Home, Contact Us, Documentation, Resources, and Blog. The mascot takes a second of attention, and the links carry the rest of the page.
Takeaway: a mascot works when it adds personality without delaying the way out.
Cloudflare: Site Search On The Error Page Itself
Cloudflare keeps the message plain: page not found, a link home, a link to all products, and site search powered by its own AI Search. Using the company's own product on the error page shows it working at the moment a visitor needs it.
Takeaway: search is the most useful thing a lost visitor can be given, and the 404 is a place to demonstrate your product.
Task-Led 404 Pages
Task-led pages skip the search box and map links to the jobs different visitors came to do.
Stripe: Six Links To The Jobs Visitors Came To Do
Stripe shows "Page not found", a homepage link, and six cards: Pricing, Careers, Documentation, API Reference, System status, and Support, with the full navigation above.
The six cards correspond to four kinds of visitor: buyers, candidates, developers, and existing customers. The system status link also matters for trust, a theme our trust center examples cover in more depth.
Takeaway: map the links to the people who arrive.
Zapier: Clear Ways Out
Zapier pairs a plain 404 message with labeled cards that lead to the homepage, the Help Center, the App Directory, and customer support. Each card names its destination, so a visitor never has to guess what a link does.
Takeaway: a few labeled paths work better than a wall of links.
Miro: A Status Link For App Users
Miro opens with "Hmm, that didn't work", then offers Homepage, Miro App, Help Center, and Miro Status. A person using a SaaS product who hits an error may suspect an outage and not a bad URL, so a status link answers that question before they ask it.
Takeaway: anticipate what the visitor suspects, not only what they typed.
Asana: Empathy, Then Utility
Asana says "This page doesn't exist. But you exist." and adds a short breathing prompt, then links to the Asana app, the Guide, the Blog, and the status page. The warmth is short, and the next step is one click away.
Takeaway: friendly copy works when it comes with a real way forward.
Developer-First And Product-Led 404 Pages
These pages assume a technical audience, so they lead with documentation or with the company's own product.
Supabase: Docs, Sitemap And llms.txt
Supabase asks "Looking for something?" and links to the documentation, the sitemap, and llms.txt. It was the only page we tested that links llms.txt, a file meant for AI systems, which fits the audience's interest in answer engine optimization.
One flaw stands out: the title tag repeats the homepage title. That fails WCAG 2.4.2 (Level A), which requires titles that describe a page's purpose, and it hides 404 visits in analytics, since GA4 takes the page title from the document by default.
Takeaway: give the 404 its own title.
Netlify: Docs First, With An Assistant
Netlify shows an animated missing-page message, links home and to the docs, three recent blog posts, and an Ask Netlify assistant. For a developer audience the documentation works as a second homepage, so putting it first is a reasonable recovery path.
Takeaway: lead with the destination your audience uses most.
Ahrefs: The Error Becomes A Product Demo
Ahrefs offers a short apology, a plain explanation of what a broken link is, and an invitation to try its free Broken Link Checker. The visitor has met the problem the product solves, so the page demonstrates relevance.
Takeaway: if your product addresses what the visitor hit, show it.
Semrush: A Content-Rich Way Back
Semrush tells visitors the page does not exist, then shows toolkits, features, pricing, four tool cards, and five blog articles. Popular content gives a lost visitor reasons to stay. The cost is a busier page than most examples here, with more choices to scan.
Takeaway: richer pages recover more visitors but ask more of them.
Twilio: A Game For Builders
Twilio pairs a builder-themed headline with a playable block-falling game. It suits a developer audience and shows fun done well, though the game dominates the page and the recovery links get less attention than elsewhere on this list.
Takeaway: play is fine if the way back stays easy to find.
How To Add Personality With A Clear Message
The three pages below add personality in the copy and never in place of the way out. That is the rule behind every funny 404 page that works, and it supports brand identity without adding a creative touch that blocks recovery.
Shopify: One Line Of Copy
Shopify's page says "Time is money, so we won't waste yours", then lists Help Center, Start, Pricing, Website Builder, and Blog. The line sets a tone, and the links follow immediately.
Takeaway: one confident line can carry a whole page.
Intercom: Support Through Its Own Product
Intercom shows a photo and sketch collage, states plainly that the page does not exist, and invites the visitor to ask for help through its own Messenger. For a company that sells support software, a 404 is a support moment.
Takeaway: use the page to show your product at work.
Zendesk: A Joke Statistic, Clearly A Joke
Zendesk's page jokes that almost no visitor ever sees it, then points to the top navigation. The claim is humor, not data, and it should not be cited as a statistic.
Takeaway: keep jokes obvious as jokes, and keep the navigation visible.
The Classic 404 Page Examples, Revisited
The same consumer pages appear in most competing lists, and several have changed. Across ten audited articles, LEGO appeared in seven and Mailchimp in six.
- LEGO's friendly page, with Emmet and "OH BRICKS!", now sits behind an age gate.
- Pixar's page uses an image from Inside Out 2. Mailchimp's page says "We lost this page", shows an Intuit brand bar, and includes a game.
- GitHub's Star Wars theme remains, though we did not verify the parallax effect.
- Blizzard's rescue murloc, Kualo's Space Invaders game, and the Dogs of Amazon were unchanged, and all seven returned a 404.
None of the audited articles states when it last checked its examples, and one dates from 2019. That is the case for testing, not for dropping the classics.
What Not To Do: Soft 404s And Dead Ends
Soft 404s, Login Redirects And The /404 Trap
Google defines a soft 404 as a URL that tells users the page does not exist while returning a 200 success status. Search Console reports these, and the fix is to return a 404, or a 410 if the content is gone for good. Soft 404s waste crawling, because crawlers spend time on non-existent URLs and discover real pages more slowly.
We found several patterns on real B2B sites. Postman showed a not-found message with a success code. HubSpot's page is clever, with an AI recommendation, but the original URL redirects to a /404 address that returns 200, so the missing URL never returns a 404. Vercel, GitLab, Linear, and Sentry send unknown URLs to a login screen, which suits an app domain and is a product decision. Others use generic title tags, which gives screen readers and analytics no signal. Google also advises against redirecting every unknown URL to the homepage, because it produces soft 404s at scale. During a site move, redirect mapping matters most, and our guide to the SEO risks of a Webflow migration covers it.
How To Check Your 404 Status Code
Three methods work, in order of effort. The browser's network panel shows the status for one URL in seconds. A crawler such as Screaming Frog or Ahrefs Site Audit checks status codes across the whole site, and our guide to website audit tools compares options. Search Console's Not found (404) and Soft 404 reports show what Google has found.
For removed pages, the HTTP standard (RFC 9110) reserves 410 for content the server knows is permanently gone, while 404 says nothing about whether the absence is temporary. Google's John Mueller has said the difference in processing is minimal, according to a Search Engine Journal report of a Reddit comment, so treat that as a reported remark and not as documentation. If you want help finding soft 404s and redirect problems, a technical SEO audit covers them.
How To Build A Custom 404 Page In Webflow
BUILD A CUSTOM 404 PAGE IN WEBFLOW
BUILD
1. Pages, Utility Pages, 404. Use the site's header and footer
2. One short headline. No raw error codes in the copy
3. Three to six static links to the jobs visitors came to do
(Collection lists will not work on this page)
4. Site search, if the site has a search page (/search is reserved)
5. Title tag: "Page not found | Brand"
6. GA4 event in the page's custom code
TEST
7. Visit a URL that does not exist. The network panel must show 404
8. Never link to /404 or redirect missing pages to it
9. Never replace the 404 with a JavaScript redirect
MAINTAIN
10. 301 renamed or deleted pages, only to true replacements
11. Review Search Console's 404 and Soft 404 reports monthly
PRINCIPLE
A 404 page is finished when a visitor can reach what they wanted in one click, and a crawler gets a 404.
Styling: monospace code block in Webflow CMS, or bold headers with regular body. Bold BUILD, TEST, MAINTAIN and PRINCIPLE.
In Webflow, the 404 page is a Utility Page. Collection lists cannot be added to it, because the page must work even if the CMS is down, so popular pages have to be static links added by hand. The /404 and /search slugs are reserved, so never link to /404 or redirect missing pages to it.
Webflow community forum reports say /404 returns 200 when requested directly while a URL that does not exist returns the 404 page with a 404 status, but those are community reports and not official documentation. Webflow's own site returned a real 404 in our test, which shows the platform handles it correctly when nobody works around it.
The build comes down to a short list: use the site's header and footer, write one short headline with no raw error codes, add three to six static links, add search if the site has a search page, set a title such as "Page not found | Brand", and fire a GA4 event from the page. Then test with a missing URL and confirm the network panel shows 404. Redirects and the 404 page need an owner, which is the subject of our piece on website governance, and a monthly check belongs in Webflow maintenance. If the page needs a redesign alongside the rest of the site, see our web design services.
Measuring 404s, Including The Ones AI Sends You
Tracking 404 Pages, Search Use And Bounce Rates
GA4's page_view event sends the page title from the document by default, so a unique title on the 404 page makes those visits easy to find. A custom event fired from the page works too. Track how many visits land on the page, where they came from, whether visitors use search, and the bounce rate from the page, and treat them as your own baseline. No credible study quantifies what a good 404 does to bounce rate, so a borrowed benchmark would mislead.
GA4 has one limit: it cannot tell a real 404 from a soft 404, so status codes need a separate check with a crawler or Search Console. For the Webflow setup, see our guide to Google Analytics in Webflow.
Why AI Assistants Send Visitors To 404 Pages
AI assistants sometimes invent plausible URLs on real domains. Ahrefs, a vendor with its own interest in this topic, analyzed 16 million URLs in September 2025 and found that AI assistants send visitors to 404 pages 2.87 times as often as Google Search. The clicked-URL 404 rate was 1.01 percent for ChatGPT against 0.15 percent for Google. A separate Ahrefs analysis from June 2025 found 3.6 percent of ahrefs.com's own AI-referred traffic went to invented pages, which is one site and not a benchmark.
The practical response is to find those URLs in GA4 and redirect the ones with real traffic to the closest true page, and to let the rest return 404. Our guide to tracking AI referral traffic covers the setup.
Closing
Your 404 page is part of your website. Test it like one.
Most teams design the 404 page once and never check it again. If yours returns the wrong status, sits behind a login, or leads nowhere, it is quietly losing the visitors your links, ads, and AI assistants send you. We design and build B2B websites in Webflow, including the pages nobody plans to see.
Work With Veza - See Our Case Studies
Other Resources
- Google Search Central, Troubleshoot crawling errors
- Webflow Help, "404 error page"
- Nielsen Norman Group, Error-Message Guidelines
- RFC 9110, HTTP Semantics
- U.S. Web Design System, 404 page template
FAQs
What should a good 404 page include?
A short, plain message saying the page was not found, the site's normal header and footer, a search box, three to six links to the pages visitors most likely wanted, and a way to reach support. Behind the scenes it needs a descriptive title tag and a real HTTP 404 status code.
What does a 404 page look like?
It looks like the rest of the website, with a short message in place of the missing content and links to get back on track. The best B2B examples, such as GitHub, Stripe and Datadog, add one brand moment and then search, docs, status and support links.
What is a soft 404?
A page that tells visitors it does not exist while returning a 200 success status code. Google flags these in Search Console's Soft 404 report, and they waste crawling. The fix is to return a 404 status, or 410 if the content is gone for good.
How do I check if my 404 page returns the right status code?
Visit a URL that does not exist and open the browser's network panel: the response should be 404. A crawler such as Screaming Frog or Ahrefs Site Audit shows the same at scale, and Search Console reports soft 404s it finds.
How do I create a custom 404 page?
Most platforms let you design one template that every missing URL uses. In Webflow it is the 404 page under Utility Pages. Keep the site's navigation, add search and static links, set a descriptive title, and test that it returns a 404 status.
Can you customize a 404 page in Webflow?
Yes. Design the 404 Utility Page like any other page, but add links by hand, because Collection lists are not supported there. Never link to /404 directly or redirect missing pages to it.
Do 404 pages hurt SEO?
Not by themselves. Google says 404s are a normal part of the web and do not affect how other pages perform. The problems are soft 404s, redirecting every missing URL to the homepage, and losing the value of links that pointed to removed pages.
Should a missing page return 404 or 41?0
Use 404 when you do not know whether the page is gone for good, and 410 when you know it is permanently removed, as defined in the HTTP standard. Google has said the SEO difference between the two is minimal.
What are some funny 404 error pages?
Among B2B sites, Twilio's playable game, Asana's breathing prompt and Zendesk's joke statistic stand out. Among the classics, Kualo's Space Invaders game and Blizzard's rescue murloc are unchanged. Humor works best when the links back are still easy to find.
Why do AI assistants send visitors to 404 pages?
They sometimes invent URLs that look right but do not exist. Ahrefs found AI assistants send visitors to 404 pages nearly three times as often as Google Search. Find those URLs in GA4 and redirect the ones with real traffic to the closest true page.
