Vinte designs originais de página 404 que você pode copiar em HTML e CSS, o que uma página 404 útil inclui, exemplos de tom de voz e como garantir que a página envie um status 404 real no Next.js, Netlify, Vercel e outros.
Uma boa página 404 admite com palavras simples que a página não existe, mantém a sua navegação e oferece um caminho: uma caixa de busca, links para páginas populares e uma forma de reportar um link quebrado. Ela também precisa enviar um status 404 real, senão os buscadores a tratam como soft 404. Abaixo estão 20 designs para copiar.
O que uma página 404 deve incluir
Todos os designs abaixo são HTML e CSS puros que você pode editar ao lado de uma prévia ao vivo e depois colar na sua própria página 404. Depois dos designs vem a parte que a maioria das galerias pula: fazer o servidor enviar o código de status certo.
Uma página que diz algo como não encontrado mas retorna status 200 OK, ou uma página rala que os buscadores julgam ser um erro. O Google mostra essas páginas como soft 404 no Search Console e pode tirá-las dos resultados. A solução é retornar um status 404 ou 410 real para páginas inexistentes.
Os dois significam que a página não está lá, e o Google diz que trata erros 4xx praticamente do mesmo jeito. 410 Gone declara que a remoção é permanente, o que combina com campanhas encerradas e produtos excluídos. 404 serve para a maioria dos casos, principalmente quando você não tem certeza.
Não por si só. Páginas inexistentes são parte normal da web, e o Google diz que 404 em páginas que não deveriam existir não prejudicam o resto do site. O prejuízo vem de links internos quebrados, da perda de links que apontavam para uma página que você excluiu e dos soft 404.
A maioria dos single-page apps reescreve toda URL para index.html para que o router possa rodar, o que faz o servidor responder 200 para tudo. Ou você pré-renderiza as páginas reais e deixa os caminhos desconhecidos caírem em um 404.html, ou faz o servidor retornar status 404 para caminhos que o seu router não conhece.
Cada design é HTML e CSS autossuficiente. Edite o código e a prévia se atualiza.
O básico: mensagem, busca e alguns links. Funciona para qualquer negócio.
Dígitos grandes só com contorno dão à página uma forma marcante sem nenhuma imagem.
Mensagem à esquerda, uma lista curta de páginas populares à direita. Empilha no celular.
Para sites com tema escuro. O brilho suave mantém o título legível sem gritar.
Para lojas online: transforme o beco sem saída em uma navegação com três produtos populares.
Um link mailto com o assunto pronto faz o reporte de um link quebrado ficar a um clique. Se puder, adicione o endereço da página ao corpo no seu servidor.
Uma placa de trânsito desenhada só com CSS, então não há imagem para carregar.
Para documentações e grandes sites de conteúdo, em que a busca é o jeito mais rápido de voltar.
Para portfólios e sites pessoais, onde menos é mais.
Leva o visitante com fome direto ao cardápio, às reservas e ao telefone.
Para prestadores de serviço: o visitante provavelmente quer agendar um trabalho, então mostre o telefone.
Um título colorido que combina com marcas descontraídas.
Para ferramentas de desenvolvedor: uma linha de comando falsa com links de verdade.
Leva os leitores aos textos mais recentes em vez de uma página vazia.
Para software: usuários logados muitas vezes caem em 404 por favoritos antigos, então ofereça o painel.
Texto sobre uma imagem de ponta a ponta com uma sobreposição escura para dar contraste. Troque pela URL da sua própria foto.
Sugere para onde a maioria das pessoas vai em seguida, mas nunca redireciona, então o status continua 404.
Um cartão centralizado sobre um fundo colorido, bom para sites modernos e limpos.
Para sites bilíngues, a mensagem nos dois idiomas com links para cada página inicial.
Para páginas que não vão voltar. Combine com um status 410.
O design só ajuda se o servidor também disser 404. Veja como fazer nas configurações mais comuns.
Renderizada para URLs desconhecidas e sempre que você chama notFound(); o Next.js envia um status 404.
As duas servem um 404.html na raiz da pasta publicada com status 404. Um rewrite catch-all para index.html com status 200 quebra isso.
Adicione 404.html na raiz da fonte de publicação. O GitHub Pages o serve com status 404.
Aponta as URLs inexistentes para a sua página mantendo o status 404. Use um caminho local, não uma URL completa, senão o Apache redireciona.
A flag internal impede que alguém carregue /404.html diretamente com um 200.
Adicione o handler depois de todas as outras rotas, para que só as requisições sem correspondência cheguem a ele.
Comece grátis · Sem cartão de crédito