Hoje em dia cada vez mais sites estão utilizando o JavaScript no processo de construção de sites. A linguagem se mostra muito versátil para o desenvolvimento web: através da utilização de frameworks e bibliotecas, como Angular, Node.js, React e VueJS, conseguimos trabalhar com facilidade conteúdos dinâmicos dentro de páginas web. Essa solução se mostra muito versátil, principalmente para sites cujas informações mudam com grande frequência.
Você deve estar se perguntando: mas como isso afeta o SEO? Afeta muito! O olhar do profissional de SEO deve ir além do conteúdo visível da página. Devemos buscar entender o que está por trás, a arquitetura do site, como ele foi estruturado e quais linguagens são utilizadas para desenvolvê-lo. A forma como o seu site foi estruturado afeta diretamente como os robôs de indexação (crawlers) dos mecanismos de busca vão interpretar o seu site e, consequentemente, na sua indexação e posicionamento dentro da busca orgânica.
Por isso, se o seu site utiliza Javascript dentro do código, é importante você estar atento em como isso pode impactar na busca orgânica. Com esses cuidados você vaigarantir que o seu site tenha a melhor performance dentro dos mecanismos de busca.
Meu site possui JavaScript? Como identificar?
Para analisar a estrutura de código do seu site, é importante entender a participação de cada uma das tecnologias que compõem a sua página. Tradicionalmente, a linguagem base de todos os sites é o HTML, que você já deve estar familiarizado, pois normalmente as tags relacionadas a SEO, como <title> e <description> são inseridas dentro do código HTML da página. Além do HTML, virtualmente todas as páginas web usam CSS, que serve para definir o estilo visual da página, como cores, fontes, bordas, entre outros.
O HTML e CSS são muito importantes para a construção do site. Porém, é o JavaScript que vai transformar a sua página estática em uma página interativa. Através deste, você pode inserir caixas de diálogo, informações dinâmicas, e diversos recursos. Para saber se o seu site contém arquivos JavaScript, basta olhar o código fonte do site. Utilizamos a tag HTML <script>, onde podemos inserir o código JavaScript direto no HTML da página, ou chamar ele através de um arquivo externo.
Como os crawlers leem sites JavaScript?
Quando pensamos em sites JavaScript, um dos grandes temores dos especialistas de SEO é como o Google e outros buscadores vão interpretar o seu site. Historicamente, os robôs tinham dificuldade em interpretar conteúdo não estático, como o JavaScript. Entretanto, o Googlebot vem evoluindo e hoje em dia já consegue renderizar uma página com JavaScript. De qualquer maneira, é importante você estar atento às documentações de cada crawler, quais tecnologias são suportadas por ele, e fazendo testes constantes. Para ficar por dentro da documentação do Googlebot, confira esse artigo do Google Developers.
Já o Bingbot, em seu guia para webmasters, fala sobre a dificuldade de seu crawler em interpretar conteúdos em Flash, JavaScript, e outras linguagens interativas. Por isso, eles recomendam que você insira uma versão que não utilize essas linguagens, para garantir a completa renderização do Bingbot e de usuários que utilizam navegadores que não suportam essas linguagens. Para informações completas sobre o Bingbot, acesse o Guia de Webmasters do Bing.
Vantagens de um site JavaScript
Falamos muito sobre o JavaScript, como avaliar o seu site com JavaScript na perspectiva de SEO, mas você sabe quais são as vantagens em utilizar essa linguagem dentro do seu site? Confira então alguns dos benefícios trazidos pelo JavaScript.
Informações dinâmicas
O JavaScript se tornou uma linguagem muito utilizada por desenvolvedores web, para inserir informações dinâmicas dentro dos sites. As páginas cada vez mais têm explorado recursos para interagir com o usuário e atualizar informações em tempo real. As aplicações dentro de sites e e-commerces são as mais diversas, como galerias de imagens, zoom interativo, menus, visualização 360º, entre outros. O seu site pode ser muito mais interessante para o usuário quando inserido elementos em JavaScript que agreguem a experiência dele dentro da página.
Facilidade para edição de informações
O JavaScript pode ser inserido dentro do código HTML com uma tag <script> que chama um arquivo externo. Dessa forma, informações que sofrem atualização constante podem estar dentro desse arquivo externo. Assim, quando você precisar editar as informações com agilidade, é só inserir elas dentro desse arquivo.
Experiência do usuário
A inserção de elementos dinâmicos e interativos nas páginas web, podem agregar significativamente para a experiência do usuário dentro do site. Quando desenvolvemos uma página com este recurso, ela tende a atrair o usuário, que deve aumentar o tempo dentro dela, inclusive interagindo com a mesma. E a experiência do usuário na página conta muito para o Google. Páginas interessantes, que os usuários ficam por um bom tempo e interagem bastante tendem a performar melhor dentro dos resultados de busca orgânica.
Dicas para otimizações de SEO em sites JavaScript
Agora que você já conhece o JavaScript e está por dentro de todas as vantagens da linguagem, vamos falar sobre otimização.
Inserção de meta tags via JavaScript
O JavaScript é uma linguagem muito versátil, utilizada para inserir diversos conteúdos dentro das páginas, incluindo meta tags em alguns sites. Por isso, é importante que você esteja atento a forma como as meta tags de SEO, como title, description, canonical, entre outras, são aplicadas ao site. Se elas forem inseridas dinamicamente via JavaScript, certifique-se de que o arquivo contendo as mesmas está respondendo rapidamente, pois essa informação precisa estar na página enquanto o crawler faz a varredura da mesma. Caso o seu arquivo esteja demorando muito, você corre o risco de ficar sem essas informações exibidas para o crawler.
Tempo de resposta dos arquivos externos
Sites Javascript são alimentados com conteúdos externos, que respondem de acordo com os acessos ao site. Por isso, é importante que esse tempo de resposta seja o menor possível, não passando dos 5 segundos. A demora da resposta destes arquivos pode gerar uma experiência ruim para o usuário, que ficará aguardando pela ação, ou simplesmente vai sair do seu site. O mesmo acontece com os robôs dos mecanismos de busca. Se as informações não forem carregadas na página, eles irão embora sem aquela informação. É importante destacar que nenhum crawler interage com a sua página. Ou seja, se a sua página depende de uma ação do usuário para revelar informações importantes, estas não serão lidas pelos robôs rastreadores dos mecanismos de busca. Isso pode comprometer a sua performance orgânica e ocasionar a perda de posições e acessos orgânicos.
Renderização
Como foi dito, é muito importante garantir que todos que acessam o seu site estão encontrando as informações completas. No entanto, no caso de aplicações NodeJS ou outras com layouts complexos que dependem de javascript, pode acontecer de alguns conteúdos não serem exibidos. Um dos métodos que são utilizados para evitar isso é a pré-renderização (prerender), que identifica o tipo de acesso ao seu site e, quando identifica que é um usuário, entrega o arquivo para renderização pelo lado do cliente (client-side rendering). Entretanto, quando for identificado que é um crawler, com o Googlebot, o site será renderizado dentro do servidor (server-side rendering) e será entregue assim ao crawler. Dessa forma, você garante que o crawler vai acessar o arquivo com todas as informações completas. Existem diversas soluções de pre-render, dependendo da tecnologia/framework que você está usando. Quem utiliza AngularJS pode usar o prerender.io. Para quem vai de React, um dos indicados é o react-snap.
Hospedagem em ambiente otimizado para JavaScript
Para que o site em JavaScript responda na velocidade desejada pelos usuários e crawlers, é importante que seu site esteja hospedado em um ambiente otimizado e com escalabilidade. Por isso, opte por hospedagens específicas para sites e aplicações em JavaScript, ou dependendo da sua necessidade, avalie migrar seu site para um servidor cloud.
Ferramentas para testes de renderização
Para você garantir que o seu site está com todos os arquivos disponíveis para os usuários e crawlers, é importante que você faça testes de renderização das principais páginas do seu site, de forma a se certificar que está tudo funcionando como deveria. Aqui trazemos algumas ferramentas que podem te auxiliar nesse processo.
GTMetrix
O GTMetrix é uma ferramenta gratuita de renderização do site, trazendo o tempo de carregamento da página e atribuindo uma nota para a mesma. De acordo com a nota, ele destaca os principais pontos de melhoria dentro do seu site, como compactação de imagens e minificação de arquivos CSS e JS. Além disso, dentro da opção Waterfall, ele ainda exibe a ordem na qual está sendo entregue as requisições, o tempo que elas levam para serem totalmente entregues, entre outras métricas. É um campo mais técnico, mas que com a ajuda de um desenvolvedor, facilmente você consegue decifrar as informações e verificar algum tipo de gargalo que pode estar acontecendo com a sua página.
Testar como o Google (Google Search Console)
Nada melhor que o próprio Google para mostrar como está sendo renderizado pelo bot deles. Por dentro do Google Search Console, antigo Google Webmasters, você encontra a ferramenta Testar como o Google, dentro da seção Rastreamento. Dentro do domínio que você deseja analisar, entre nessa seção e defina a página que você gostaria de fazer o teste. Você pode escolher entre o bot desktop e mobile, e escolher entre Buscar ou Buscar e Renderizar. Em alguns instantes, será gerado um resultado, trazendo o seu site renderizado visualmente e no código. A partir dali, você pode analisar o código e verificar se todos os elementos estão sendo captados pelo bot.
Fetch & Render As Any Bot
Essa ferramenta gratuita, desenvolvida pela Merkle SEO, nos ajuda a testar o site dentro de ambientes que podem ser definidos, como a escolha do User-agent (GoogleBot, GoogleBot Mobile, BingBot, entre outros) e o tempo que ele deve fazer a leitura da página, em segundos. O resultado vai exibir o código que foi entregue ao bot e a sua renderização visual. Assim, você pode identificar possíveis problemas e já corrigi-los.
O universo do desenvolvimento web está em constante evolução, e o SEO evolui junto. Cada dia surgem novas práticas e linguagens para a web, por isso, é importante que você acompanhe essas mudanças, pois elas vão afetar os seus resultados orgânicos. Aproveite os benefícios que o JavaScript pode agregar ao seu site e ganhe posições na busca orgânica!