Confira o passo a passo para criar uma página de erro 404 personalizada

O WordPress é uma das ferramentas mais populares para a criação e gerenciamento de websites e isso não é por acaso. Suas muitas funcionalidades permitem que o usuário crie experiências personalizadas para os visitantes da página e, assim, usufrua dos muitos benefícios de um canal digital eficiente.

Naturalmente, a gestão do site envolve uma série de técnicas para ser bem-sucedida e, mesmo se for, nem sempre é possível escapar de alguns erros comuns. Um equívoco de configuração pode, por exemplo, tornar uma página do site inacessível. Isso gera o erro 404, nada agradável para a experiência dos visitantes.

Contudo, a boa notícia é que é possível contornar a situação e, quem sabe, recuperar um internauta insatisfeito. Soa como uma boa ideia? Então, você precisa saber como criar uma página de erro 404 personalizada. Continue lendo este post para descobrir:

• O que é erro 404?
• Por que contar com uma página de erro 404 personalizada?
• Como personalizar minha página?
• Quais são os melhores exemplos de personalização e criatividade?

O que é erro 404?

O erro 404 é um dos mais comuns na internet. É difícil encontrar alguém que nunca tenha se deparado com essa página, que, basicamente, informa que o endereço em questão não está disponível. Diversos fatores podem levar a esse problema, mas antes de falar deles, vamos entender o que, de fato, significa essa mensagem.

Em linguagem HTML, o código 404 pode ser entendido em duas partes. O número “4” inicial indica que o erro foi provocado pelo cliente, ou seja, por quem solicitou a página ao servidor. Já o “04” simplesmente informa que o documento HTML não foi encontrado, logo, a solicitação não pôde ser concluída.

Observe essa imagem de erro 404 do Google e perceba como o texto que acompanha o erro 404 indica que a URL não foi encontrada no servidor em questão.

Não ficou claro? O que o erro 404 informa ao visitante é que o servidor do site que ele está tentando acessar está comunicável, mas a página em questão não pode ser encontrada. Na imagem, ainda é possível ler “Isso é tudo que sabemos”. Isso é porque, como já falamos, não existe apenas uma razão para a ocorrência do erro.

O que pode causar o erro 404?

Uma das causas mais comuns desse tipo de erro sequer tem a ver com o administrador do site. Geralmente, a página 404 aparece simplesmente porque o usuário, ao digitar a URL na barra de pesquisas, errou pelo menos um caractere. Desse modo, fica claro que todos os sites estão expostos a esse tipo de situação.

Dessa maneira, não adianta ignorar a personalização da página 404 porque você entende que a configuração de todas as páginas está infalível. Afinal, mesmo que isso seja verdade, usuários continuarão a se deparar com o erro ao confundirem o endereço da página, muitas vezes sem ao menos perceber isso.

Deixando de lado a ação dos usuários como causa, os outros motivos têm a ver com falhas ocorridas em algum detalhe da gestão do site.

Um editor, por exemplo, pode alterar a estrutura de uma URL para torná-la mais amigável e melhorar a pontuação de SEO. Sem problemas, mas se ele esquecer de configurar o redirecionamento da antiga URL para a nova, vai gerar o erro 404.

Trata-se de uma situação muito comum em momentos de migração. Pense, por exemplo, que você conta com uma sólida estratégia de link building e conta com diversos domínios apontando para suas páginas.

Se você mudar o endereço delas, quem clicar nos links da estratégia não vai chegar na página desejada.

Com tudo isso, entendemos que o erro 404 é causado pelo usuário ou pelo administrador do site, não tendo nada a ver com problemas no servidor.

Como o erro 404 prejudica minha estratégia digital?

Você já sabe que qualquer tipo de inconsistência na experiência digital do usuário pode levar a sua insatisfação, mas as consequências do erro 404 vão além disso. É que, embora essas páginas não sejam consideradas pelos mecanismos de busca, elas podem, de forma indireta, afetar os seus resultados de SEO.

É bem simples. Pense em sua própria experiência como usuário de internet e responda: o que você faz quando se depara com uma página de erro ao tentar acessar um site? Provavelmente aperta o botão de voltar e busca por outra opção semelhante, correto? É exatamente isso que você deve evitar em seu site.

Não apenas pela satisfação geral do usuário, mas também pelos sinais que isso passa ao algoritmo do Google. Se muitos usuários tentam acessar uma página e saem logo em seguida, a Bounce Rate sobe, o tempo de permanência na página desce e o seu ranking nos mecanismos de busca cai.

Sendo assim, fica mais do que clara a necessidade de manter suas URLs atualizadas e monitorar suas páginas para garantir seu funcionamento. Ainda assim, é utópico imaginar que o seu website nunca vai apresentar um erro 404. Então, o que fazer? A resposta está na personalização.

Por que contar com uma página de erro 404 personalizada?

Considerando que as páginas de erro 404 não podem ser completamente evitadas, é interessante fazer uso delas para amenizar o problema e até colher benefícios.

A personalização permite, para começar, que você deixe a página de erro com a cara do seu website, evitando os visuais padrões que os internautas já estão cansados de ver.

Assim, você fortalece a identidade visual da sua marca e, sutilmente, informa ao visitante que ele ainda está no site e pode tomar outras ações. Em outras palavras, você garante que o leitor não pense que foi direcionado para fora do site ou, pior, que o portal não existe mais.

Com a personalização, você também pode usar o espaço da página de erro para manter o visitante envolvido na experiência. Como? Oferecendo informações relevantes e outras opções de navegação.

Por exemplo, uma mensagem amigável pode explicar o erro e sugerir formas de contorná-lo. Outra ideia é um botão que leve a pessoa até a página inicial do site, onde ela pode encontrar o que procura.

Com criatividade, é possível gerar até uma experiência divertida para o usuário. Observe, por exemplo, esse exemplo da Magnt. Repare como a página, de forma lúdica, explica o que pode ter motivado o erro e, ainda, oferece um botão de redirecionamento para a página principal.

Mais a frente, vamos apresentar mais exemplos que podem inspirar você. Antes disso, vamos entender melhor o processo de personalização dessas páginas. Siga a leitura!

Como personalizar minha página?

Se você tem conhecimentos técnicos avançados de HTML, tem a possibilidade de realizar essa edição por meio do servidor, iniciando pela edição do arquivo .htaccess. Contudo, é bem verdade que esse tipo de habilidade não é das mais comuns, e pode significar a necessidade de contratar um profissional.

Como conduzir o processo pelo cPanel?

Contudo, a realidade é que a maioria dos CMSs oferecem opções mais simples para resolver o problema, como a utilização do cPanel, que é uma espécie de plataforma de gerenciamento de sites em WordPress. Para utilizar esse caminho, acesse o painel de controle, vá até o menu avançado, e acesse as páginas de erro.

Depois, selecione o domínio em que se encontra a página de erro que você quer personalizar. Por configuração padrão, o cPanel vai exibir uma lista com alguns dos erros mais comuns, como o próprio 404, o erro 500, o erro 0101 e por aí vai.

Escolha o tipo de página que você quer editar e prossiga para o próximo passo. Agora, depende das funcionalidades oferecidas pelo seu serviço de hospedagem. Algumas só permitem a edição por meio de mudanças diretamente no código HTML, o que pode ser um desafio para quem não é tão experiente no assunto.

Se você usa o WordPress, pode realizar todo o processo de forma mais simples a partir da instalação do plugin 404page. Essa ferramenta permite que você crie um redirecionamento automático da página de erro para outro ponto do seu website, como sua homepage. Mas, como o foco deste texto é a criação de páginas personalizadas, vamos observar como o plugin pode ajudar nisso.

Como editar sua página de erro a partir do plugin 404page?

O primeiro passo não poderia ser mais simples: criar uma página nova que, no futuro, se transformará na mensagem de erro personalizada. Para tal, acesse o painel do WordPress, vá até “páginas” e clique em “criar nova”.

Na página recém-criada, você pode fazer as alterações que quiser. Escreva mensagens criativas, mexa com as cores, adicione imagens e faça o que achar necessário para torná-la adequada à situação, ao tom de voz da sua marca e às características da persona.

Com a página criada, é hora de baixar o 404page. Agora, o caminho é bem simples. Abra o plugin, acesse a aba “general” e selecione a página que você quer configurar como destino para os usuários que acessarem uma URL inexistente. Naturalmente, você vai selecionar a página que acabou de criar e personalizar.

Como você pode notar, esse processo cria uma página de erro secundária que, essencialmente, é mais um endereço dentro do seu website. Dito isso, é preciso tomar as precauções necessárias para evitar que essa página seja indexada no ranking de pesquisa dos mecanismos de buscas. Um plugin especializado, como o Yoast SEO, resolve esse problema facilmente.

Achou o processo complicado? Embora muito popular e eficiente, o WordPress pode ser um desafio para os menos experientes, ou para os que não têm tempo suficiente para focar na manutenção do site.

Por isso, é crucial fazer uso de uma plataforma de hospedagem como a Stage, que, além de facilitar a execução de diversos processos, garante alta performance ao seu site e aumenta os níveis de segurança. Se quiser saber mais, é só fazer um teste!

Exemplos de personalização e criatividade

Bom, agora que você entende o que é e o que representa a página de erro 404 e sabe que sua personalização pode ser benéfica para a experiência dos usuários e, consequentemente para os seus resultados, deve estar pensando em criar a sua. Por isso, separamos alguns exemplos excelentes para alimentar sua criatividade. Acompanhe!

Lego

A página de erro da Lego é um excelente exemplo por reunir praticamente todas as características recomendadas para esse tipo de personalização. Como você pode ver abaixo, o design reflete bem a identidade visual da marca. Até brinquedos famosos são usados de forma engraçada para atenuar a mensagem de erro.

Além disso, na parte de baixo, a Lego oferece um link que direciona o usuário até a loja do site.

Pixar

A Pixar também apela para um de seus personagens famosos para tornar a mensagem de erro menos frustrante. Além isso, a linguagem empregada é bem informal, o que é adequado para o público que geralmente acessa o site da produtora de filmes animados.

O interessante é notar como a empresa dá importância à personalização dessas páginas. No exemplo mostrado abaixo, a personagem utilizada vem da animação “Divertidamente”. Contudo, se você acessar agora a página de erro da Pixar, pode se deparar com outro personagem, provavelmente em maior relevância no momento.

Dropbox

A página de erro do Dropbox também utiliza imagens positivas para diminuir a sensação de frustração do usuário. No caso, são dois personagens desenhados de forma bem simples, mas que suavizam a experiência. Logo abaixo, o Dropbox informa que a página não pôde ser encontrada.

Nesse exemplo, temos uma situação bem interessante. Além de informar o erro, a página é utilizada como geradora de tráfego para outras partes do website. O Dropbox, a fim de evitar que o usuário abandone a experiência por completo, lista uma série de links que podem ser úteis.

Spotify

A página de erro do Spotify se destaca pelo design, que é extremamente adequado à identidade da marca e ao perfil de seu público. Nela, o usuário se depara com um disco vinil que gira por alguns momentos até parar, talvez representando o erro. Além disso, as cores suaves fazem jus ao público do serviço, composto majoritariamente por jovens.

No texto em que informa que a página não existe mais, o Spotify oferece links que podem ajudar o usuário, como a seção de perguntas frequentes.

Starbucks

Uma imagem é suficiente para manter viva a identidade da marca Starbucks: uma mancha de café. Além da parte visual, a página de erro da empresa americana apresenta uma série de possíveis causas para a falha e informa o que o usuário pode fazer para resolver o problema.

Sem dúvidas, o erro 404 deve ser evitado e corrigido. Afinal, sua exibição pode afetar negativamente a experiência do usuário e, de quebra, prejudicar sua estratégia de SEO. Dito isso, por se tratar de um problema que não pode ser evitado completamente, contar com uma página de erro 404 personalizada pode reduzir danos e até agir a favor do seu branding.

Quer saber mais sobre os erros do WordPress e aprender como corrigi-los? Então, dê uma olhada neste post em que listamos e explicamos os 20 erros mais comuns que você vai encontrar.