O que é erro 404 (com 15 exemplos de páginas criativas)
Atualizado: 15 de ago.
Atualizado em: Setembro 2023
A página de erro 404 é um fator importantíssimo na criação de uma boa experiência de usuário. Ela também pode ser um indício de que há algum problema com o serviço de hospedagem de site ou com as configurações do Sistema de Nomes de Domínio (DNS) que você está utilizando.
Nesse sentido, a forma como você aborda o erro 404 pode ser o que determinará se os visitantes vão deixar seu site ou se tornar clientes leais e fãs da sua marca. Falando nisso, vale a pena conferir nosso artigo sobre como hospedar um site.
Neste artigo, vamos explicar o que é erro 404, como lidar com ele no seu site e as formas de utilizá-lo para fortalecer a identidade da sua marca.
O que é erro 404
A página de erro 404 é uma ocorrência comum na internet. Ela surge quando um link que você tenta acessar está quebrado ou não existe mais. Este erro, conhecido como "página não encontrada", pode ser frustrante para os usuários que esperam uma experiência sem interrupções ao navegar na web. As páginas de erro 404 desempenham um papel vital nesses momentos, fornecendo uma indicação clara de que algo deu errado e orientando os usuários sobre como proceder.
Quando for criar uma loja virtual, você pode manter as opções predefinidas ou personalizar sua página de erro 404. Se escolher a segunda opção, é possível criar um design mais cativante que aprimore a experiência dos usuários. Além de ter mais controle sobre o design, você terá a opção de escrever uma mensagem amigável, compatível com sua marca e que forneça a ajuda que os visitantes precisam para continuar navegando.
O que causa um erro 404 not found
Links quebrados
URLs fora de ar ou incorretas nos seus links internos ou externos podem causar erros 404.
Páginas excluídas
Se você remover uma página sem configurar outra para receber os novos acessos, os usuários encontrarão um erro 404 ao tentar acessar a página antiga.
Erros de digitação
Erros simples nas URLs podem levar a erros 404 quando os usuários digitam ou clicam nos links errados.
Mudanças na estrutura das URLs
Alterar a estrutura das URLs do seu site sem redirecionar o endereço antigo a uma nova página pode causar erros 404 nas páginas anteriores indexadas.
Problemas na configuração dos servidores
Configurações incorretas nos servidores podem atrapalhar o carregamento das páginas.
Como consertar o erro 404
Consertar os erros 404 é essencial para manter uma experiência de usuário positiva e reter o tráfego conquistado. Monitorar seu site regularmente, implementar os redirecionamentos corretos e manter um sitemap ajudará você a acompanhar de perto os possíveis erros 404 e contribuirá para o sucesso do seu site e sua presença online. Agora que você já sabe o que é erro 404 e suas causas, reunimos alguns passos que você pode seguir para garantir que seu site funcionará corretamente:
Monitore regularmente as estatísticas do seu site
Para identificar e consertar erros 404 de forma eficiente, monitore com frequência as estatísticas do seu site. O Google Analytics e outras ferramentas de acompanhamento podem ajudar você a saber em quais páginas os usuários costumam encontrar erros. Ao determinar onde os erros ocorrem, você pode priorizar seus esforços para solucioná-los mais rápido.
Redirecione corretamente
Ao mover, excluir ou renomear uma página, certifique-se de configurar redirecionamentos 301 (também chamados de “redirects”). Com eles, você redireciona permanentemente os usuários e mecanismos de buscas da URL, encaminhando à nova URL todos os acessos à antiga. Isso não apenas ajuda a reter um volume de tráfego valioso como também preserva o SEO do seu site.
Leia também: o que é redirect 301?
Use páginas 404 personalizadas
Criar páginas de erro 404 personalizadas com uma interface intuitiva e agradável é essencial. Uma página com um bom design é capaz de engajar os usuários, fornecer links de navegação úteis e incentivar os visitantes a continuar no seu site. É uma oportunidade para se desculpar pelo transtorno e redirecioná-los a conteúdos relevantes ou à página inicial.
Faça auditorias frequentes no seu site
Conduzir auditorias regulares no seu site ajudará a detectar e consertar erros 404 proativamente. Existem diversas ferramentas online para escanear seu site e identificar links quebrados ou páginas que não estão funcionando. É importante lidar proativamente com esses problemas para proporcionar uma experiência de usuário fluida.
Mantenha um sitemap
Um sitemap, ou mapa do site, é um arquivo que fornece informações sobre as páginas do seu site aos mecanismos de busca. Atualize e envie regularmente seu sitemap aos mecanismos de busca para garantir a identificação e indexação correta das suas páginas. Isso ajuda a reduzir as chances de aparecer um erro 404 nos resultados de buscas.
Verifique os links externos
Confira os links externos que levam ao seu site. Se você descobrir links externos quebrados, entre em contato com o site em que o link aparece e solicite atualizações. Como alternativa, você também pode configurar redirecionamentos para encaminhar todo o tráfego dos links externos a páginas relevantes do seu site.
Evite alterar as URLs
Sempre que possível, evite realizar alterações nas suas URLs. Estruturas de URL consistentes são mais intuitivas para os usuários, previnem erros 404 e melhoram o SEO.
Qual é a importância de uma página de erro 404?
A importância da página de erro 404 está em proporcionar uma experiência informativa e amigável aos visitantes que encontrarem um link quebrado ou que não funciona.
Uma página 404 com um bom design é capaz de melhorar a experiência do usuário (UX) como um todo ao evitar que os usuários encontrem uma mensagem genérica e pouco útil, como “erro 404 not found” quando mais precisam de instruções para navegar. Em vez disso, uma página bem-formulada pode manter os usuários no seu site, guiando sua navegação aos conteúdos mais relevantes ou sugerindo outras páginas úteis.
Ao clicarem em um link quebrado, os visitantes podem usar a página 404 como um guia de navegação, aproveitando links para páginas populares do site ou categorias, ou sendo encaminhados à página inicial. Com esse recurso, você reduz a chance de os usuários deixarem seu site, aumentando a retenção.
Além do mais, a criatividade no design da página 404 pode refletir a personalidade da sua marca e mostrar o quanto você se importa com a experiência dos seus usuários. Isso deixará uma boa impressão, mesmo que algo tenha dado errado, mostrando sua atenção aos detalhes e comprometimento em proporcionar uma boa experiência ao usuário. Afinal, os clientes buscam produtos e serviços para solucionar seus problemas; portanto, quando ocorre um problema, surge a oportunidade perfeita para demonstrar preparo, organização e competência enquanto marca.
15 exemplos criativos de páginas de erro 404
1. Wix – Página 404 organizada e direto ao ponto
Essa não podia ficar de fora. E não é só porque mostramos um gato extremamente fofo. Além da fofura do nosso amigo felino, a imagem também sugere de forma sutil que o visitante talvez tenha digitado o nome de domínio errado (ou a culpa é do seu bichano).
Além do aspecto visual, essa página de erro 404 disponibiliza links muito úteis que guiarão o visitante até a página desejada. O texto é conciso e direto ao ponto. Com uma escolha mais simples de cores para sites, com um fundo branco, assim como um toque de cinza e preto, o design da página transmite uma sensação de tranquilidade (confira nosso artigo sobre o que é web design).
2. Pixar – Página 404 fofa
Fãs da Pixar com certeza vão se identificar com essa página 404. Ao incluir uma personagem do clássico “Divertida Mente”, a página fortalece a reputação da marca e cria uma conexão com os visitantes. O uso de uma linguagem coloquial e uma personagem familiar também transmite mais intimidade, o que, por sua vez, ajuda a conectar o público à marca.
Mesmo que sua marca não seja tão conhecida quanto a Pixar, você pode utilizar textos e imagens para transmitir uma sensação amigável e humana. Experimente usar uma linguagem mais íntima e informal, usando palavras como “hmm”, “vish” e “opa” para que seu público se identifique.
3. Omelet – Página 404 bem-humorada
Nada como o bom humor para aliviar uma situação frustrante. A Omelet, empresa especializada na criação de conteúdo e gestão de estratégias de marketing, utiliza todo o poder de um bom trocadilho na sua página 404.
O vermelho intenso como cor de fundo indica automaticamente um sinal de alerta, mas o pânico inicial é aliviado pela mensagem “This page is eggstinct”, usando o trocadilho em inglês da palavra “egg” (ovo) com a palavra “extinct” (extinta) e mantendo a temática do omelete, presente não apenas no nome da marca como também em vários outros detalhes da sua identidade. Observe como a barra do menu permaneceu visível na parte superior da tela, garantindo uma navegação confortável e incentivando os visitantes a continuar navegando.
4. Dribbble – Página 404 interativa
Distrações nem sempre são ruins. A Dribbble é uma rede social que comprova esse ponto. O design divertido e interativo convida os usuários a um pequeno jogo, desviando momentaneamente a atenção do fato de que eles não encontraram a página desejada.
O jogo não só é viciante como também auxilia na navegação. Ao clicar em qualquer imagem, você será encaminhado ao perfil do criador, removendo você da página 404 de forma fluida. O site também se certificou de incluir uma barra de pesquisa e um link para a página inicial.
5. Dropbox – Página 404 com informações úteis
É impossível não se apaixonar por essa dupla tentando se equilibrar em cima da bicicleta. Desenhadas em um estilo inocente, as figuras sorriem de orelha a orelha e fazem nosso dia melhorar pelo menos um pouquinho. Esse fantástico exemplo de incorporação de ilustrações ao web design transmite uma sensação de familiaridade que alivia a frustração de ter caído em uma página de erro 404.
Além disso, o Dropbox fez questão de incluir alguns links úteis que permitem ao usuário acessar facilmente outras páginas. Ao criar sua página 404, recomendamos adicionar links para as seções mais procuradas do seu site, como página inicial, seção de contato e página “Sobre”, para ajudar na navegação dos visitantes.
6. The-Artery – Página 404 com identidade de marca
Com uma página que mais parece uma obra de arte do que um erro, não há o que reclamar da página 404 do estúdio The-Artery. O visual estiloso possui coesão interna com o resto do site, o que resulta em uma experiência fluida de navegação, mesmo ao acessar um link quebrado.
Cada aspecto da página parece muito bem planejado. A imagem, por exemplo, se move em resposta ao cursor e é composta por vários elementos interessantes. Isso aumenta a chance de os usuários não só continuarem no site como também permanecerem um pouco mais na página 404 para interagir com ela. O texto é amigável, convidando você a clicar em qualquer parte da tela para continuar navegando.
7. Lazy Oaf – Página 404 inovadora
Essa página 404 não se atém às convenções. Afirmando que “mantém um estilo esquisito desde 2001”, a marca de moda Lazy Oaf também manteve esse estilo na sua página de erro 404 (da melhor forma possível).
Em vez de explicar aos visitantes do site que eles chegaram em uma página 404, a marca inventa desculpas engraçadas, usando emojis de carinhas tristes e uma plaquinha dizendo o equivalente a “é a vida” ou “não foi culpa minha”. No entanto, essa página 404 irreverente e de cores brilhantes não é nem um pouco triste.
A página tem uma navegação intuitiva, mantendo a barra do menu visível, além de incluir imagens da sua loja virtual, bastando descer um pouco na página para encontrá-las.
8. Spotify – Página 404 com um toque pessoal
A página de erro do Spotify segue e fortalece o manual de identidade visual da marca, com um estilo que usa o millennial pink e alude aos discos de vinil. As barras de menu continuam na tela, tanto no cabeçalho quanto no rodapé de site, simplificando a navegação.
Além da possibilidade de navegar via menus, o Spotify também adotou uma linguagem amigável e informal para sugerir outras páginas úteis. Ao criar sua página 404, tente implementar palavras informais como “talvez” e adicionar perguntas para ajudar os visitantes a sentir que há um humano do outro lado da tela.
9. Julie Bonnemoy – Página 404 animada
O portfólio de design da designer freelancer Julie Bonnemoy é um verdadeiro banquete para os olhos. A página 404 tem um design quase idêntico ao da página inicial, mas com um texto diferente. Isso significa que você pode navegar facilmente para qualquer outra seção sem nem perceber que houve um erro 404.
Se decidir usar uma página 404 semelhante, você pode experimentar adicionar certos elementos para criar uma experiência que engaje os visitantes. Utilize elementos animados no seu site, adicione vídeos transparentes e inclua ilustrações exclusivas até encontrar seu estilo.
10. OkCupid – Página 404 tranquila
O OkCupid, site de relacionamentos e encontros, não tenta esconder seu principal objetivo: incentivar os visitantes a se cadastrar na plataforma. Por mais que o CTA (call-to-action) seja uma abordagem direta, ele vem acompanhado de uma fonte delicada e de um visual submarino com elementos que flutuam gentilmente na tela. Em conjunto, eles formam uma estética equilibrada e que não tenta forçar a barra.
Outra dica importante para o design da sua página 404 é centrar o design em torno de tonalidades leves e calmas, buscando sempre assegurar aos clientes que, por mais que a página não tenha sido encontrada, eles ainda estão no caminho certo. O tom de azul usado pelo OkCupid evoca uma sensação de tranquilidade e confiança, uma ótima escolha para uma página 404. Também vale a pena dar uma olhada na psicologia das cores para encontrar a tonalidade certa para seu design.
11. Lego – Página 404 amigável
A Lego usou um personagem conhecido no design da sua página 404, o que ajuda a conectar o público com a marca e criar uma atmosfera amigável. O estilo informal do texto também deixa o leitor tranquilo, mantendo um tom leve e divertido, com pontos de exclamação e uma linguagem coloquial.
Se sua página 404 tiver uma pegada mais bem-humorada, lembre-se de que ela também deve ser útil para o cliente, oferecendo alternativas de navegação, como podemos ver na página da Lego. A ênfase foi posta no CTA, com um fundo branco que coloca o botão em destaque. Mantendo-se o menu na tela, tanto no cabeçalho quanto no rodapé, os visitantes podem acessar outras páginas de forma simples e rápida.
12. Ueno – Página 404 criativa
A agência digital Ueno criou algumas variações da sua página 404, todas com um tom leve e descontraído. A animação do cachorro-quente fugindo já é suficiente para nos fazer abrir um sorriso. Agora, se considerarmos também o texto à esquerda, é justo dizer que vir parar nessa página nos deixará mais contentes do que frustrados.
A Ueno combinou comédia com um design preciso e minimalista. Se for incluir humor na sua página 404, certifique-se de equilibrar o conteúdo mantendo um visual profissional que siga os princípios do design. O uso do espaço em branco, uma paleta de cores reduzida e uma hierarquia de textos ajudará sua marca a encontrar um tom profissional.
13. Figma – Página 404 que engaja
Ao primeiro olhar, o design da página parece ser um simples fundo branco com texto preto, mas é muito mais do que isso. Se olharmos mais de perto, vemos que é possível interagir com o texto e alterar sua forma, o que por si só já é um passatempo bem viciante. Além disso, essa interatividade dá aos clientes uma boa ideia sobre a natureza do produto.
O Figma também incorpora várias opções diferentes de navegação, incluindo menus no cabeçalho e rodapé da página. Visitantes que estejam frustrados podem acessar facilmente a página que estão buscando, bastando clicar em um dos vários itens do menu.
14. MailChimp – Página 404 comovente
Com um estilo de ilustração que se encaixa perfeitamente entre o infantil e o emotivo, o MailChimp certamente sabe amenizar uma situação desanimadora (como a de cair em uma página 404). A marca incluiu um grande botão que se destaca, sendo ele o único elemento colorido e situado bem no centro da página.
No entanto, o que torna essa página de erro 404 realmente especial é a sensibilidade com que cada elemento foi criado. A imagem do burrinho com a cabeça em um buraco, procurando desesperadamente a página que o visitante estava buscando, é comovente por si só. Mas quando combinada com a linguagem poética e a escolha de fontes, uma serifada e outra sem serifa, o efeito final é reconfortante.
15. Wade and Leta – Página 404 fora da curva e interessante
A página 404 da dupla Wade e Leta tem um design único que se destaca dos demais. Assim como o resto do seu portfólio, a página tem um toque pessoal e estranho, tudo na medida certa. Eles incluíram um GIF em loop do Wade conversando em uma seção de um supermercado e gesticulando, o que parece não ter conexão alguma com o erro 404.
Dica de leitura: Como fazer um portfólio digital.
Apesar de parecer desconexo, o visual é muito cativante e nos faz sorrir, o que é um resultado muito positivo para uma página desse tipo. Além de demonstrar e expressar várias tendências de design, o texto em fontes grandes e ousadas também serve para informar o erro aos visitantes de forma estilosa e irreverente.
Outros tipos de erros
400 – Solicitação inválida (Bad request)
O servidor não consegue entender a solicitação do cliente devido a uma sintaxe malformada ou parâmetros inválidos.
401 – Não autorizado (Authorization required)
O cliente deve se autenticar para obter a resposta solicitada, e as credenciais de autenticação fornecidas estavam ausentes ou eram inválidas.
403 – Proibido (Forbidden)
O servidor entendeu a requisição, mas se nega a autorizá-la. O cliente não possui as permissões necessárias para acessar o recurso solicitado.
408 – Tempo limite de operação excedido (Request Time-Out)
A solicitação do cliente demorou muito para ser concluída, e o servidor encerrou a conexão devido a um tempo limite.
500 – Erro de servidor interno (Internal Server Error)
O servidor encontrou uma condição inesperada que o impediu de atender à solicitação.
502 – Erro de proxy (Bad Gateway)
O servidor, enquanto atuava como gateway ou proxy, recebeu uma resposta inválida do servidor upstream que acessou para atender à solicitação.
504 – Tempo limite de gateway (Gateway Time-out)
O servidor, enquanto atuava como gateway ou proxy, não recebeu uma resposta em tempo hábil do servidor upstream ou de outro servidor auxiliar que precisava acessar para concluir a solicitação.
FAQ – Perguntas frequentes sobre o erro 404
O que é erro 404?
O erro 404 é um código de status do HTTP que indica que a página ou o recurso solicitado não pôde ser encontrado no servidor. Isso ocorre quando o servidor não é capaz de localizar uma URL ou conteúdo específico que o usuário está tentando acessar.
Por que minha tela mostra um erro 404?
Você encontra um erro 404 quando tenta acessar uma página que foi movida, excluída ou nunca existiu no servidor. Isso pode acontecer devido a um erro de digitação na URL, links expirados ou reestruturação de um site que mudou a localização da página.
O erro 404 é um risco de segurança?
O erro 404 não é um risco direto de segurança. É uma mera indicação de que o conteúdo solicitado não está disponível. No entanto, pessoas mal-intencionadas podem forjar uma página de erro 404 para enganar os usuários ou acobertar atividades ilegais. Sempre verifique se você está em um site legítimo e tome cuidado quando encontrar vários erros 404 no mesmo site.
Leitura bônus: O que é hospedagem de site?
Por Hanna Kimelblat
Blogger & Growth Marketing Expert - Português
