Como personalizar o Error 404 criativo para sua página

Ao navegarmos na internet é muito comum nos depararmos com diversos códigos e termos que, muitas vezes, não conseguimos entender. Alguns deles são elucidados pelos programadores e até mesmo web designers para que a compreensão do usuário seja melhor.

Hoje vamos discutir sobre um deles: o erro 404, e como personalizar ele para não assustar o usuário da sua página!

O que é o Error 404 ?

Como o próprio nome já diz, é um erro que acontece quando um usuário utiliza o seu navegador para acessar uma página qualquer na web.

A internet funciona através do protocolo HTTP, que significa HyperText Transfer Protocol. Esse protocolo funciona da seguinte forma: o usuário acessa o navegador, seja via desktop ou dispositivos mobile, e através do navegador digita uma url com o desejo de acessar um determinado site. Esse site é armazenado em um servidor, portanto, para que o usuário acesse ele, esses dados devem ser enviados do servidor para o cliente, no caso o computador do usuário. Toda essa comunicação ficaria muito confusa se não existisse um padrão, por isso existe o HTTP.

O cliente “pedir” para o servidor que o site seja carregado se chama requisição. O servidor enviar o site de volta para o navegador, com todo o código HTML, imagens e dados, se chama resposta.

As requisições mais padrões que existem, e as mais usadas, são as requisições GET e POST. O tipo de requisição GET, como o próprio nome já diz, é um pedido para o servidor, um pedido para carregar os dados da aplicação web, para ouvir uma música ou ver um vídeo, por exemplo. Já a requisição POST é geralmente um envio de dados, na forma de um formulário, para salvar algumas informações pertinentes no banco de dados da aplicação acessada. Esses dois tipos de requisições são registrados por arquivos de log do servidor.

As respostas, como vocês devem estar imaginando, são as ações que a aplicação tem quando é carregada com sucesso. Porém, existem vários tipos de response no protocolo HTTP. Vamos discorrer sobre algumas delas até chegarmos no famigerado erro 404.

Vale lembrar que além do erro 404, existem outros, como o erro 403. Esses erros devem ser tratados com o auxilio de especialistas que entendem do assunto.

Os diversos códigos de resposta do HTTP.

As respostas, ou responses, em HTTP são de nível informativo para o usuário, ou até mesmo para desenvolvedores. Elas são um conjunto de informações que definem o que está acontecendo com a requisição que foi enviada naquele momento. Elas são definidas em classes para que fique simples a categorização de cada uma delas. São:

1. Classe de status informativa: Não representam erro, apenas que o servidor recebeu a requisição e está processando ela (100 Continuar, 101 Processando Protocolos);
2. Classe de status de Sucesso: Sua página foi carregada e está pronta! (200 OK!);
3. Classe de Status de redirecionamento: Você digitou a url do site que sempre acessa, mas o dono dele acabou mudando a url da página inicial, portanto você vai ser redirecionado para ela. (301 Movido Permanente);
4. Classe de Erro do cliente: Algo está errado com a requisição por parte do cliente, o servidor não sabe como processar a requisição. (404 Page Not Found!);
5. Classe de Erro do servidor: A requisição foi feita de forma correta pelo cliente mas o servidor está com problemas internos e não consegue enviar a resposta corretamente (500 Internal Server Error).

Quais são as possíveis causas do Error 404

Como foi explicado anteriormente, o erro 404 é um erro do cliente, ou seja, o erro parte da requisição feita do cliente para o servidor. Esse erro significa que o usuário está tentando achar uma página que possui uma URL específica, porém o usuário não está conseguindo acessar o site em questão mesmo assim. O servidor sabe como enviar as respostas pertinentes, mas para esse caso, para essa “URL defeituosa” não existe página alguma. Então o servidor envia o código de erro 404 na resposta e o navegador interpreta. Só então a mensagem será mostrada ao usuário.

Esse erro pode ocorrer por diversos motivos. Um deles é simplesmente a página não existir mais dentro do site. Imagine o seguinte caso, você é dono de uma loja online, dentro do site da sua loja existe um determinado produto, um sapato específico. Para acessar a página desse sapato diretamente é possível acessá-la através de um link, uma URL específica. Algumas pessoas compartilharam esse link e o seu produto é um sucesso! Mas, infelizmente, ele acabou e você decidiu tirar aquela página, desse sapato em específico, do site. Quando uma pessoa que salvou o link, mas perdeu o prazo de acesso, clicar nele a primeira coisa que irá aparecer vai ser o erro 404.

Outro caso é quando o cache do navegador está muito cheio, ou até mesmo vírus e malwares podem causar o mau funcionamento do navegador. Portanto, o redirecionamento estará errado, problemas vão acontecer tentando acessar a URL e esse tipo de erro irá se tornar rotineiro.

Customizando o error 404 na sua página

A pergunta que não quer calar é, por que devo redirecionar o error 404 para uma página personalizada do meu site? A mensagem já não está clara para o usuário?

Bom, uma máxima que deve ser mantida em toda aplicação web, e também no mundo dos negócios, é que o cliente/usuário sempre tem razão. Caso o usuário se depare com uma situação dessas e acabe na página de erro do Google ele vai ter que voltar algumas páginas para acessar o seu site novamente, correndo o risco de cair no mesmo erro e, provavelmente, desistindo de acessar o seu site, pois terá que fazer muitas interações novamente para chegar no mesmo ponto. Como sabemos, na internet tudo precisa ser rápido e prático.

Outro fator é que alguns motores de busca, como o Google, penalizam  a sua página caso esse erro não esteja sendo tratado na sua aplicação web. Quanto mais penalizada sua página for, menor será o número de acessos que ela vai ter. Portanto, sempre é uma boa prática tratar os erros do seu site de forma intuitiva e amigável, oferecendo uma experiência excelente para o usuário!

Imagine que sua aplicação web é uma loja física. Cada cliente que entra nela está procurando um produto, se esse produto não existe na sua loja o ideal seria oferecer outro produto para o cliente não é mesmo? Portanto, faça o mesmo com seu site, quando a página não existir mostre uma mensagem de desculpas mas continue com a aba principal disponível, assim como a barra de pesquisa.

Dentro dessa página mantenha informações pertinentes para o usuário, como canais de contato, redes sociais e principalmente o contato do suporte. Links para dúvidas frequentes são um excelente meio caso vários usuários tenham o mesmo problema.

Caso você queira mostrar seriedade e profissionalismo as dicas dadas anteriormente já podem servir para que seus clientes tenham uma experiência amigável enfrentando esse erro. Agora se sua página web, loja, ou qualquer que seja seu negócio online tenha uma imagem mais “descontraída” vamos listar alguns erros criativos para que você possa se inspirar!

Lego

Uma das mais famosas e antigas marcas de brinquedos do mundo trata seus erros de uma forma bem descontraída e explicativa!

NASA

Como é de se esperar, o error 404 na página da NASA é tratado com muita ciência e um pouco de humor.

DC Comics

A página da DC, uma das mais famosas editoras de quadrinhos do mundo, usa um pouco da sua bagagem de histórias para elucidar o error 404 para o usuário. Aqui os vilões roubam a página e por isso o usuário não consegue mais ver ela.

Conclusão

Tratar o error 404 de forma criativa é a chave para que você lide com imprevistos e seus clientes não vejam isso de uma forma negativa. É também um jeito de prevenir que seu site seja penalizado por motores de busca. Oferecer opções de navegação e contato ao suporte na sua página personalizada de erro é uma forma de mostrar para o usuário que você se importa com a experiência dele, e isso tem um impacto muito positivo!

Depois de personalizar sua página, é importante medir o funcionamento e o tempo de resposta dela! Para isso, indicamos uma ferramenta que já falamos anteriormente aqui no blog e que irá te auxiliar a medir o desempenho do seu site, o GTMetrix!

Quer ter acesso a vários conteúdos interessantes sobre sucesso na internet? Continue acompanhando o blog da i7 Host!