Como construir páginas eficazes de erro 404 no WordPress

Os maiores sites lá fora são sempre notáveis ​​por sua atenção aos detalhes. Um detalhe frequentemente subestimado é a existência de uma página de erro 404 útil e fácil de usar. O WordPress fornece uma maneira fácil de criar e personalizar a página de erro 404, mas, infelizmente, a simplicidade na personalização não significa automaticamente a eficácia.

O conhecido especialista em SEO do WordPress, Joost de Valk (também conhecido como yoast), relata suas descobertas recentes de vários anos de auditorias de SEO de sites. De acordo com este relatório, um número significativo dos sites auditados teve problemas com a otimização de sua página de erro 404. O tema padrão do WordPress (atualmente TwentyTwelve) tem um modelo muito básico para este caso e não muitos proprietários de sites vão além disso.

Por que isso é importante?

Vamos ver isso do ponto de vista do senso comum. Quando ocorre um erro 404? Quando alguém clica em um link que deve apontar para o conteúdo em seu site, mas por qualquer motivo não há nenhuma página correspondente: talvez você tenha alterado um link permanente ou removido a página, talvez você tenha alterado as tags ou slugs de categoria, talvez o link tenha sido apenas errado. Existem várias razões para o erro, mas um fato importante não pode ser negado: o visitante já está no seu site, ele / ela já está interessado em algo, ele / ela já fez um esforço para encontrá-lo, então esse esforço deve ser recompensado.

Uma das regras fundamentais da interface do usuário é não deixar os usuários em becos sem saída. Há sempre um botão de voltar no navegador, mas você realmente quer que seu visitante tenha que usá-lo?

 maçã fornece um sitemap em sua página de erro 404 acompanhado de uma mensagem simples e clara.

37signals use a oportunidade extra para apresentar seus produtos e forneça informações de contato para resolver o problema.

Zurb A página de 404 erros enfatiza a opção de contatá-los com um problema. Designers devem resolver problemas, certo?

 Problogger apresenta uma ampla gama de vários conteúdos para mergulhar na leitura.

Justin Tadlock O Blog usa breadcrumbs para apresentar um link de homepage.

Criando página de erro 404 personalizada no WordPress

O que pode ser feito para melhorar esta situação? Como o erro pode se transformar em uma oportunidade?

Em busca de ideias e diretrizes, podemos consultar o WordPress Codex ou as Diretrizes para webmasters do Google como pontos de partida perfeitos. Na verdade, nossa tarefa principal é bem simples: explicar por que uma página não pode ser localizada e oferecer sugestões para chegar à tela certa. Deste ponto de vista, podemos obter uma lista de possíveis componentes que criam uma página de erro 404 “perfeita”:

• uma mensagem de erro clara de forma simples e amigável, com desculpas pelo inconveniente;
• a aparência do restante do site com opções claras de branding e navegação;
• possíveis alternativas e dicas sobre como encontrar as informações desejadas. Um formulário de pesquisa, links para conteúdo relevante e / ou popular e a página inicial são todas as soluções possíveis para esta parte;
• uma maneira de reportar um erro se o usuário quiser; você pode fornecer um e-mail de contato ou outras informações de contato.

Nessa lista, podemos determinar dicas e ideias úteis sobre o que incluir em um modelo de erro 404:

• posts recentes e / ou populares ou, alternativamente, mensagens aleatórias;
• opções de assinatura (como RSS), além de detalhes de contato;
• sitemap, especialmente no caso de sites pequenos;
• promoções ou informações sobre suas ofertas e serviços;
• materiais de branding para identificar facilmente seu site e sua indústria;
• informações sobre o URL solicitado e o conteúdo mais relevante;
• tagcloud como uma maneira rápida de colocar o visitante no contexto do seu site;
• um sistema de notificação e / ou acompanhamento para estar ciente de qualquer erro 404 em seu site.

Uma coisa importante sobre uma página de erro 404 é um status HTTP 404 adequado que deve ser atendido pelo servidor. Felizmente, o WordPress lida com isso automaticamente, para que possamos concentrar nossos esforços na criação da própria página. Precisamos do tema ativo para ter um modelo separado para a página chamada 404.php. A estrutura de esqueleto do modelo é bastante simples:

A marcação que cria a estrutura da página deve corresponder ao que é usado pelo tema ativo. Alternativamente, alguns estilos adicionais podem ser fornecidos para imitar essa estrutura. Ao incluir as chamadas padrão get_header e get_footer , garantimos que a página tenha todos os elementos de marca e opções de navegação e que todos os scripts e estilos sejam carregados corretamente.

Agora, quando fizemos as preparações iniciais, vamos preencher a página. A melhor coisa que podemos fazer pelo visitante na página 404 é adivinhar o que é realmente solicitado e fornecer a correspondência mais próxima possível. Informações sobre o URL solicitado são armazenadas pelo WordPress na propriedade $ wp-> request . Podemos analisar essa string e tentar encontrar conteúdo semelhante com base nos dados post_name , que armazenam informações sobre slugs de postagem e de página. Se tal pesquisa não retornar algo significativo, podemos tentar uma pesquisa regular através do conteúdo da postagem. Se esses esforços não produzirem nenhum resultado positivo, sempre poderemos fornecer uma lista de postagens recentes como um substituto.

Claro, também incluímos a mensagem amigável, o formulário de pesquisa e um link para a página inicial.

Primeiro vamos criar algumas funções auxiliares para lidar com algumas rotinas de template; eles poderiam ser incluídos em functions.php do seu tema ou diretamente no início do arquivo 404.php.

function frl_get_requested_slug(){global $wp;$q = $wp->request;$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);$parts = explode('/', $q);$q = end($parts);return $q;}

A função frl_get_requested_slug tenta obter o slug de página solicitado usando o objeto global $ wp e expressões regulares. O código pressupõe que o site usa permalinks e a solicitação vai no formato apropriado.

function frl_list_posts($posts){if(empty($posts))return '';$list = array();foreach($posts as $cpost) {$title = apply_filters('the_title', $cpost->post_title);$url = get_permalink($cpost);$list[] = "

frl_load_error_style carrega estilos personalizados com o modelo 404, supondo que o arquivo .css apropriado esteja localizado na pasta / css dentro do diretório do tema ativo.

O código do modelo, conforme planejado, inclui quatro partes: a mensagem amigável; a pesquisa; a lista de posts recentes; a última chance.

A mensagem amigável:

  404 Página Não Encontrada 
  Infelizmente, infelizmente não conseguimos encontrar a página solicitada. 
  Vamos encontrar a informação que você precisa. 

A busca pelo conteúdo solicitado:

  'any', 'post_status' => 'publicar', 'nome' => $ q, 'posts_per_page' => 5); $ query = new WP_Query ($ args);  // consulta postagens por slugif (vazio ($ query-> posts)) {// procura postagens $ q = str_replace ('-', '', $ q); $ args = array ('post_type' => 'qualquer ',' post_status '=>' publicar ',' s '=> $ q,' posts_per_page '=> 5); $ query-> consulta ($ args);} if (! vazio ($ consulta-> postagens)) :?> 
  Você estava procurando por uma das seguintes páginas? 
  posts); 

Em primeiro lugar, realizamos uma consulta ao WordPress com um conjunto inicial de argumentos que procura o slug solicitado em um campo de nome de postagem / página. Se não obtivermos resultados depois disso, substituiremos os traços na string solicitada por espaços e realizaremos outra consulta que pesquisará as palavras solicitadas no conteúdo das postagens / páginas. Se obtivermos algum resultado, então os publicamos com a ajuda da função frl_list_posts criada anteriormente .

Lista de posts recentes:

  'post', 'post_status' => 'publicar', 'posts_per_page' => 5); $ query-> query ($ args); if (! vazio ($ query-> posts)):?> 
  Por que não dar uma olhada nas postagens mais recentes? 
  posts); 

Nesta parte, realizamos uma consulta para as 5 postagens mais recentes no blog e as exibimos da mesma maneira que anteriormente.

A última chance:

  Nada de bom? 
  Por favor, use o formulário de pesquisa para tentar novamente ou começar a navegar a partir da página inicial   . 
  . Se você precisar de mais ajuda, por favor, não hesite em entrar em contato com [email protected] . 

Finalmente, se nenhuma das opções acima satisfizer o usuário, oferecemos um link para a página inicial e fornecemos um formulário de pesquisa.

Evitando erros 404 no seu site

Parece que fizemos o melhor possível para ajudar o visitante na página de erro 404. Na verdade, a melhor ajuda é evitar que a página 404 seja usada. Em particular, podemos:

• configurar permalinks bem estruturados desde o início do projeto, portanto, é menos provável que haja necessidade de alterá-los no futuro;
• monitorar os links de entrada incorretos, contate os proprietários dos sites onde esses links aparecem, com uma solicitação para corrigi-los;
• cuide do conteúdo antigo, não o remova até que seja absolutamente necessário e configure o redirecionamento adequado na migração da página.

Não há desculpa real porque o seu site ou blog não deve ter uma página de erro 404 útil e amigável. Espero que este guia tenha lhe dado algumas dicas úteis.

O que você tem na sua página 404? O que você acha útil quando encontra páginas 404? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem perdida via Shutterstock.