Quando Ajax atrapalha ou não SEO

Um alerta para planejadores, designers e programadores que não querem arriscar perder a audiência orgânica dos sites.

O que é Ajax? Para que serve?

Não estamos falando, desta vez, da famosa marca de produtos de limpeza. Ajax é um método de desenvolvimento em que é possível exibir novas partes do conteúdo sem recarga da página de um site.

O conceito do Ajax é bem simples: a página é carregada com um conteúdo inicial. Dentro dela há algum objeto (como um botão) ou link ou um evento (como uma rolagem de página ou passagem de certo tempo) que faz com um novo conteúdo seja requisitado no servidor, sem contudo, recarregar a página toda.

É o caso de uma página de receita culinária, em que você clica no nome de um ingrediente e aparece (numa parte da página) detalhes sobre o mesmo (fotos, calorias e valores nutricionais para a porção informada, como escolher etc.). É caso também de uma lista de produtos, em que ao clicar num item, aparecem os detalhes (na mesma página).

E ainda o clássico caso do “scroll infinito” que atualiza ou aumenta listagens conforme se rola a página ou se clica num botão “carregar mais”.

Isso proporciona uma boa experiência para o usuário, visto que ele precisar dar menos cliques e abrir uma quantidade menor de páginas para chegar ao conteúdo, considerando que uma recarga de página (ou abertura doutra página) leva tempo.

Geralmente, uma página com Ajax é atualizada, enquanto se navega, em seu miolo (o conteúdo principal), enquanto topo, rodapé e barras laterais são mantidos sem precisar recarregar.

Tecnicamente falando, um objeto na página, acionado pelo cliente (navegador) faz uma requisição ao servidor, geralmente através de um código programado em Javascript obtendo do servidor um conteúdo dinâmico (geralmente em código XML ou JSON). No servidor existe um executável que busca informações em base de dados, este executável (o próprio site ou parte dele) é codificado em PHP, ASP.Net, Java ou qualquer outra plataforma ou linguagem de desenvolvimento.

O nome Ajax é acrônimo de Asynchronous Javascript and XML, justamente por este método usar originalmente estas duas linguagens de codificação.

Qual o problema do Ajax?

Mecanismos (robôs) de busca como o Google (e também Bing, Yahoo e outros) têm certa dificuldade em reconhecer (rastrear) conteúdo em Javascript. Além disto, tais mecanismos costumam rastrear o conteúdo da página quando ela é carregada e este conteúdo está em HTML. Se um botão, uma passagem de tempo, rolagem ou outro evento vai mudar o conteúdo desta página, o robô só terá reconhecido o primeiro conteúdo, não o que foi carregado depois, por um motivo simples: o robô do Google não vai clicar num botão, simular uma rolagem ou uma passagem de tempo.

Logo, o conteúdo “escondido” por Ajax corre sério risco de não ser visto pelo Google, muito menos indexado. Por conta disto, se alguém procurar no Google por uma palavra, pode não chegar à página do seu site, mesmo que ela esteja no seu conteúdo.

Não estou dizendo que o Google não rastreia Javascript, os robôs estão se aperfeiçoando para reconhecer, cada vez mais, tal código. Nem que sempre deixará de rastrear Ajax, mas isto na prática se mostrou tão falho que o próprio Google desistiu (comento isto adiante).

Já vi caso de sites com sérios problemas de SEO (otimização para mecanismos de busca) justamente pelo uso de Ajax.

Num deles, em que tive oportunidade de auditar (depois que a empresa percebeu queda de 90% da audiência em menos de um mês, após uma migração de site sem uma tática de SEO), havia apenas uma URL de produtos. Nela apareciam os destaques, a lista de linhas, cada linha de produtos (a listagem) e cada item de produto (detalhe). Até chegar à linha a URL era mesma e dali em diante havia uma mudança de parâmetros na URL.

Num primeiro momento, o Google reconheceu (e indexou) apenas a página inicial de produtos, sem as linhas e itens. Logo, quem procurava pelos produtos no Google já não achava mais este site.

Em função do conteúdo do site antigo, que não usava Ajax, num segundo momento, o Google começou a reconhecer as internas. Isto por que foi feito um redirecionamento destes links antigos para a página de cada linha. O que causou outro problema, o usuário do Google chegou até o miolo de cada página (produto), se ver topo, rodapé e barras laterais, o que além da estética ruim, impedia o usuário de navegar pelo site.

Muitos sites têm conseguido “esconder” parte do conteúdo quando a página é exibida para o usuário, através de Javascript e CSS mas, este conteúdo pode ser exibido com clique num link em HTML, o que é reconhecido pelos robôs de busca (e não afeta as diretrizes de qualidade do próprio Google). Mas, nestes casos não há Ajax e sim carga total com exibição gradual.

O Ajax caiu no gosto (e na moda) de muitos designers, sites inteiros (como o Twitter) ou áreas inteiras (como Produtos em alguns sites) eram feitas com Ajax. Era o caso do LinkedIn que depois mudou a estrutura de suas URLs para corrigir isto.

SEO: prioridade estratégica

Vale lembrar que, atualmente, a maior parte dos visitantes da maioria dos sites chegam através da busca, especialmente do Google.

Estudo da Conversion, de 2014, aponta que 55% das visitas aos sites brasileiros têm a busca como origem, em média, sendo 23% paga e 32% orgânica. Já notei sites cuja aquisição de audiência só pela via orgânica chegava a 80%.

Isso significa que SEO (otimização para mecanismos de busca) é estratégica, dela vem a chance de conquistar ou não audiência (visitas para o site) e logo conquistar os objetivos da empresa, seja branding, relacionamento ou vendas.

Portanto, vale a pena abrir mão do Ajax e ter uma pequena perda na experiência do usuário (mais cargas de página) do que colocar em risco a captação de visitantes do Google, principal fonte de audiência.

Afinal, de que adiante usabilidade interna se os usuários não chegam ao site? Ou pior, chegam a uma página só com miolo, como citado acima e não conseguem navegar?

Quando Ajax não deve ser usado?

Pensando na audiência, nunca utilize Ajax para exibir o conteúdo principal da página. Exemplos:

• Se a página é de produtos, exibir o produto com Ajax.
• Se a página é uma listagem de produtos, continuar ou ampliar a listagem com Ajax.
• Se a página é uma listagem de postagens (exemplo: blog), continuar ou ampliar a listagem com Ajax.
• Navegação cruzada (“veja também”, “produtos relacionados”).
• Se você quiser que as pessoas achem tais informações do seu site quando pesquisarem no Google.

O risco do carregamento infinito

Uma “modinha” de Web Design que infelizmente ganhou força ultimamente é o carregamento infinito. Aconteceu principalmente por causa da timeline do Facebook, que bem sabemos, não precisa da divulgação do Google (o que não é o caso do seu site).

Você tem uma lista de itens numa página (por exemplo, os primeiros 10) e um botão “carregar mais”, que por sua vez exibe mais itens sem abrir uma nova (segunda, terceira… n-ésima) página.

Pior ainda é o carregamento infinito automático (também chamado de “infinite scrolling”) em que o recurso de “carregar mais” não ocorre no clique e sim ao rolar a página para baixo.

Qual o problema? O Google (e outros motores de busca) tende a reconhecer somente os primeiros resultados. Por exemplo, a página exibe 100 produtos, mas para o Google só existem 10. Os demais 90 serão invisíveis a quem procura algo relacionado na busca do Google.

A alternativa é dividir a listagem em páginas, cada uma com sua URL e acessível com um clique (em HTML) para que o Google as reconheça. Ou seja, a paginação clássica.

Quando Ajax pode ser usado?

Contudo, se você quiser exibir um conteúdo secundário ou personalizado, em que não há interesse em constar no Google (ou outro mecanismo de busca online), não há problema em utilizar Ajax, para uma navegação mais rápida, por exemplo:

• Zoom de imagem: há uma foto já carregada e ao clicar nela uma janela modal exibe a imagem ampliada (neste caso, não é necessário que o Google indexe a versão grande também).
• Exibição de código de barras do produto ao clicar num botão.
• Informações complementares de formulários (você está preenchendo um cadastro e uma consulta Ajax pode lhe trazer uma lista de cidades ou profissões).
• Carrinho de compras: permitir que a página exiba algumas informações dos produtos da lista de compras sem que o usuário tenha que voltar à área de produtos da loja virtual. Trata-se de uma página customizada (varia a cada uso ou sessão) em que não interessa que o usuário saia dela, nem que o Google a indexe.
• Áreas logadas (conteúdo exibido para um usuário após fazer login), o Google não indexa conteúdo que requer login.
• Navegação personalizada (por perfil demográfico, por exemplo). O Google deve ter acesso à versão generalista do conteúdo.

O que diz o Google?

Em 2009 o Google propôs uma “gambiarra”, chamada hastag #! nas URLs, usando uma diretiva chamada scape fragment.

As hastags estáticas # são originalmente âncoras do HTML, para criar para blocos de texto internos de uma página e originalmente ignoradas pelos motores de busca. Já os fragmentos #! (com este ponto de exclamação) são para exibir conteúdo dinâmico. Dificilmente o recurso de fragmentos funcionava direito em SEO, o Google chegou a indexar só a primeira carga de algumas URLs ou só o miolo de outras.

Em 2015 o Google anunciou oficialmente que desistiu de indexar Ajax, tornando obsoleta sua proposta anterior.

https://googlewebmastercentral.blogspot.com.br/2015/10/deprecating-our-ajax-crawling-scheme.html

Entendeu a referência?

Se você não entendeu o que o Deadpool faz ilustrando este artigo, explico. No filme Deadpool (Marvel / Fox, 2016) o vilão é um mutante chamado Ajax. E o anti-herói zueiro Deadpool insiste em chamar seu rival pelo nome, “você se chama Francis, esse nome Ajax você pegou de um detergente”.

E agora?

É evitar o uso de Ajax, deixando o conteúdo que você quer usar para atrair visitantes via Google em HTML, isso inclui abrir páginas internas para detalhes e usar a paginação clássica em listagens. Já no conteúdo secundário, logado, customizado e portanto, que não precisar se indexado no Google, não há restrição de SEO para o Ajax.

Outros artigos: Marketing, Digital, SEO.