How to Design a Great 404 Page That Keeps Visitors on Your Site

The Page Nobody Plans For and Everybody Eventually Sees

A 404 error occurs when a visitor requests a URL that doesn't exist on your server — the page was deleted, the URL was mistyped, a link from another site is outdated, or someone tried to guess a URL that was never created. The HTTP 404 response code tells the browser: this page doesn't exist here.

For a long time, 404 pages were treated as purely technical responses — a bare message saying something like "404 Not Found" or "The requested URL was not found on this server" with no navigation, no context, no path forward. This treatment reflected an assumption that 404 errors are failures to be minimized rather than experiences to be designed.

The reality is more nuanced. 404 errors happen on every website of meaningful size, for reasons that range from visitor typos to outdated external links to reorganized site architecture. And what happens on that 404 page has a measurable effect on whether the visitor stays or leaves. A bare, unhelpful 404 page produces abandonment — the visitor has nowhere to go, has had a frustrating experience, and exits. A well-designed 404 page recovers the visit — it acknowledges the error, entertains or reassures the visitor briefly, and provides clear paths back to relevant content.

The 404 page is also one of the rare spaces on a website where personality can be expressed without disrupting a commercial context. The formal communication of a services page, the social proof of a testimonials section, the persuasion of a landing page — these all require tonal discipline. The 404 page is where brands allow themselves to be a bit more human, funny, or unexpected, and it often becomes the most memorable page on the site for visitors who encounter it.

What a 404 Page Needs to Accomplish

Before designing anything, it's useful to think about what a visitor on a 404 page is experiencing and what they need:

They're disoriented. They expected to arrive at specific content and arrived somewhere else instead. Their mental model of the navigation was broken by an unexpected outcome. The first job of the 404 page is to reorient — to communicate clearly that an error occurred, that it's understandable, and that there are paths forward.

They may be frustrated. Especially if they followed a link from another site or were mid-task when the error occurred, they have a mild negative emotional response. Acknowledging this with a light touch — humor, a self-aware tone — can defuse the frustration and create a moment of connection instead of continued friction.

They need options. Without navigation or links on the 404 page, the visitor has no way forward except the browser back button — and many will leave rather than navigate back. The 404 page needs to provide clear, useful paths to relevant content: the homepage, popular pages, a search function, or a direct contact option.

They may know what they were looking for. If they arrived via a specific dead link, they probably know the content they wanted. Providing a search function allows them to look for it specifically. Providing related content suggestions (if the 404 can detect the URL pattern) can surface relevant alternatives.

The Elements of an Effective 404 Page

A Clear, Human Error Message

The error message is the first thing the visitor sees and sets the tone for everything that follows. The worst error messages are technical and cold: "404: The requested resource could not be located on this server." The best are human, brief, and either acknowledge the situation with warmth or turn it into a moment of personality.

Effective approaches:

• Honest and warm: "We can't find what you're looking for. This page might have moved, been deleted, or maybe it never existed. Let's get you somewhere useful."
• Self-deprecating humor: "Oops. We sent you to the wrong place. This is embarrassing for us." (Works well for brands with a conversational personality.)
• Playful with the metaphor: A construction company 404 that says "Under Construction — No, Really" or a restaurant's 404 that says "This page is no longer on the menu."
• Brand-consistent personality: A legal firm that maintains professional tone even in the error state. A tech startup that uses the opportunity for dry humor that fits their culture.

What all of these have in common: they don't make the visitor feel stupid for arriving here. The error is positioned as a site issue, not a visitor mistake.

Navigation Back to the Rest of the Site

This is non-negotiable: the 404 page must include navigation. Whether that's the full site header, a simplified navigation with the most important destinations, or a set of prominent links to key sections, the visitor needs a clear way forward that doesn't require the back button.

The options to consider providing:

• A homepage link (the most common and always appropriate)
• Links to primary sections (Services, Products, Blog, About)
• Links to popular or recently updated content
• A search bar — particularly valuable because it empowers the visitor to find specifically what they were looking for
• A direct contact option — for visitors who were trying to reach the business specifically

The full site header is often the right solution if your site has one — it provides the complete navigation that visitors are already familiar with and doesn't require designing a separate navigation element for the 404 context.

A Primary CTA

Even on the 404 page, there should be a primary call to action — the one thing you most want the visitor to do from here. Usually this is "Go to Homepage" or for service businesses, a direct conversion opportunity like "Get a Quote" or "Contact Us." For e-commerce, it might be "Browse Products" or a link to a popular category.

The 404 page CTA should be visually prominent — not buried at the bottom of the page below a long message and multiple secondary links. The visitor's most likely next move should be immediately obvious.

Search Functionality

A search bar on the 404 page is one of the most useful features you can include, particularly for content-rich sites where the visitor might have been looking for a specific article, product, or piece of information. Instead of providing a fixed set of links and hoping one of them is relevant, search empowers the visitor to find exactly what they were seeking.

Implementation: a simple search field with a search button, connected to your site's search functionality. The placeholder text can guide the visitor: "Search for what you were looking for..." or simply "Search our site."

Brand Personality Expression

The 404 page is one of the most-cited examples of brand personality done well on websites — not because it's a business-critical page, but because the constraints of the context (brief, low commercial stakes, slightly humorous situation) allow for personality that would be inappropriate elsewhere.

Some of the most memorable 404 pages use:

• Relevant brand humor: A page clearly written in the brand's voice, making a joke about the error that fits the company's personality. GitHub's famous "404 - These aren't the droids you're looking for" plays on its developer audience's cultural references.
• Interactive elements: Simple mini-games, interactive animations, or playful elements that turn an error into a brief entertainment moment. This extends the visit and ends the error experience on a positive note.
• Custom illustrations: A custom illustration created for the 404 page that reflects the brand's visual style and makes the page feel intentional rather than forgotten.
• Video content: Brief, humorous video messages from the team. Personal, surprising, and memorable.

The level of creativity and humor should match the brand. A law firm's 404 page should probably not include a pun-filled mini-game. A creative agency's 404 page probably should. The personality expression should feel authentic to the brand, not forced for the sake of having a "cool" 404 page.

Technical Considerations for 404 Pages

Ensure the Server Returns an Actual 404 Status Code

This is a common technical failure: a website has a custom 404 page, but the server actually returns a 200 (success) response code while displaying the error content. This is sometimes called a "soft 404." From the visitor's perspective, they see the error page and it looks fine. From Google's perspective, this page is a success response — meaning Google may attempt to index it and may spend crawl budget on a page that should be recognized as missing.

Verify that your 404 page returns an HTTP 404 status code by checking with a tool like the Redirect Checker (httpstatus.io) or checking the Network tab of Chrome DevTools when loading a nonexistent URL on your site. The status should show "404 Not Found."

Include Standard Header and Footer

The 404 page should include your standard site header (with navigation) and usually the standard footer. This serves multiple purposes: it provides navigation options (the primary functional goal), it maintains visual consistency with the rest of the site (avoiding the jarring experience of landing on a page that looks like a different site), and it ensures the footer's legal pages, contact information, and social links remain accessible.

Some sites use a simplified version of the header on the 404 page to keep the visual focus on the error message and primary recovery options. This is appropriate as long as essential navigation remains accessible.

Track 404 Errors

Google Analytics and Google Search Console both provide data on 404 errors encountered by visitors and Googlebot respectively. Monitoring this data is valuable for:

• Identifying broken internal links (links from your own pages to pages that don't exist) that should be fixed
• Identifying external links pointing to deleted content (eligible for 301 redirects to the most relevant current content)
• Discovering URL patterns from crawlers or bots trying to access nonexistent content
• Understanding what content visitors are looking for that may not exist on the site

In Google Search Console: Coverage → Not Found (404) shows URLs that returned 404 errors during Googlebot's crawling. In GA4: you can create a custom report filtering by page path = 404 page path to see how often visitors land on the 404 page and what pages they came from.

Redirect Instead of 404 Where Possible

The best 404 page is the one that's never seen. When content is moved or deleted, implementing a 301 (permanent) redirect from the old URL to the most relevant current URL means visitors who navigate to the old URL land directly on useful content rather than an error page.

Common redirect scenarios:

• A blog post URL changed during a site redesign → 301 from old URL to new URL
• A product was discontinued → 301 from old product URL to the most relevant alternative or the product category page
• An entire site section was reorganized → 301s from all old section URLs to their new locations

Redirects should be implemented in your server configuration or CMS's redirect management — not as client-side JavaScript redirects, which aren't interpreted correctly by search engines.

404 Page Design: Layout and Visual Treatment

The layout of a 404 page should prioritize: the error message and its explanation above the fold, the primary CTA prominently positioned, navigation or key links visible without scrolling on most devices. Everything else — illustration, humor, secondary links — can appear below or alongside these primary elements.

Visual hierarchy considerations specific to 404 pages:

The error number (404) is context, not the headline. Many 404 pages make "404" the largest visual element on the page. The actual message — "We can't find this page" and "here's what to do" — is more important than the error code most visitors don't find meaningful. Display 404 prominently enough to orient the visitor, but make the human explanation and recovery options more visually prominent.

Visual interest without distraction. If you're including a custom illustration, animation, or interactive element, it should add to the experience without overwhelming the functional recovery elements. The visitor who encounters a 404 page needs to find their way back to useful content — the entertainment value of the page is secondary to that functional goal.

Consistent with site aesthetics. The 404 page should feel like it belongs to the same design system as the rest of the site. Custom elements (illustrations, copy tone) can give it personality; the underlying visual language (typography, color, spacing) should remain consistent.

Examples of What Makes 404 Pages Fail

No navigation or links: A bare error message with no way forward. Common on sites where the 404 page is the server's default rather than a designed page. This is the most damaging failure because it guarantees abandonment.

Apologizing without helping: "We're sorry! This page no longer exists. We apologize for the inconvenience." With no links, no search, no next step. The apology is irrelevant if there's no path forward.

Humor that doesn't fit the brand: A formal professional services firm with a meme-filled, irreverent 404 page creates brand dissonance. The humor signals are inconsistent with the rest of the site's communication, and instead of charming the visitor, it creates cognitive dissonance.

Slow loading: A 404 page with heavy animations, large images, or complex interactions that load slowly is adding insult to injury — the visitor is already at an error state, and now they're waiting. 404 pages should load instantly.

A soft 404 that returns 200: Technical failure that causes SEO problems by not properly communicating to search engines that the content doesn't exist.

The Bottom Line

The 404 page is one of the smallest opportunities in web design that most sites treat as the lowest priority. Done well, it recovers visits that would otherwise be lost, communicates brand personality in a memorable context, and sometimes becomes the most-shared page on a site when it genuinely delights visitors who find it.

The requirements are simple: a human, brand-consistent error message; clear navigation back to useful content; a prominent primary CTA; ideally a search function; and proper technical implementation that returns an actual 404 status code. Within that frame, there's room for as much or as little personality as fits the brand.

At Scalify, every website we deliver includes a designed 404 page — not an afterthought, but a genuine piece of the experience that maintains brand consistency and gives lost visitors a clear path back to the content and conversion opportunities that matter.