Página 404 HTML

Como desenhar uma página 404 que ajuda em vez de frustrar

Uma página 404 Not Found é o que o servidor devolve quando o usuário pede uma URL que não existe. O status code é definido pela RFC 9110 (especificação HTTP/1.1) e significa "o servidor de origem não encontrou uma representação atual para o recurso solicitado". O 404 padrão do Apache, nginx ou Express funciona, mas é feio — uma linha de texto sem branding, sem navegação e sem caminho de volta. Uma 404 customizada transforma o beco sem saída em oportunidade: mensagem clara, barra de busca para recuperar a intenção, lista de destinos populares e continuidade visual com o resto do site.

Exemplos famosos provam o ponto. O GitHub tem um Octocat com efeito parallax, a Lego mostra um minifig de peça caída e o site do Bret Victor recebe com "you have reached the end of the internet". As melhores 404 compartilham três traços: pedem desculpa de forma breve, ajudam o usuário a se reorientar e preservam a voz da marca. Qualquer coisa que adicione peso morto — copy longo de marketing, modais, vídeo em autoplay — anula o propósito.

Configuração no servidor

Garanta que a resposta HTTP realmente seja 404 e não 200 — um "soft 404" (status 200 com conteúdo de "não encontrado") é penalizado pelo Google.

• nginx: error_page 404 /404.html; mais internal; no bloco location.
• Apache: ErrorDocument 404 /404.html no .htaccess.
• Express: app.use((req, res) => res.status(404).render('404')) como último middleware.
• Next.js: arquivo estático pages/404.js (ou app/not-found.tsx no App Router).

SEO e monitoramento

O Google não indexa respostas 404, então a página em si nunca vai rankear — o que importa é não deixar links quebrados sangrando autoridade lentamente. Acompanhe o relatório de Cobertura no Google Search Console, varra os logs do servidor atrás de paths 404 que se repetem e mande os erros para Sentry ou LogRocket. As 404 recorrentes geralmente vêm de links internos quebrados, redirects ausentes depois de uma migração de URL (sempre 301 do path antigo) ou erros de digitação em material de marketing. Para recursos removidos definitivamente, prefira 410 Gone — diz aos crawlers para esquecer a URL mais rápido do que o 404.

Acessibilidade e dark mode

Coloque alt na ilustração, foque a barra de busca ao carregar a página para que usuários de teclado já comecem a digitar e use aria-live="polite" se for anunciar sugestões dinâmicas. Respeite prefers-color-scheme: dark com media query CSS — custa quase nada e parece nativo em celulares OLED à noite.

Perguntas frequentes

Uma página 404 prejudica o ranking SEO? A URL 404 em si não vai rankear, mas 404 não resolvidos vindos de páginas indexadas desperdiçam crawl budget e prejudicam sinais de usuário. Corrija ou redirecione os links de origem.

Devo receber email quando os 404 dispararem? Sim em sites onde SEO é crítico. Configure alertas do Search Console ou um trigger baseado em logs (Datadog, Grafana) para um canal do Slack — assim um deploy quebrado é pego em minutos, não dias.

Qual a diferença entre 404, 410 e 403? 404 significa "não encontrado, talvez depois"; 410 significa "removido em definitivo, esqueça essa URL"; 403 significa "existe, mas você não pode ver". Use o código preciso — crawlers e CDNs tratam de forma diferente.

A 404 precisa suportar dark mode? Respeitar prefers-color-scheme é uma vitória pequena de UX. Não é obrigatório, mas é um dos polimentos mais baratos que dá para enviar.