Por que e como diagnosticar problemas de SEO oriundos do JavaScript em sua loja virtual?
O JavaScript é uma parte essencial de muitos dos sites atualmente, especialmente, de lojas virtuais, por serem ambientes mais dinâmicos. De fato, por volta de 6 a cada 10 sites utilizam dessa linguagem hoje em dia.
Porém, apesar de ser tão popular, o JavaScript pode acarretar alguns desafios de SEO em seu e-commerce dependendo de como foi implementado, principalmente se o seu site utiliza de JavaScript para renderizar conteúdos ou links essenciais para seus resultados de SEO, o que consequentemente poderá significar dificuldade para os mecanismos de busca em rastrear e indexar o seu site corretamente.
A questão é que, com o uso do JavaScript, os mecanismos de busca dão passos adicionais para processar e renderizar o conteúdo disponibilizado por ele (veja a imagem abaixo). E esses passos adicionais muitas vezes trazem prejuízo no âmbito da performance em SEO.
Assim sendo, se mal aplicado em seu e-commerce, o JavaScript pode:
1) Tornar o seu site mais lento;
2) Impedir que o Google descubra e rastreie URLs do seu site;
3) Impedir que o Google veja conteúdos do seu site como textos e imagens;
4) Atrasar o processo de indexação e renderização;
5) Resultar em indexação incompleta de conteúdo;
6) Timeouts de renderização;
7) Download de arquivos incompletos ou ausentes.
Vale ressaltar que se no Google isso pode gerar problemas, muitos outros buscadores são ainda menos eficientes que o Google em renderizar JavaScript.
E sim, como muitos de vocês podem estar pensando, o Google afirma ser capaz de indexar conteúdos renderizados. O problema é que o fato deles dizerem que podem fazer isso, não quer dizer que irão fazê-lo, muito menos, do jeito que você tinha como expectativa.
Inclusive o Google reconhece que eles são seletivos ao renderizar JavaScript:
“O Googlebot e o componente Web Rendering Service (WRS) analisam e identificam continuamente recursos que não contribuem para o conteúdo essencial da página e podem não os buscar.”
Ou seja, não se atentar para isso é deixar o mecanismo de renderização do Google decidir o que é conteúdo essencial da sua página ou não. Arriscado, não acha?
Agora que já entendemos o motivo de colocarmos o JavaScript como uma preocupação em seu e-commerce, vamos falar de algumas formas de se identificar alguns dos possíveis problemas.
Ferramentas e Técnicas para auditar JavaScript para SEO
Google Search Console:
Com o Search Console você pode inspecionar sua URL, clicando em “Testar o URL Publicado”, será possível ver o resultado do “Teste em tempo real”, que lhe trará como o Google renderiza sua página. Você pode utilizar também a ferramenta de “Resultados Avançados” no caso de não ter acesso ao Search Console da página. Além disso, você também poderá clicar em “HTML” e confirmar se o que o Google está apresentando possui tudo que você gostaria que fosse visto (renderizado e indexado).
Ainda no Search Console, você também poderá utilizar os insights gerados a partir de seus relatórios. Navegue em Configurações > Rastreamento > Estatísticas de rastreamento, peça para abrir o relatório e então analise os resultados “Por Tipo de Arquivo – JavaScript”.
Extensão para o Chrome “Web Developer”:
Essa é uma das minhas extensões favoritas há anos, têm muitos recursos bons nela para se explorar. No caso específico do JavaScript, uma vez que você tenha instalado a extensão (clique aqui), vá para a página que deseja testar e clique na extensão e então na opção “Disable JavaScript”. Depois disso atualize a página e veja o que aparece nela. Caso algum conteúdo que considere essencial não esteja aparecendo (há situações em que absolutamente nada aparece), então, ligue seu sinal de alerta para possíveis problemas em SEO oriundos do JavaScript. Por exemplo, se links de navegação ou links internos não estão visíveis após desabilitar o JS, isso pode significar que o Google também não está apto para ver e rastrear essas URLs, assim como seus respectivos conteúdos.
Dica: sobre links internos (botões não contam), uma dica e recomendação do Google é utilizar o atributo <a href="link">
Extensão para o Chrome “View Rendered Source”:
Essa é outra extensão que pode ser muito útil e é bastante objetiva. Após instalá-la no Chrome (clique aqui) basta ir no site que deseja analisar e clicar no ícone da extensão. Uma nova aba será aberta que trará para você o arquivo bruto (raw) html, o código renderizado (após o JS ter sido executado no navegador) e, por fim, a diferença entre os dois resultados. Em verde estará aquilo que foi incluído e que não estava no raw, em vermelho, aquilo que estava no raw mas não foi renderizado. Assim fica fácil, não? Com isso em mãos, procure elementos que considera importante, como links internos, heading tags ou tags canônicas, título, descrição, schema markup e etc.
Diagnósticos via Screaming Frog:
Recomendado especialmente para situações em que você possui um e-commerce ou site com grande número de páginas URL, o Screaming Frog é uma das ferramentas de auditorias em SEO mais completas que conheço. Apesar de oferecer uma versão gratuita, muito boa por sinal (clique aqui), os recursos de que precisamos para análises mais avançadas a respeito de JavaScript em um website estão disponíveis apenas da versão paga.
Por exemplo, uma técnica que podemos aplicar na versão paga do Screaming Frog é simular o que um searchbot é capaz de rastrear do seu site, e assim, entender se tem alguma página faltante que gostaria que fosse indexada. Para isso, caso você tenha acesso a essa versão, siga o passo a passo de configuração abaixo:
1 – Configuration > Crawl Config;
2 – Em Resource Links, setar somente Store para todas as opções;
3 – Em Crawl Behaviour, deselecionar tudo;
4 – Em Page Links, setar apenas “Internal Hyperlinks” e “Canonicals” para rastreamento (Crawl), e selecionar tudo, exceto AMP em Store;
5 – Em XML Sitemaps, selecionar as duas opções existentes, ou seja, “Crawl Linked XML Sitemaps” e “Auto Discover XML Sitemaps via robots.txt”;]
6 – Em Spider > Rendering, execute somente texto “Text Only”;
7 – Em User-Agent, selecionar “Googlebot (Smartphone)”;
Com a configuração feita, você já pode avançar para Mode > Spider, e inserir a URL da homepage do site que quer analisar e clicar em “Start”. Uma vez que o Screaming Frog finalizar o rastreamento, vá para o menu Crawl Analysis > Start.
Através da técnica acima, basicamente o Screaming Frog apresentará as URLs que ele foi capaz de rastrear em comparação com as URLs do sitemap XML do site em analisado. Aqui, como explicado anteriormente, o objetivo é descobrir se o rastreamento não pôde enxergar alguma URL que gostaríamos que fosse indexado pelo motor de busca.
Na aba “Overview” no painel direito do Screaming Frog, navegue na seção “Sitemaps” e se atente para a linha “Orphan URLs”. Caso você visualize muitas URLs, pode ser que links internos importantes estejam sendo renderizados pelo JavaScript. Portanto, a recomendação é analisar a lista de URLs Órfãs e confirmar se, de fato, há ou não páginas que você gostaria de indexar dentre elas.
Outra análise que pode ser feita a partir do Screaming Frog é a de comparar o HTML bruto da sua loja virtual com o HTML renderizado. O objetivo aqui é verificar quais elementos estão disponíveis para os motores de busca no carregamento inicial da página versus aqueles renderizados com JavaScript.
Uma maneira de fazer isso é utilizando os relatórios de contagem de palavras HTML e o de contagem de palavras renderizadas, ambos do Screaming Frog. Essa é uma forma rápida de identificar quanto do conteúdo on-page do seu site é renderizado por JavaScript, o que te ajudará a identificar e focar seus esforços nas páginas que dependem do JavaScript.
Para isso, novamente você precisará da versão paga do Screaming Frog, e uma vez que a configuração da ferramenta esteja no default, siga o caminho Configuration > Spider > Rendering e selecione “JavaScript”. Uma sugestão é mudar o modo do Screaming Frog para lista nesse passo, visto que rastrear JavaScript pode demorar bastante, assim sendo, é mais eficiente inserir algumas URLs mais importantes para essa análise. Depois disso, você pode dar o “Start”. Após o rastreamento finalizar, clique na aba “JavaScript” onde será possível visualizar o relatório que traz a comparação da contagem de palavras do HTML e da contagem de palavras renderizadas.
Caso note que a contagem de palavras renderizadas no HTML está muito superior a contagem de palavras do HTML, esse será um bom indicativo de que é necessária uma auditoria mais cuidadosa uma vez que o JavaScript foi renderizado.
Utilize o operador do Google “site:”
Através da utilização do operador avançado do Google “site:”, é possível realizar alguns testes pontuais para verificarmos se o Google está aproveitando de todo o potencial SEO dos conteúdos disponíveis.
Para isso, basta copiar um trecho de texto renderizado em JavaScript do site e seguir esse formato:
site:www.seusite.com/pagina-url/ "Texto JS-renderizado da página".
Por exemplo, isso poderia acontecer em e-commerces que utilizam de ferramentas externas de reviews de produtos e loja, onde o conteúdo dos comentários seriam exibidos no site a partir de carregamento JavaScript.
Caso você faça o teste acima e o Google não retorne o trecho de texto JS renderizado na página, isso pode significar que nem todo conteúdo que poderia ajudar seu site em termos de SEO está indexado.
Considerações Finais
O tema de diagnóstico JavaScript para SEO é algo muito mais amplo do que isso, há muitas outras possibilidades de análises além das que coloquei aqui. Contudo, o objetivo nesse material foi dar alguns insights e formas de análise de possíveis impactos do JavaScript no SEO de sua loja virtual de forma em que não houvesse necessidade de ser um desenvolvedor para isso. De qualquer forma, aplicando alguns métodos que coloquei aqui em seu site você certamente terá mais chances de indexar todo conteúdo de valor que possui e de posicionar o seu negócio nos motores de busca em seu devido lugar.
