Criar página 404 com WordPress e Visual Composer

Nikola Puciriusa Última atualização 02.09.2021
6 min.
Última atualização 02.09.2021

Pode sempre acontecer que o teu site esteja em manutenção, páginas individuais não estejam acessíveis ou contenham links com erros, o que muitas vezes leva a uma página 404. Isto não é agradável, mas com páginas de erro bem concebidas consegues ainda segurar os teus e tuas visitantes. Mostramos-te como fazer isto com WordPress e Visual Composer .

O objetivo de uma página de erro 404 é informares os/as visitantes sobre um erro que ocorreu redirecioná-los para as partes do teu site que ainda existem ou funcionam. Desta forma, baixa-se o bounce rate (ou taxa de rejeição).

Uma página 404 personalizada é também ideal para promover e inserir elementos de call to action. Isto significa que ela pode basicamente desempenhar as mesmas funções que uma página de destino funcional e landingpage.

Sabias que...?

O inventor da World Wide Web Tim Berners-Lee tinha um escritório na sala 404 da CERN (Organização Europeia para a Investigação Nuclear), onde albergou o primeiro servidor Web. Foi batizado de erro 404, porque muitas vezes não era possível encontrar o Tim.

Vamos analisar os seguintes pontos:

  • O que é uma página de erro 404?
  • Variantes de erro 404
  • Quando ocorrem erros 404 
  • Como corrigir erros 404
  • Exemplos bons e criativos para páginas 404
  • Criar página de erro personalizada 404 com WordPress
  • Criar página de erro 404 com Visual Composer

O que é uma página 404?

Descrito sucintamente o erro 404 é um código de resposta de HTTP (Hypertext Transfer Protocol). Isto significa que o servidor não consegue encontrar a fonte solicitada. Ou a parte do caminho do site que vem depois do "/". Basicamente, isto significa que a página específica a ser exibida não está disponível.

A maior parte das vezes, é exibida uma mensagem de erro 404, como se segue:

  • HTTP 404
  • 404 Not Found / não encontrado
  • 404
  • 404 Error / Erro
  • 404 This page does not exist (Esta página não existe)
  • Page Not Found
  • File Not Found
  • Directory Not Found 
  • Requested URL Not Found
  • ... e variações semelhantes

Possíveis razões para a ocorrência de erros 404:

  • Uma página WordPress ou um artigo é apagado ou movido para outra página sem redirecionar os links
  • Um/a visitante introduz o nome de domínio incorretamente (falta uma letra, erro ortográfico, etc.)
  • Links antigos (que mudaram) ainda estão listados em fontes externas
  • O servidor/site falhou, está a sofrer manutenção ou tem problemas técnicos que fazem com que o site não seja exibido corretamente (por exemplo, ligação interrompida).

Para além de erros 404, existem os seguintes códigos de estado HTTP:

  • Resposta 100-199: Solicitar ao destinatário e continuar o processamento
  • Bem sucedido 200-299: Pedido bem sucedido e aceite
  • Redireccionamento 300-399: Requer ação adicional para completar o pedido.
  • Erro do cliente 400-499: Pedido inválido ou pedido não pode ser completado.
  • Erro do servidor 500-599: O servidor não pôde aceitar o pedido

Como corrigir erros 404

Por um lado, através de redirecionamentos, encaminhas os teus e tuas visitantes diretamente para páginas alvo que correspondem o mais possível ao conteúdo do pedido original. Na RAIDBOXES não é necessário um plugin WordPress adicional para se definir redirecionamentos e regras de redirecionamento. Vê as instruções sobre o tema redirecionamentos 301 e 302.

Outra possibilidade é encontrar e reparar links defeituosos - ou seja, substituí-los pela fonte interna recentemente válida. Certifica-te de que todos links internos conduzem às páginas desejadas. Pedir também aos proprietários e proprietárias de fontes de links externos que alterem todos os links defeituosos.

Outra dica é utilizar URLs e permalinks de fácil utilização - mantê-los curtos, utilizar letras minúsculas e descrever para onde os links levam. Isto ajudar-te á a manter o registo de quaisquer links defeituosos e a otimizar o teu site para motores de busca. Vê o artigo Links internos e SEO com WordPress .

Finalmente, deves criar uma página personalizada 404. Isto levará os/as visitantes "perdidos/as" de volta à página inicial ou a conteúdos relevantes. Ao mesmo tempo, não confundirão o erro com uma falha de todo o teu site.

Páginas 404 e SEO

A maioria dos erros 404 geralmente não têm impacto negativo direto no desempenho ou na classificação do site. No pior dos casos, não contêm redirecionamentos. Então, os/as utilizadores/as têm 88 por cento mais probabilidades de abandonar completamente o site e não regressar - um fator SEO indireto. Uma boa página 404 é mais sobre como criar uma melhor experiência para o teu grupo-alvo.

O que faz com que páginas 404 sejam eficazes

Por isso é importante ter uma página de erro 404 personalizada que leve os teus e tuas visitantes de volta às partes existentes do site. Agora vejamos que opções tens. As abordagens comuns e recomendadas para a criação de páginas 404 personalizadas são:

  • Botões "voltar" ou botões "casa": Dá ao teu grupo-alvo a opção de regressar às páginas disponíveis ou a qualquer local.
  • Barra de pesquisa: Normalmente, estes tipos de erros ocorrem quando os/as utilizadores/as tentam encontrar um conteúdo ou página específica. Portanto, oferece-lhes uma opção de pesquisa ou sugere páginas de destino específicas.
  • Formulários de contacto: As pessoas podem usar um formulário de contacto ou chat ao vivo para obter ajuda se não conseguirem encontrar o conteúdo que procuram ou se precisarem de ajuda com outras coisas no teu site.
  • Ícones das redes sociais: É sempre bom ligar diferentes plataformas de redes sociais onde o teu conteúdo pode ser encontrado e alcançado.
  • Imagens humorísticas: Esta é uma das práticas mais subestimadas que é claramente subutilizada. Certamente que o humor pode desativar o resultado da percepção (provavelmente) negativa. Vou já dar alguns exemplos disto.

Criar página 404 personalizada com WordPress

Tens as seguintes opções para criar uma página 404. Com WordPress, com um construtor de sites ou de páginas e com código personalizado - tal como HTML. É assim que funciona com WordPress:

  1. Vai ao teu painel de controle WordPress
  2. Seleciona a área "Design" à esquerda
  3. Aí está o subitem "Editor"
  4. Verifica se o teu tema WordPress contém um "modelo 404" (Ctrl + F e depois introduz "404.php");
  5. Clica no link para o modelo 404 no lado direito

O conteúdo é algo parecido com isto:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Agora muda-o de acordo com as tuas necessidades. No entanto, precisas de ter conhecimentos de HTML para o fazer. Deverás também trabalhar com um tema filho, caso contrário as tuas alterações poderão ser novamente apagadas após uma atualização do tema WordPress.

Plugins 404 WordPress

A melhor coisa no mundo do WordPress são plugins. Há mais de 50.000 plugins gratuitos para quase todos os fins que possas imaginar: Para páginas 404, páginas 301, redirecionamentos, SEO e muito mais. Vê o directóri oficial de plugins do WordPress.

Criar página 404 com Visual Composer

Uma das formas mais fáceis e rápidas de criar uma página 404 é com um site ou construtor de páginas. Neste exemplo, mostramos-te como criares uma página personalizada 404 com Visual Composer, usando o arrastar e largar. Nota que isto só é possível com a versão premium.

Primeiro precisas de descarregar e instalar o plugin Visual Composer. Vê este tutorial em vídeo no YouTube:

YouTube

Ao carregar o vídeo, você aceita a política de privacidade do YouTube.
Saiba mais

Carregar o vídeo

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Assim que o plugin tenha sido instalado e ativado, podes começar a trabalhar. Utiliza um dos muitos modelos. Para o fazeres, clica no símbolo do mercado no editor de frontend. Seleciona lá modelos e introduz "404" para encontrares páginas 404 prontas.

Este tutorial explica exatamente como criares uma página personalizada 404 com Visual Composer:

YouTube

Ao carregar o vídeo, você aceita a política de privacidade do YouTube.
Saiba mais

Carregar o vídeo

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Depois de teres terminado e guardado os teus designs individuais de páginas 404, podes agora geri-los no editor. O vídeo seguinte mostra como fazeres isto:

YouTube

Ao carregar o vídeo, você aceita a política de privacidade do YouTube.
Saiba mais

Carregar o vídeo

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Para mais dicas sobre como criares uma página personalizada 404, as melhores soluções de pugins e alguma inspiração para páginas 404, consulta o artigo do Visual Composer Páginas 404 com WordPress.

Exemplos de boas páginas 404

Recolhemos algumas das páginas de erro 404 mais criativas - independentes de WordPress e Visual Composer - para que te possas inspirar. A página 404 do GOG.com é um dos melhores exemplos de como pensar fora da caixa. E isso no sentido mais verdadeiro da palavra:

404 Page Sample GOG
A página 404 de GOG.com (Bild © gog.com)

Uma vez que esta é uma página com valor de entretenimento, a Blizzard teve de satisfazer um elevado padrão em termos da sua página 404. O design fixe torna-se um clássico por si só:

404 Page Sample Blizzard
A Blizzard envia os seus ajudantes (Imagem © Blizzard)

O último exemplo de páginas 404 de Slack é super simples, mas ainda assim surpreendente. É um belo exemplo de criatividade:

404 Page Sample Slack
Lúdico e com animação: A página de erro 404 de Slack (Image © Slack )

Conclusão sobre páginas 404 com WordPress

Agora sabes como criar uma página de erro 404 para conduzires os teus e tuas visitantes às subpáginas ativas do teu site. E como se pode transformar uma má situação em algo que minimize ou mesmo resolva o incómodo. Além disso, aprendeste também que existem formas muito simples de conceber uma página 404 - desde que haja criatividade e um pouco de habilidade gráfica.

Com um construtor de sites como ferramenta, não precisas de qualquer conhecimento de programação para transformar uma página 404 aborrecida em algo que nos ponha de bom humor. E/ou que ajude os teus e tuas visitantes na sua situação. Tens um bom exemplo de uma página de erro 404 bem sucedida? Então partilha connosco nos comentários.

As tuas perguntas sobre páginas 404

Que perguntas tens sobre páginas de erro 404 com WordPress? Aguardamos o teu comentário. Interessas-te por temas atuais sobre WordPress e WooCommerce? Então segue a RAIDBOXES no Twitter, Facebook, LinkedIn ou através da nossa newsletter.

Após a sua licenciatura - Public Relations and Advertising Management - Nikola trabalha na equipa de marketing da Visual Composer . O seu foco é a redação, as redes sociais e a análise. Ela interessa-se por psicologia e processos de tomada de decisões sobre o comportamento dos consumidores.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.