# Custom 404 page guides visitors back into the funnel

- **Pattern:** `ab-001763` (`marketing-conversion.conversion-infrastructure.not-found-recovery`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001763
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001763)

## Why it matters

A visitor who lands on a broken URL — a typo, a stale share, an expired campaign link — is a high-intent lost signal, and the framework-default 404 page shows a bare error with no path back into the site. A custom 404 with a link to the homepage, search, or the most common destinations recovers a meaningful share of these visitors and keeps them inside the funnel rather than punishing them with a dead-end for a mistake that was often not theirs.

## Severity rationale

Low because 404 recovery reclaims misrouted visitors but the main conversion path is unaffected.

## Remediation

Create a custom 404 page with at least one navigation path back to the main site — a homepage link, key-page list, or search bar. In Next.js App Router, add `app/not-found.tsx`:

```tsx
export default function NotFound() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen gap-4">
      <h1 className="text-2xl font-bold">Page Not Found</h1>
      <p className="text-muted-foreground">
        The page you're looking for doesn't exist.
      </p>
      <Button asChild>
        <Link href="/">Back to Home</Link>
      </Button>
    </main>
  )
}
```

## Detection

- **ID:** `not-found-recovery`
- **Severity:** `low`
- **What to look for:** Check for a custom 404 / not-found page: (1) In Next.js App Router, look for `app/not-found.tsx`; (2) In Next.js Pages Router, look for `pages/404.tsx`; (3) For other frameworks, check the equivalent custom error page location. If a custom 404 page exists, check whether it includes navigation links, a search input, or a CTA that guides the visitor back to the main site or conversion flow — not just an error message.
- **Pass criteria:** Count all navigation options on the custom 404 page. A custom 404 page exists with at least 1 navigation option (link back to homepage, links to key pages, or a search bar). Report: "Custom 404 provides X navigation options."
- **Fail criteria:** No custom 404 page found (framework default is served). OR a custom 404 page exists but contains only an error message with no navigation or recovery path.
- **Skip (N/A) when:** Never — all web projects benefit from a meaningful 404 page.
- **Detail on fail:** `"No custom 404 page found (no app/not-found.tsx in Next.js App Router project)."` or `"404 page exists but shows only 'Page Not Found' with no navigation links or recovery path."`.
- **Remediation:** A 404 page is a second chance to convert a lost visitor. Keep it simple but include a way out:

  ```tsx
  // app/not-found.tsx
  export default function NotFound() {
    return (
      <main className="flex flex-col items-center justify-center min-h-screen gap-4">
        <h1 className="text-2xl font-bold">Page Not Found</h1>
        <p className="text-muted-foreground">
          The page you're looking for doesn't exist.
        </p>
        <Button asChild>
          <Link href="/">Back to Home</Link>
        </Button>
      </main>
    )
  }
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001763