Página 404 HTML

Designing a custom 404 page that helps, not frustrates

A 404 Not Found page is what your server returns when a user requests a URL that does not exist. The status code is defined by RFC 9110 (the HTTP/1.1 specification) and means "the origin server did not find a current representation for the target resource". The default 404 served by Apache, nginx or Express is functional but ugly — a plain text line with no branding, no navigation and no path back to value. A custom 404 turns a dead end into an opportunity: clear messaging, a search bar to recover intent, a list of popular destinations, and visual continuity with the rest of your site.

Famous examples prove the point. GitHub ships an Octocat with a parallax effect, Lego shows a fallen brick minifig, and Bret Victor's site greets you with "you have reached the end of the internet". The best 404 pages share three traits: they apologise briefly, they help the user re-orient, and they preserve brand voice. Anything that adds dead weight — long marketing copy, modal dialogs, autoplaying video — defeats the purpose.

Wiring it up on the server

Make sure the HTTP response really is 404 and not 200 — a "soft 404" (200 status with not-found content) gets penalised by Google.

• nginx: error_page 404 /404.html; plus internal; on the location block.
• Apache: ErrorDocument 404 /404.html in .htaccess.
• Express: app.use((req, res) => res.status(404).render('404')) as the last middleware.
• Next.js: a static pages/404.js (or app/not-found.tsx in App Router).

SEO and monitoring

Google does not index 404 responses, so the page itself will never rank — what matters is that broken links do not slowly bleed authority. Watch the Coverage report in Google Search Console, scrape server logs for repeating 404 paths, and pipe errors to Sentry or LogRocket. The recurring 404s usually trace back to broken internal links, missing redirects after a URL migration (always 301 from the old path) or typos in marketing material. For permanently removed resources, prefer 410 Gone — it tells crawlers to forget the URL faster than 404.

Accessibility and dark mode

Add alt text on the illustration, set focus on the search input when the page loads so keyboard users can start typing immediately, and use aria-live="polite" if you announce dynamic suggestions. Respect prefers-color-scheme: dark with a CSS media query — it costs almost nothing and feels native on OLED phones at night.

FAQ

Does a 404 page hurt my SEO ranking? The 404 URL itself will not rank, but unresolved 404s linked from indexed pages waste crawl budget and hurt user signals. Fix or redirect the source links.

Should I email myself when 404s spike? Yes for SEO-critical sites. Wire Search Console alerts or a log-based trigger (Datadog, Grafana) to a Slack channel so a broken deploy is caught in minutes, not days.

What is the difference between 404, 410 and 403? 404 means "not found, maybe later"; 410 means "permanently gone, forget this URL"; 403 means "exists, but you cannot see it". Use the precise code — crawlers and CDNs treat them differently.

Should the 404 page support dark mode? Respecting prefers-color-scheme is a small win for UX. It is not mandatory, but it is one of the cheapest polish details to ship.