Muitas pessoas têm interesse na construção de sites que se aproveitam dos princípios do AJAX, enquanto continuam a ser acessíveis aos mecanismos de busca. Essa é uma questão importante sobre a qual eu havia escrito antes um artigo (agora obsoleto), em 2010. A tática que compartilhei então foi substituída pelas novas tecnologias, por isso é hora de escrever a atualização.

Esse tópico ainda é relevante por conta de um dilema que os SEOs ainda enfrentam: sites que usam AJAX para carregar o conteúdo na página podem ser muito mais rápidos e proporcionarem uma melhor experiência de usuário. Mas esses sites podem ser difíceis (ou impossíveis) para o Google rastrear, e o uso do AJAX pode danificar o SEO do site.

A solução que eu já havia recomendado acaba com o #! simbolizando URLs e, em geral, tem sido implementada muito mal por muitos sites. Quando eu falei sobre esse tema uma conferência do Distilled, em Boston, no ano passado, eu usei como exemplo a implementação do Twitter porque é muito ruim. Desde que eu fiz esse slide, ele, na verdade, piorou.

 Por que falar sobre isso agora?

Fui levado a escrever sobre isso porque depois de algumas aparentes divergências internas no Twitter, no início de 2011 (veja esta mensagem equivocada de um engenheiro do Twitter, seguida por esta resposta sensata de outro engenheiro), eles parecem trabalhar para reverter a decisão e substituir todas as URLs horríveis. Mesmo que o Twitter não deva ser tomado como o modelo de grande implementação, é valioso para todos nós olharmos para o método que muitos sites inteligentemente (o Twitter está incluído) estão planejando usar.

Em geral, estou surpreso que não vemos essa abordagem sendo usada com mais frequência. Criar ??sites rápidos e amigáveis, que também são totalmente acessíveis por mecanismos de busca, é uma boa meta para se ter, certo?

Qual é a tecnologia?

Então, qual é a nova tecnologia que vai tornar nossa vida AJAX mais fácil? É uma função Javascript pequena e feliz que faz parte da ‘API History do HTML5’, chamada window.history.pushState().

O pushState() faz basicamente uma coisa: ele muda o caminho da URL que aparece na barra de endereços do usuário. Até agora, isso não é possível.

Antes de prosseguir, vale a pena reiterar que essa função realmente não faz mais nada; nenhuma chamada extra é feita para o servidor e a nova página não é solicitada. Além disso, essas coisas não estão disponíveis em todos os navegadores da web – apenas para navegadores modernos, com Javascript ativado, serão capazes de fazer uso dele.

Na verdade, quer uma demonstração rápida? A maioria dos leitores está usando um navegador moderno, por isso deve funcionar para quase todos. Veja a URL da página e tente clicar sobre este texto. Viu a mudança de endereço? A URL da página de novo não é um local real, mas – até onde você está se preocupando – essa é agora a página que você está olhando.

Aqui está o porquê de essa função me deixar animado:

• Você pode ter os benefícios da velocidade usando AJAX para carregar o conteúdo da página (uma vez que, para muitos sites, apenas uma fração do código entregue é realmente o conteúdo, a maioria é apenas um design e templates);
• Uma vez que a URL da página pode refletir com precisão a localização “real” dela, você não terá nenhum problema com as pessoas copiando/colando a URL na barra de endereços e links para/compartilhá-la (o link para uma página que usa fragmento # para a localização da mesma não vai passar link-juice para a página correta/conteúdo);
• Com o #!s fora do caminho, você não precisa se preocupar com “URLs escapadas” especiais para os mecanismos de busca;
• Pode ficar tranquilo sabendo que você está contribuindo com URLs de boa qualidade (como discutido no artigo mencionado anteriormente) para a web.

Os exemplos

Lancei uma página de demonstração para mostrar como realizar isso tudo na prática.

Se clicar entre as cidades na navegação superior, você verá que apenas o conteúdo principal está sendo carregado com cada clique. E isso pode ser confirmado jogando o vídeo na página do YouTube – aviso que ele não para de passar enquanto você carrega um um novo conteúdo.

Se quiser ver um monte de exemplos desse tipo, você pode dar uma olhada em blogs que estão hospedados no blogspot.com com uma das suas novas “exibições dinâmicas “. Basta adicionar “view / / barra lateral” no final da URL. Por exemplo, este blog pode ser visualizado com este tema aplicado.

Se você clicar em “posts” na coluna da esquerda, em um segundo link, verá que o conteúdo é carregado com uma velocidade muito impressionante, a URL é então atualizada usando pushState() – sem que nenhuma “page reload” tome o lugar, mas o seu browser ainda reflete a URL adequada para cada parte do conteúdo.

 O Bit Techie

Se você gosta de como tudo isso se parece, mas começou a se sentir perdido quando se trata de grande implementação de tecnologia, então sinta-se livre para compartilhar isso com os desenvolvedores ou com seus amigos entendidos de tecnologia (deixei alguns links no final deste artigo).

A importante função que estamos utilizando tem três parâmetros: window.history.pushState (dados, título, URL).

Não há por que se preocupar com os dois primeiros parâmetros. Você pode, seguramente, configurá-los como nulos. No breve exemplo que dei no início deste artigo, a função simplesmente se pareceu com isto:
window.history.pushState (”,”, ‘test / URL / que-não-muito-existe’).

Nosso fluxo de trabalho para a implementação é semelhante a isto:

• Antes de qualquer coisa, verifique se o site funciona sem JavaScript; o Google terá que conseguir seguir os seus links e ler o conteúdo;
• Você também precisa criar processos server-side para atender apenas o “conteúdo” para a páginas específicas, em vez da página HTML totalmente renderizada. Isso vai depender muito do seu servidor e do seu backend;
• Instrua o Javascript para interceptar os cliques em links internos relevantes (elementos de navegação, etc). Eu sou um grande fã jQuery, então confio na função click()  para isso;
• O Javascript olhará para os atributos do link que foi clicado (provavelmente a href) e usar qualquer JS/AJAX que você deseja para carregar o conteúdo apropriado para a página;
• Finalmente, obter todos os benefícios de SEO usando a função pushState() para atualizar a URL para que ela marque a localização real do conteúdo.

Por ter seus links internos trabalhando como “normais” e, em seguida, adicionar essa implementação AJAX/HTML5, você estará aproveitando os benefícios de uma “melhora progressiva“: usuários com navegadores atualizados obtêm uma experiência plena e rápida, mas o site ainda é acessível para os navegadores menos capazes e para as engines de busca.

Se desejar alguns códigos para implementar isso, você pode dar uma olhada na seção cabeça do demo que compartilhei acima e que contém todo o Javascript necessário para fazer isso.

O código será mais ou menos assim:

// We're using jQuery functions to make our lives loads easier
$('nav a').click(function(e) {
      url = $(this).attr("href");
 
      //This function would get content from the server and insert it into the id="content" element
      $.getJSON("content.php", {contentid : url},function (data) {
            $("#content").html(data);
      });
 
      //This is where we update the address bar with the 'url' parameter
      window.history.pushState('object', 'New Title', url);
 
      //This stops the browser from actually following the link
      e.preventDefault();
}

Ressalva importante

Embora o código acima funcione como uma prova do conceito, há algumas coisas a fazer para realizar esse trabalho tão bem quanto meu demo.

Em particular, você provavelmente vai querer o botão ‘voltar’ no navegador do usuário para trabalhar, o que esse trecho de código não vai permitir. A URL vai mudar, mas o conteúdo histórico dessas páginas ainda precisa ser carregado. Para permitir isso, você vai precisar da função popState(), o que detecta uma mudança de URL e lhe permite acionar qualquer função pegar o conteúdo da página e carregá-lo.

Novamente, você pode ver isso em ação na cabeça da página de demonstração em acima.

Recursos e leitura:

Sugiro dar uma olhada nos seguintes links para complementar sua leitura:

• Mergulhe em HTML5: Capítulo 11- Manipulando o History por diversão e profit (eu realmente recomendo este livro inteiro)
• Mozilla Developer Network: Manipulando o histórico do navegador
• E, finalmente, para a sua própria paz de espírito: Internet Explorer 10 apoiará a API History

 ***

Este artigo é uma republicação feita com permissão. SEOMoz não tem qualquer afiliação com este site. O original está em: http://www.seomoz.org/blog/create-crawlable-link-friendly-AJAX-websites-using-pushstate