Como personalizar a página de erro 404 do seu blog WordPress

Personalizar a página de erro 404 do seu blog WordPress é bem mais fácil do que imagina. Saiba como fazer isso.

página de erro 404

Personalizar a página de erro 404 no seu blog é uma ótima forma de melhorar a experiência do usuário e até mesmo garantir que ele reaja da maneira correta ao se deparar com a inexistência de determinado conteúdo.

Nesse artigo, mostraremos, passo a passo, como personalizar essa página de erro e quais as possíveis soluções para garantir que os visitantes não tenham sua interação interrompida com as páginas do seu blog

Antes, pedimos que todas as alterações realizadas sejam feitas de acordo com o que explicamos no conteúdo. Como, em alguns métodos, há o uso de edição de arquivos do próprio tema, pedimos que escolha a opção que achar mais confortável. Seja através de plugins específicos para a personalização das páginas, seja por configurações do tema utilizado na própria instalação do WordPress.

O que é uma página de erro 404

Uma página de erro 404 é a uma página padrão a ser exibida todas as vezes que o servidor não encontrar o conteúdo solicitado pelo usuário. Se ele, por exemplo, solicita determinada URL e ela não existe mais, o servidor insere a página de erro 404, de forma a tornar a mensagem mais “amigável” para o visitante. 

Erro tipo de erro é tão comum, que diversas empresas utilizam o erro 404 para brincar e tranquilizar o usuário, dando sugestões do que pode ser feito logo em seguida.

Dica: não ter uma página de erro 404 é considerado um erro de usabilidade, saiba mais 15 erros de usabilidade aqui (e os evite a todo custo).

Exemplos de páginas de erro 404

Textio

página de erro 404 textio

A Textio informa seus usuários de que a página não foi encontrada através de uma pequena brincadeira, afirmando:

“Você descobriu o impossível, uma criatura majestosa foi encontrada: O unicórnio das páginas perdidas. O unicórnio fala: a página que está procurando não se encontra. Talvez esteja em outro lugar ou não existe. Esse mundo é efêmero, sempre em movimento. Mas confie: nem tudo está perdido.’ Visite a página inicial e você encontrará o que deseja. O caminho mais longo é o caminho mais curto para casa”.

OKMicah

página de erro 404  OKMicah

O estúdio de design OKMicah inseriu um gif animado, com a seguinte mensagem: “Você está no lugar errado, boo! Confie no homem gostoso quando ele lhe disser não ... Gostaríamos que ele pudesse, mas ele não pode fazer aparecer a página que você está procurando.” E com isso, um botão pedindo para o usuário ir até a página inicial. 

Sketch

página de erro 404 Sketch

O Sketch simplesmente jogou um ovni 3D na tela e disse: “Essa página foi abduzida. Vamos voltar para a página inicial. A verdade está do lado de fora!”. 

Por que personalizar a página de erro 404?

Porque a página de erro 404 pode afastar imediatamente o usuário, quando deparado com ela. Logo, informar que a página não foi encontrada, de uma maneira bem humorada, ou até mesmo em linguagem mais simples, coopera para que o visitante permaneça na página e seja redirecionado para a inicial, fazendo com que a taxa de rejeição caia consideravelmente (isso, a longo prazo, pode inclusive impactar as suas vendas). 

Lembrando que, em questão de SEO, uma alta taxa de rejeição (que avalia quando o usuário entra na página e sai logo em seguida) tem impacto negativo, o que coopera para perder posições nos rankings de busca. 

Em outras palavras, uma boa página de erro 404 pode te ajudar a fugir dessa “visão negativa do Google” devido a uma taxa de rejeição elevada e ainda coopera para sua estratégia de marketing.

É importante frisar que taxa de rejeição é uma das métricas para blog que já destacamos serem essenciais para análise do desempenho do seu conteúdo.

O que escrever na página de erro 404?

De forma geral, deve ser avisado que a página que a persona está tentando acessar não existe e que, por isso, esse erro está sendo mostrado. Além do mais, é interessante levá-lo até a página inicial ou sugerir uma caixa de busca, para que o visitante possa, por conta própria, buscar o que deseja. 

Sobre a linguagem utilizada, isso depende exclusivamente de como o seu blog se comunica. Se for um blog sério, uma mensagem direta é a ideal. Se for um blog mais bem humorado, utilizar um gif animado ou outros recursos visuais tende a cair bem. Independente da escolha, ter uma página customizada mostra um blog com muito profissionalismo.

Como personalizar a página de erro 404?

Existem dois métodos diferentes para se fazer isso. O primeiro é mais simples, ideal para usuários iniciantes e que não entendem de desenvolvimento de temas WordPress. O segundo é o padrão, recomendado pelo CMS, mas que envolve conhecimento em programação, principalmente HTML, CSS, Javascript e PHP.

Plugins para personalizar a página de erro 404 

Existem diversos plugins que te ajudam a personalizar a página de erro 404, citamos os mais recomendados abaixo. Como eles possuem funcionalidades parecidas, opte pelo de sua preferência.

1. Smart Custom 404 error page [404page]

Com mais de 100 mil instalações, esse é o plugin mais usado para criar uma página de erro 404 personalizada no WordPress. Com ele, é possível criar sua página de erro indo em “Aparência -> Página de Erro 404” através do próprio painel WordPress e indicar a página desejada para esse objetivo.

Diferentes de outros plugins do mesmo nicho, o Smart Custom 404 não gera redirecionamentos. Isso é essencial à vista da otimização, porque o código 404 deve ser feito sem solicitações adicionais ao servidor.

O único requisito para que o Smart Custom funcione corretamente é que as configurações de permalinks estejam em qualquer outro item além de “simples”.

2. Colorlib 404 Customizer

O Colorlib 404 Customizer é um plugin, 100% gratuito, que permite criar uma página 404 personalizada rapidamente através do Live Customizer. A grande vantagem está na integração padrão com o design do seu tema, te poupando tempo de edição, ao mesmo tempo que oferece ferramentas adicionais para design.

Além das configurações padrão, é possível adicionar CSS personalizado para deixar a página da exata maneira que preferir. Sem falar que o plugin funciona para todos os temas WordPress, possui suporte a botão de mídias sociais e vem com 20 modelos inclusos que podem ser alterados.

3. Custom 404 Pro

O plugin mais simples dessa lista, o Custom 404 Pro permite que a página 404 padrão do seu tema seja substituída por uma criada no painel do WordPress. Ele também possibilita redirecionar para uma URL de fora do seu blog (embora isso não seja recomendado). 

Qual plugin utilizar para personalizar a página de erro 404?

Utilizaremos o Smart Custom 404 error page, o primeiro da nossa lista. Mas sinta-se à vontade para escolher o melhor, de acordo com a sua necessidade. 

O passo a passo para personalizar a página com erro 404 (com plugin)

Na tela inicial do plugin, temos 3 abas: General (geral), Advanced (avançado) e Explainer videos (videos de explicação).

Na primeira aba, a General, precisamos definir a página 404. Como ela não existe ainda, precisará ser criada.

custom 404 page plugin do WordPress

Para criar uma nova página, vá em Páginas -> Adicionar nova e insira o título e o conteúdo da sua página 404.

Optamos por um gif de um buraco negro e a mensagem: “Infelizmente um buraco negro sugou a página que você estava procurando :(. Desculpe o inconveniente. Volte para a página inicial.“

página de erro 404 personalizada

Voltando para a tela do plugin, selecione a página 404 formada e clique em salvar alterações.

plugin de customização 404

Na aba “Advanced” existem alguns itens que merecem sua atenção. Os traduziremos abaixo, para te ajudar na configuração do plugin (embora o recomendado seja deixar a segunda opção marcada e talvez a primeira).

aba avançado do plugin de personalização da página 404
  • Esconder a página selecionada da lista de páginas: para administradores a página estará sempre visível. (aconselhamos ativar, se quiser impedir a edição de outros usuários).
  • Envie uma mensagem de erro 404 se a página for acessada diretamente por sua URL: desmarque essa opção se desejar que a página selecionada seja acessível.
  • Forçar erro 404 após carregar a página: Geralmente isso não é necessário. Não é recomendado ativar esta opção, a menos que seja necessário. Por favor, note que isso pode causar problemas com o seu tema.
  • Desativar suposição de autocorreção de URL: Isso impede o WordPress de adivinhar a autocorreção de URL. Só ative se tiver certeza das consequências.
  • Envie um erro HTTP 410 em vez de HTTP 404 caso o objeto solicitado esteja na lixeira: Marque esta opção se desejar informar aos mecanismos de pesquisa que o recurso solicitado não está mais disponível e não estará disponível novamente para que possa ser removido do índice de pesquisa imediatamente.
  • Sempre envie um erro HTTP 410 em vez de HTTP 404: Marque isso se você sempre deseja enviar um erro HTTP 410 em vez de um erro HTTP 404.
  • Ative o modo de compatibilidade: Se você estiver usando um tema ou plug-in que modifica o sistema de modelos do WordPress, o plug-in pode não funcionar corretamente. O modo de compatibilidade pode resolver o problema. Ative o Modo de compatibilidade somente se tiver algum problema.

Com isso, sua página 404 já estará em pleno funcionamento. Nossa sugestão é que digite um endereço aleatório dentro do seu próprio blog, para ver se a página é mostrada. Por exemplo: seudominio.com.br/asdaopsdka

Passo a passo para personalizar a página 404 (com edição de arquivos do WordPress)

O WordPress possui uma estrutura de arquivos muito precisa. Cada arquivo possui uma função específica. Logo, para a página 404, dentro da pasta do seu tema, é possível criar ou editar um arquivo chamado 404.php

Se entende de PHP, HTML e CSS, pode muito bem alterar essa página e torná-la personalizada por completo, de acordo com a sua necessidade. Para mais informações sobre como criar essa página, verifique o Codex WordPress correspondente.

O próprio CMS mostra como exemplo a página 404 do tema padrão Twenty Thirteen.

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<header class="page-header">
				<h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1>
			</header>

			<div class="page-wrapper">
				<div class="page-content">
					<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2>
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>

					<?php get_search_form(); ?>
				</div><!-- .page-content -->
			</div><!-- .page-wrapper -->

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Mas caso não tenha tanto costume com esses arquivos, sugerimos esse modelo mais simples:

<div id=”erro”>
	<container>
		<h1>Página não encontrada. Erro 404</h1>
		<img src="#"> <!-- imagem de erro -->
		<p>Infelizmente a página que você está procurando não existe ou foi removida. Por favor, <a href="#">Volte à página inicial</a>.</p>
</container>
</div>

Sinta-se livre para alterar as informações da forma que achar necessário.

Conclusão

No artigo de hoje mostramos como alterar a página de erro 404 do seu blog WordPress. Vimos também que ter uma página amigável e clara é essencial para que a experiência do usuário não seja negativa.

Foram mostrados exemplos de páginas, normalmente com uma linguagem mais “de brincadeira” e demos sugestões de como a página pode ser feita dentro do painel do WordPress ou por meio da edição de conteúdo. 

Nos diga nos comentários se deu tudo certo na personalização da sua página de erro 404. Gostaríamos de ver o resultado final, para termos certeza de que nosso conteúdo foi realmente útil e esclarecedor. 

Obrigado por ter lido até aqui. Um forte abraço e até o próximo artigo.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *