Custom 404 page
Why it matters
The default framework 404 page — Next.js's plain "404 | This page could not be found," nginx's white error screen, or a bare "Cannot GET /path" — breaks the site's visual identity at the worst possible moment: when a user has just hit a dead link and is deciding whether to leave. A custom 404 with navigation recovers the session; a default 404 bounces the user. It also signals an unfinished build to anyone who stumbles onto it.
Severity rationale
Medium because default 404s directly increase bounce rate at dead links and erode perceived polish on every broken URL.
Remediation
Ship a branded 404 page that reuses the site's header, nav, and footer and links back to the homepage and primary destinations. In Next.js App Router, place it at app/not-found.tsx; in Pages Router, pages/404.tsx; for static hosts, public/404.html. Confirm the response code after deployment:
curl -s -o /dev/null -w '%{http_code}\n' https://yoursite.com/does-not-exist
# expect: 404
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Site Health Check audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from site-health-check·automated