Archive for setembro \15\UTC 2010

AJAX com SEO

setembro 15, 2010

AJAX não é uma técnica nova. Existe desde quando o Javascript foi inventado, porém nenhum programador web se interessou em implementá-la, talvez pela falta de necessidade na época.

Atualmente o uso da técnica AJAX é bastante utilizado para agilizar as respostas do servidor, por exemplo no serviço de e-mail do Google (Gmail), a maioria das requisições são feitas via AJAX, visando velocidade de carregamento das informações na página.

Recentemente (há 2 ou 3 semanas) percebi que o Youtube também começou a implementação de requisições AJAX em algumas páginas, utilizando o hash da URL (#) para exibir o vídeo solicitado.

Um problema que já está se tornando clássico é: como irei montar uma estrutura de links e diretórios para os motores de busca encontrarem o conteúdo do meu site feito em AJAX?

Estive pesquisando a respeito em artigos que falam da problemática, e não encontrei nenhuma implementação que contorne o problema de forma elegante. O Frank Marcel propõe no artigo Ajax e SEO criar 2 estruturas para um mesmo site, sendo uma em puro AJAX e outra em HTML acessível a buscadores. Esta solução não agrada a nenhum tipo de desenvolvedor web, visto que estamos sempre buscando alternativas para facilitar o desenvolvimento de aplicativos web.

Iniciei então o desenvolvimento de algumas técnicas que contornam este problema. Está em fase protótipo, porém já implementei em alguns sites simples de minha autoria, e estão rodando muito bem em qualquer navegador. A técnica leva em consideração o problema do Javascript não obstrutivo, que consiste em não impedir a navegação do usuário caso ocorra alguma falha de javascript ou o navegador desabilitar o javascript.

A idéia é a seguinte: os links da página que referenciam outros links do próprio site serão links híbridos, que ao ser clicado efetua uma requisição AJAX. Se por algum motivo esta requisição AJAX não puder ser executada, o link abre normalmente sem AJAX, recarregando a página inteira sem problemas. É aí que está a idéia de permitir aos buscadores e web crawlers caminharem pela estrutura de links do site, pois já que estes não executam Javascript, vão seguir os links definidos no atributo href da tag .

Detalhes técnicos:

<!-- URL original da pagina HTML -->
<a href="artigo/meu-artigo.html" target="dajax">abrir</a>

<!-- URL processada pelo PHP -->
<a href="artigo/meu-artigo-sobre-ajax.html" onclick="hashchange('artigo/meu-artigo.html');">abrir</a>

Perceba o atributo target com valor “dajax”. Isto é usado pelo PHP para reescrever este trecho de código que altera o hash da URL (pela função hashchange do javascript).

Terminarei o post amanhã, mas aí vai um exemplo de site que utilizei esta técnica, ainda em fase de testes, o site da Escola Regional de Informática de Mato Grosso