Página 404 personalizada: como configurar e implementar corretamente

Quando o usuário clica em um link quebrado, o servidor precisa retornar o status 404 Not Found. Mas, em projetos reais, essa regra é descumprida com mais frequência do que se imagina: o CMS retorna 200 OK, um redirecionamento leva para a página inicial, ou a página de “404” tem o código certo, mas aparece como uma tela em branco. Cada uma dessas situações é um problema distinto, tanto para o SEO quanto para o usuário.

Uma página 404 bem configurada resolve três problemas de uma vez: sinaliza ao Google que a URL não existe; mantém o usuário no site e ajuda a encontrar a seção certa; e protege o orçamento de rastreamento contra rastreamentos desperdiçados. Vamos analisar cada aspecto, na ordem.

O que é uma página 404

404 Not Found é o código de resposta HTTP que o servidor retorna quando o recurso solicitado não existe. O código indica que o servidor funciona normalmente e encontrou a rota, mas o documento pedido não está lá. É isso que diferencia o 404 do 500 (erro do servidor) e do 503 (serviço indisponível).

A página 404 existe em dois níveis. O nível HTTP é o código de resposta no cabeçalho, que o rastreador de busca enxerga. O nível visual é o conteúdo HTML que o usuário vê. Os dois são igualmente importantes: um código HTTP errado é um problema de SEO; um visual ruim é um problema de UX.

A regra principal: sempre retornar HTTP 404

A primeira e mais importante regra: uma página de erro deve retornar o status HTTP 404 (ou 410) — nunca 200. Isso se chama “hard 404”, em oposição ao “soft 404”.

Você pode verificar o status HTTP de qualquer página direto no navegador: F12 → Network → recarregue a página → localize a primeira requisição → coluna Status. Ou use o curl no terminal:

# Check HTTP status of a page
curl -s -o /dev/null -w "%{http_code}" https://example.com/non-existent-url
# Expected output: 404

# Check full response headers
curl -I https://example.com/non-existent-url

Soft 404 e 410: a diferença

Além do “hard 404”, existem dois casos relacionados que costumam ser confundidos na prática: o soft 404 e o status 410. Entender a diferença entre eles é importante para gerenciar corretamente páginas removidas.

O Google também classifica como soft 404 qualquer redirecionamento de uma URL 404 para a página inicial ou para outra página irrelevante. Do ponto de vista do mecanismo de busca: o usuário pesquisou A, caiu em B, e o conteúdo de B não responde à consulta. Isso enfraquece o sinal de qualidade da página de destino.

O que uma boa página 404 deve conter

Quem chega a uma 404 já está levemente frustrado. A função da página é aliviar essa frustração e dar à pessoa um próximo passo claro. Uma página 404 eficaz segue uma estrutura reconhecível.

zoom_in

O que não fazer na página 404: redirecionar o usuário automaticamente para a página inicial via JavaScript (window.location.href = '/'). O Google pode tratar isso como soft 404 — o usuário esperava A, recebeu B, e o conteúdo é irrelevante. Redirecionamentos 301 no nível do servidor a partir de URLs 404 só se justificam quando existe uma página de substituição de fato.

Implementação: Next.js, Nginx, Apache

A configuração de uma página 404 personalizada depende da sua stack. Vamos cobrir as três configurações mais comuns: Next.js App Router, Nginx e Apache.

Next.js App Router

No Next.js 13+ com App Router, a página 404 personalizada é criada pelo arquivo not-found.tsx dentro da pasta app/. Para i18n (por exemplo, com next-intl), o arquivo fica em app/[locale]/.

// app/[locale]/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <main style={{ textAlign: 'center', padding: '4rem 1rem' }}>
      <h1>404 — Page Not Found</h1>
      <p>The link may be outdated or the address was mistyped.</p>
      <Link href="/">Back to homepage</Link>
    </main>
  );
}

// Next.js automatically returns HTTP 404 for this file.

Para gerar 404 programaticamente (por exemplo, em uma rota dinâmica app/[locale]/blog/[slug]/page.tsx), use a função notFound() de next/navigation. Ao ser chamada, ela interrompe a renderização na hora, retorna HTTP 404 e renderiza o not-found.tsx.

// app/[locale]/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getArticleDoc } from '@/messages/blog-articles/registry';

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const article = getArticleDoc(params.slug);

  // If slug does not exist — return HTTP 404 and render not-found.tsx
  if (!article) {
    notFound();
  }

  return <ArticleRenderer article={article} />;
}

// Pages Router: pages/blog/[slug].tsx (legacy approach)
export async function getServerSideProps({ params }) {
  const article = getArticleDoc(params.slug);

  if (!article) {
    // Next.js will return HTTP 404 and show pages/404.tsx
    return { notFound: true };
  }

  return { props: { article } };
}

Nginx

No Nginx, a página 404 personalizada é configurada pela diretiva error_page dentro do bloco server. Confirme que o arquivo 404.html existe no caminho especificado e que a exibição dele não gera um redirecionamento interno que devolva 200.

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # Custom page for 404 errors
    error_page 404 /404.html;

    # The location for the file itself — returns 404, not 200
    location = /404.html {
        internal;
    }

    # Custom pages for other errors
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

Apache / .htaccess

No Apache, a 404 personalizada é configurada com ErrorDocument — no arquivo de configuração principal ou no .htaccess.

# .htaccess in the site root

# Custom 404 page
ErrorDocument 404 /404.html

# You can also point to a PHP file
# ErrorDocument 404 /404.php

# Custom pages for other errors
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

# Enable mod_rewrite for SPA routing
<IfModule mod_rewrite.c>
    RewriteEngine On
    # For React/Vue SPA: all non-existent routes → index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ /index.html [L]
</IfModule>

PHP (WordPress e outros CMSs)

No WordPress, a página 404 personalizada é o arquivo 404.php do seu tema. O WordPress retorna HTTP 404 automaticamente para URLs inexistentes quando os permalinks estão configurados corretamente. Se o CMS retornar 200 em vez de 404, o problema geralmente está no .htaccess ou na configuração do servidor.

<?php
// themes/your-theme/404.php
// WordPress automatically returns HTTP 404
get_header();
?>
<main class="error-404">
    <h1>Page Not Found</h1>
    <p>Try using search:</p>
    <?php get_search_form(); ?>
    <p>Or return to the <a href="<?php echo home_url(); ?>">homepage</a>.</p>
</main>
<?php
get_footer();

Como encontrar e corrigir links quebrados

Uma página 404 bem configurada é só metade do trabalho. A outra metade é encontrar todos os links que apontam para páginas inexistentes e resolvê-los. Links quebrados são a principal causa de erros 404 aparecendo no índice.

# Find top-20 broken URLs in Nginx/Apache logs
grep ' 404 ' /var/log/nginx/access.log \
  | awk '{print $7}' \
  | sort \
  | uniq -c \
  | sort -rn \
  | head -20

# Example output:
# 143 /old-product-page
#  87 /blog/removed-article
#  34 /wp-login.php  (attack attempts — not critical)

Monitoramento de erros 404

Uma auditoria pontual é válida. Mas novos 404 aparecem o tempo todo: páginas são renomeadas, produtos são excluídos, sites externos apontam para URLs inexistentes. Por isso, é importante configurar um monitoramento regular.

Para sites grandes (10.000+ páginas), os logs do servidor são especialmente valiosos: eles cobrem 100% das requisições, incluindo bots, usuários e scripts. O Search Console mostra apenas o que o Googlebot encontrou durante o rastreamento — um recorte do quadro completo.

Checklist de página 404 correta

Status HTTP

• A página 404 retorna o status HTTP 404 (verificado com curl ou DevTools)
• Sem soft 404: a página de erro não retorna 200 OK
• Sem redirecionamento via JavaScript de URLs inexistentes para a página inicial
• 410 Gone é usado em páginas excluídas em massa, sem substituto
• Redirecionamentos 301 são configurados apenas para URLs com página de substituição relevante

Conteúdo da página

• Mensagem de erro clara, em linguagem simples e sem jargão técnico
• Há um campo de busca ou um link para a busca do site
• Há um link para a página inicial
• Há links para 2–4 seções ou categorias populares
• A página segue o estilo da marca do site (cabeçalho, rodapé, fontes)

Implementação

• Next.js: arquivo not-found.tsx criado; notFound() chamada para slugs inexistentes
• Nginx: diretiva error_page 404 configurada; arquivo 404.html marcado como internal
• Apache: ErrorDocument 404 definido no .htaccess ou na configuração principal
• WordPress: 404.php existe no tema ativo
• SPA (React/Vue sem SSR): meta tag noindex adicionada no lado do cliente nas páginas 404

Monitoramento

• Google Search Console conectado e alertas por e-mail configurados
• Rastreamento regular com Screaming Frog ou ferramenta equivalente (pelo menos mensal)
• Logs do servidor acessíveis e analisados em sites com muito tráfego
• Todos os links internos que apontam para URLs 404 foram encontrados e corrigidos

FAQ

Respostas para dúvidas comuns sobre a configuração de páginas 404 que surgem em auditorias e no desenvolvimento.