A Página 404 Perfeita

Pessoal, esse post é baseado um artigo muito interessante chamado The Perfect 404, do site A List Apart. Como o nome diz, ele ensina a fazer uma página de erro 404 (ou página não encontrada) considerada perfeita, utilizando os conceitos recomendados para essa situação e um pouco de javascript. Vamos ao texto:

Oops. Alguma coisa saiu errada. Você não sabe ao certo o que – foi você? Foi o site? O que fazer agora?

Bem-vindo ao mundo da página de erro 404. Você solicitou uma página – seja digitando a URL diretamente na barra de endereço ou clicando em um link desatualizado e, de repente, se vê no meio do nada no espaço virtual. . Um site que se preocupa com a usabilidade irá te dar uma mãozinha, enquanto muitos outros irão simplesmente ignorar, confiando na habilidade do browser de explicar o que aconteceu. Podemos fazer algo melhor que isso, não podemos?

Eu não irei entrar em detalhes em como configurar o seu servidor para mostrar uma página de erro 404 customizada. Ao invés disso, vou indicar esses artigos:

• Creating a Custom 404 Error Page (artigo em inglês)
• Creating a Custom Error Messange in Apache (artigo em inglês)

Irei, no entanto, sugerir estratégias para construir uma página de erro 404 customizada que poderá ajudar a transformar uma causa perdida.

Para começar, precisamos examinar as razões mais comuns que levam as pessoas a uma página não encontrada.

• uma URL digitada errada (ou um link desatualizado nos favoritos)
• um link desatualizado nos buscadores
• um link interno quebrado em uma página que o webmaster não notou

Todas essas situações geram o mesmo resultado, mas precisam ser tratados de forma ligeiramente diferente – a mensagem de erro 404 precisa ser customizada para cada eventualidade. Existem alguns truques que se aplicam a todos os cenários, mas a minha primeira sugestão é simples…

Não aponte o dedo
Diga a ele o que saiu errado, de todas as formas, mas não reprove o usuário, mesmo que você saiba que a culpa foi dele! Os termos, “deve ter acontecido” e “possivelmente” são boas opções para se usar aqui.

Características indispensáveis para uma página de erro 404
Assim como a frase “algo saiu errado”, você deve se assegurar que a página de erro contenha os seguintes itens:

• Um link para o mapa do site (se você tiver um) e para a página principal. Essa é a maneira mais fácil dos usuários acharem uma saída.
• Uma caixa de pesquisa.Se houver alguma opção de pesquisa interna no seu site, adicione essa opção na página 404. Se essa alternativa não existir e não for raro acontecer erro 404 no seu site, talvez seja interessante você adquirir uma.
• Um layout distinto dos minimalismos. Evite colocar todas as opções padrões de navegação do seu site nessa página. Você deve focar em diminuir distrações.

Não se esqueça de eliminar os jargões. Eu digo, podemos falar sobre páginas 404 aqui, certo? Estamos em boa companhia. Porém, a Dona Doris de 60 anos que clicou em link quebrado enquanto pesquisava um site de tricô, não terá idéia do que possa ser um erro 404, assim como milhares de outros internautas. Se você quiser usar a frase “Erro 404”, faça isso com sutileza – coloque no rodapé da página, como uma indicação para aqueles que entendem essa linguagem estranha, confusa, relacionada à assuntos da web.

Agora, vejamos como fazer para a página 404 trabalhar para você, não contra você.

Sejamos inteligentes quanto a isso
Nesse ponto, eu devo mencionar que iremos precisar de uma certa quantidade de JavaScript (talvez você não consiga fazer de outra forma, vai depender de como seu servidor esteja configurado). Então, não se esqueça de usar o <noscript> para servir com uma mensagem simpática para aqueles que desabilitaram script no browser. Se você conseguir fazer a implementação no servidor, será melhor – não terá que se preocupar com acessibilidade ou problemas com o browser – então adapte o código sugerido como for apropriado.

Primeiro, você terá que declarar algumas variáveis:

var strReferrer=document.referrer.toLowerCase();
var blnSearchReferral = false;
var blnInsiteReferral = false;
var str = "";
var strSite = "";

Agora, como usaremos isso?

A URL digitada errada
Ao digitar uma URL errada (ou acessar um link quebrado de favoritos) não haverá um referrer value, ou seja, uma referência de onde está vindo o acesso. Logo, seu código para identificar esse cenário deverá ser algo como:

if (strReferrer.length==0)
{
str+='Acreditamos que você achará útil um dos links listados abaixo:</p>';
str+='<a href="/home.php"><img src="/images/home.gif" alt="Home Page" /> </a>';
str+='<a href="/site-map.php"><img src="/images/site-map.gif" alt="Site Map" /></a>';
str+='<hr />';
str+='<p><strong>Talvez não seja possível exibir a página solicitada devido à um dos seguintes motivos:</strong></p>';
str+='<ol type="a">';
str+=' <li>An <strong>Link de favoritos desatualizado</strong></li>';
str+=' <li>Um mecanismo de busca que possua uma referência<strong>desatualizada de nosso site</strong></li>';
str+=' <li>Uma <strong>URL digitada erradamente</strong></li>';
str+='</ol>';
document.write(str);
}

A página desatualizada nos buscadores
Se existir um referrer value, podemos procurar por exemplos de mecanismos de busca específicos (e você pode, obviamente, alterar isso para a forma que mais lhe agradar). Então, podemos separar os parâmetros de pesquisa, procurar por opções relevantes para uma lista de termos que você queira interceptar e sugerir uma página que considere a mais apropriada para aquela pesquisa.

if (strReferrer.length!=0)
{
if ((strReferrer.indexOf(".looksmart.co")>0)||
(strReferrer.indexOf(".ifind.freeserve")>0)||
(strReferrer.indexOf(".ask.co")>0)||
(strReferrer.indexOf("google.co")>0)||
(strReferrer.indexOf("altavista.co")>0)||
(strReferrer.indexOf("msn.co")>0)||
(strReferrer.indexOf("yahoo.co")>0))
{
blnSearchReferral=true;
//pegar o domínio do site — separar na primeira barra
var arrSite=strReferrer.split("/");
// procurar agora por parâmetros de busca
var arrParams=strReferrer.split("?");
var strSearchTerms = arrParams[1];
arrParams=strSearchTerms.split("&");

strSite=arrSite[2];
var sQryStr="";

//defina os parâmetros de busca utilizados pelos diferentes
//mecanismos
var arrQueryStrings = new Array();
arrQueryStrings[0]="q="; //google, altavista, msn
arrQueryStrings[1]="p="; //yahoo
arrQueryStrings[2]="ask="; //ask jeeves
arrQueryStrings[3]="key="; //looksmart

for (i=0;i<arrParams.length;i++)
//loop pelos parâmetros da URL da página que originou o acesso
//(referring page)
{
for (q=0;q<arrQueryStrings.length;q++)
{
sQryStr = arrQueryStrings[q];
if (arrParams[i].indexOf(sQryStr)==0)
{//nós encontramos um parâmetro de busca!
strSearchTerms = arrParams[i];
strSearchTerms = strSearchTerms.split(sQryStr);
strSearchTerms = strSearchTerms[1];
strSearchTerms = strSearchTerms.replace("+", " ");
}
}
}
//Diz ao usuário qual foi o buscador que gerou o problema e
//quais foram os termos pesquisados
document.write ("<p>Você fez uma busca no <strong><a href='" + strReferrer + "' target='_blank'>" +
strSite + "</a> </strong> por "<strong>"+strSearchTerms+
"</strong>". No entanto, sua base de dados parece estar desatualizada.</p>"+
"<h2>Nem tudo está perdido!</h2><p>Acreditamos que as páginas abaixo possam lhe ajudar:</p>");

Você pode agora adicionar algumas linhas de código para identificar palavras-chave, cujo tráfego gerado pelos mecanismos de busca você não queira perder. Por exemplo, digamos que você está tendo bons resultados para as palavras “eletrônicos” e “widgets”, mas você acabou de mover algumas páginas em seu site – não será legal perder as visitas do Google que esses termos geram para você, vai?

//Continuação do trecho anterior

if ((strSearchTerms.indexOf("widgets")>=0)||
(strSearchTerms.indexOf("electronics")>=0))
{
document.write("<a href='/cool-widgets.htm'>Nossa ótima página sobre widgets</a><br/>");
}
}
}

É claro, se você tiver uma opção de pesquisa interna, você poderá usar os parâmetros usados na URL para gerar uma pesquisa automaticamente, ao invés desse processo manual. No entanto, a opção manual talvez seja mais interessante (caso contrário, você poderá estar apenas adicionando outro click perdido para a busca que já está falhando).

O link interno quebrado
Agora nós precisamos nos preocupar em resolver o problema de página não encontrada devido à um link quebrado na página. Precisaremos adicionar mais algumas condições:

if (!blnSearchReferral)
{
strSite = strReferrer;
strSite = strSite.split("/");
strSite = strSite[2];
document.write("<p>Você foi direcionado para uma página"+
"inexistente pelo site: <strong><a href='" + strReferrer +
"'target='_blank'>" + strSite + "</a></strong>"+
"<br />Sugerimos experimentar um dos links abaixo:</p>");
}

E se o seu próprio site for o problema?
Você não deve dizer na sua página de erro 404 “Esse site tem um link interno quebrado” quando o link defeituoso for do seu  próprio site. Nesse caso, você precisará mudar a linguagem para admitir alguma culpa!

blnInsiteReferral =((strReferrer.indexOf("http://www.mysite.co.uk") >= 0 ) ||
(strReferrer.indexOf("http://www.myothersite.com") >= 0));

if (blnInsiteReferral)
{
document.write("<p>Esse problema é culpa nossa! Por favor,"+
"aceite nossas desculpas — o desenvolvedor responsável por esse"+
"link quebrado receberá 20 chicotadas como punição"+
"(mas somente depois dele ou dela ter resolvido esse"+
"problema).</p>");
}

Resolvendo o problema
Assim, nós terminamos de mostrar saídas para contornar o erro 404. Mas, será que nós resolvemos alguma coisa? Não. No entanto, temos algumas opções, pois sabemos a página solicitada e o referral value (quando esse existir). Nós poderíamos salvar essas informações em um banco de dados, seja de forma automática ou manual, através de um botão “informar link quebrado” oferecido ao usuário quando eles forem redirecionados para uma página de erro 404. Optando pela segunda solução, é provável que você só venha a ter conhecimento sobre os links quebrados mais importantes (leia-se mais acessados). Como você vai resolver esse problema daqui pra frente é com você.

Exemplos
Para observar as dicas mencionadas em ação, experimente os exemplos citados abaixo:

• uma URL digitada errada (ou uma página nos favoritos desatualizada)
• simulando uma busca no Google (necessário clicar no link “Do a Pretend search” da página intermediária)

Faça o download do exemplo de página de erro 404 descrita acima (e altere-o para atender às suas próprias necessidades).

E você, o que achou das dicas? Gostaria de acrescentar alguma idéia?

Se você gostou do nosso blog, assine o RSS ou então receba os posts por e-mail.