O guia definitivo para JavaScript SEO (edição 2021)

A web está em uma era dourada de desenvolvimento de front-end, e o JavaScript e o SEO técnico estão passando por um renascimento. Como especialista técnico em SEO e entusiasta de web dev em uma agência de marketing digital premiada, gostaria de compartilhar minha perspectiva sobre SEO em JavaScript moderno com base nas melhores práticas do setor e na minha própria experiência de agência. Neste artigo, você aprenderá como otimizar seu site com tecnologia JS para pesquisa em 2021.

O que é JavaScript SEO?

JavaScript SEO é a disciplina de SEO técnico que se concentra na otimização de sites criados com JavaScript para visibilidade pelos mecanismos de pesquisa. Preocupa-se principalmente com:

• Otimizando o conteúdo injetado via JavaScript para rastreamento, renderização e indexação por mecanismos de pesquisa.
• Prevenção, diagnóstico e solução de problemas de classificação para sites e SPAs (aplicativos de página única) criados em estruturas JavaScript, como React, Angular e Vue.
• Garantir que as páginas da web sejam detectáveis ​​pelos mecanismos de pesquisa por meio de práticas recomendadas de links.
• Melhorar os tempos de carregamento da página para análise de páginas e execução de código JS para uma experiência do usuário (UX) simplificada.

 JavaScript é bom ou ruim para SEO?

Depende! JavaScript é essencial para a web moderna e torna a construção de sites escalável e fácil de manter. No entanto, certas implementações de JavaScript podem ser prejudiciais à visibilidade do mecanismo de pesquisa.

Como o JavaScript afeta o SEO?

JavaScript pode afetar os seguintes elementos na página e fatores de classificação que são importantes para o SEO:

• Conteúdo renderizado
• Links
• Imagens lentas
• Tempos de carregamento da página
• Meta dados

O que são sites com tecnologia JavaScript?

Quando falamos sobre sites que são construídos em JavaScript, não estamos nos referindo simplesmente a adicionar uma camada de interatividade JS a documentos HTML (por exemplo, ao adicionar animações JS a uma página da web estática). Nesse caso, os sites com tecnologia JavaScript referem-se a quando o conteúdo principal ou principal é injetado no DOM via JavaScript.

Este modelo é chamado de shell de aplicativo e é a base para aplicativos da web progressivos (PWAs). Exploraremos isso a seguir.

Como verificar se um site foi construído com JavaScript

Você pode rapidamente verificar se um site é construído sobre um framework JavaScript usando uma ferramenta de consulta de tecnologia, como BuiltWith ou Wappalyzer . Você também pode “Inspecionar elemento” ou “Exibir código-fonte” no navegador para verificar o código JS. Frameworks JavaScript populares que você pode encontrar incluem:

• Angular do Google
• React by Facebook
• Vue por Evan You

JavaScript SEO para conteúdo principal

Aqui está um exemplo: os aplicativos da web modernos estão sendo construídos em estruturas JavaScript, como Angular, React e Vue. As estruturas JavaScript permitem que os desenvolvedores criem e escalonem rapidamente aplicativos da web interativos. Vamos dar uma olhada no modelo de projeto padrão para Angular.js, uma estrutura popular produzida pelo Google.

Quando visualizado no navegador, parece uma página da web típica. Podemos ver textos, imagens e links. No entanto, vamos mergulhar mais fundo e dar uma olhada nos bastidores do código:

Agora podemos ver que este documento HTML é quase completamente desprovido de qualquer conteúdo. Existem apenas a raiz do aplicativo e algumas tags de script no corpo da página. Isso ocorre porque o conteúdo principal deste aplicativo de página única é injetado dinamicamente no DOM via JavaScript. Em outras palavras, este aplicativo depende do JS para carregar o conteúdo principal da página!

Possíveis problemas de SEO: qualquer conteúdo principal renderizado para os usuários, mas não para os robôs do mecanismo de pesquisa, pode ser seriamente problemático! Se os mecanismos de pesquisa não conseguirem rastrear totalmente todo o seu conteúdo, o seu site poderá ser negligenciado em favor dos concorrentes. Discutiremos isso com mais detalhes posteriormente.

JavaScript SEO para links internos

Além de injetar conteúdo dinamicamente no DOM, o JavaScript também pode afetar a rastreabilidade dos links. O Google descobre novas páginas rastreando links que encontra nas páginas.

Como prática recomendada, o Google recomenda especificamente vincular páginas usando tags de âncora HTML com atributos href, bem como incluir textos âncora descritivos para os hiperlinks:

No entanto, o Google também recomenda que os desenvolvedores não confiem em outros elementos HTML – como div ou span – ou manipuladores de eventos JS para links. Eles são chamados de links “pseudo” e normalmente não serão rastreados, de acordo com as diretrizes oficiais do Google :

Apesar dessas diretrizes, um estudo independente de terceiros sugeriu que o Googlebot pode rastrear links JavaScript. No entanto, em minha experiência, descobri que é uma prática recomendada manter links como elementos HTML estáticos.

Possíveis problemas de SEO: se os mecanismos de pesquisa não conseguirem rastrear e seguir links para suas páginas principais, elas podem estar perdendo links internos valiosos que apontam para elas. Os links internos ajudam os mecanismos de pesquisa a rastrear seu site com mais eficiência e destacam as páginas mais importantes. O pior cenário é que, se seus links internos forem implementados incorretamente, o Google poderá ter dificuldade em descobrir suas novas páginas (fora do mapa do site XML).

JavaScript SEO para imagens de carregamento lento

JavaScript também pode afetar a capacidade de rastreamento de imagens de carregamento lento. Aqui está um exemplo básico. Este snippet de código é para imagens de carregamento lento no DOM via JavaScript:

O Googlebot oferece suporte ao carregamento lento, mas não “rola” como um usuário humano faria ao visitar suas páginas da web. Em vez disso, o Googlebot simplesmente redimensiona sua janela de visualização virtual para ser mais longa ao rastrear o conteúdo da web. Portanto, o ouvinte de evento “rolagem” nunca é acionado e o conteúdo nunca é renderizado pelo rastreador.

Aqui está um exemplo de código mais amigável para SEO:

Este código mostra que a API IntersectionObserver dispara um retorno de chamada quando qualquer elemento observado se torna visível. É mais flexível e robusto do que o listener de eventos em rolagem e é compatível com o Googlebot moderno. Este código funciona devido à forma como o Googlebot redimensiona sua janela de visualização para “ver” seu conteúdo (veja abaixo).

Você também pode usar o carregamento lento nativo no navegador. Isso é suportado pelo Google Chrome, mas observe que ainda é um recurso experimental. Na pior das hipóteses, ele simplesmente será ignorado pelo Googlebot e todas as imagens serão carregadas de qualquer maneira:

Possíveis problemas de SEO: Semelhante ao conteúdo principal que não está sendo carregado, é importante garantir que o Google seja capaz de “ver” todo o conteúdo de uma página, incluindo imagens. Por exemplo, em um site de comércio eletrônico com várias linhas de listagens de produtos, imagens de carregamento lento podem fornecer uma experiência de usuário mais rápida para usuários e bots!

Javascript SEO para velocidade da página

Javascript também pode afetar o tempo de carregamento da página, que é um fator oficial de classificação no índice móvel do Google. Isso significa que uma página lenta pode prejudicar as classificações na pesquisa. Como podemos ajudar os desenvolvedores a mitigar isso?

• Minificando JavaScript
• Adiando JS não crítico até depois que o conteúdo principal é renderizado no DOM
• JS crítico embutido
• Servindo JS em cargas úteis menores

Problemas potenciais de SEO: um site lento cria uma experiência do usuário ruim para todos, até mesmo para os mecanismos de pesquisa. O próprio Google adia o carregamento de JavaScript para economizar recursos, por isso é importante certificar-se de que qualquer serviço veiculado aos clientes seja codificado e entregue de maneira eficiente para ajudar a proteger as classificações.

JavaScript SEO para metadados

Além disso, é importante observar que os SPAs que utilizam um pacote de roteador como react-router ou vue-router precisam realizar algumas etapas extras para lidar com coisas como alterar metatags ao navegar entre as visualizações do roteador. Isso geralmente é tratado com um pacote Node.js como vue-meta ou react-meta-tags.

O que são visualizações do roteador? Veja como o link para diferentes “páginas” em um aplicativo de página única funciona no React em cinco etapas:

1. Quando um usuário visita um site do React, uma solicitação GET é enviada ao servidor para o arquivo ./index.html.
2. O servidor então envia a página index.html ao cliente, contendo os scripts para iniciar o React e o React Router.
3. O aplicativo da web é então carregado no lado do cliente.
4. Se um usuário clicar em um link para acessar uma nova página (/ exemplo), uma solicitação será enviada ao servidor para a nova URL.
5. O React Router intercepta a solicitação antes que ela alcance o servidor e lida com a mudança de página por conta própria. Isso é feito atualizando localmente os componentes do React renderizados e alterando a URL do lado do cliente.

Em outras palavras, quando os usuários ou bots seguem links para URLs em um site React, eles não estão recebendo vários arquivos HTML estáticos. Em vez disso, os componentes do React (como cabeçalhos, rodapés e conteúdo do corpo) hospedados no arquivo raiz ./index.html estão simplesmente sendo reorganizados para exibir conteúdo diferente. É por isso que eles são chamados de aplicativos de página única!

Possíveis problemas de SEO: Portanto, é importante usar um pacote como o React Helmet para garantir que os usuários recebam metadados exclusivos para cada página, ou “visualização”, ao navegar em SPAs. Caso contrário, os mecanismos de pesquisa podem rastrear os mesmos metadados para todas as páginas ou, pior, nenhum!

Como tudo isso afeta o SEO em geral? A seguir, precisamos aprender como o Google processa JavaScript.

Como o Google lida com JavaScript?

Para entender como o JavaScript afeta o SEO, precisamos entender o que exatamente acontece quando o GoogleBot rastreia uma página da web:

1. Rastejar
2. Render
3. Índice

Primeiro, o Googlebot rastreia os URLs em sua fila, página por página. O rastreador faz uma solicitação GET ao servidor, normalmente usando um agente de usuário móvel, e então o servidor envia o documento HTML.

Em seguida, o Google decide quais recursos são necessários para processar o conteúdo principal da página. Normalmente, isso significa que apenas o HTML estático é rastreado, e não quaisquer arquivos CSS ou JS vinculados. Porque?

De acordo com o Google Webmasters, o Googlebot descobriu aproximadamente 130 trilhões de páginas da web. Renderizar JavaScript em escala pode ser caro. O poder de computação absoluto necessário para baixar, analisar e executar JavaScript em massa é enorme.

É por isso que o Google pode adiar a renderização de JavaScript para mais tarde. Todos os recursos não executados são enfileirados para serem processados ​​pelo Google Web Rendering Services (WRS), conforme os recursos de computação se tornam disponíveis.

Por fim, o Google indexará qualquer HTML renderizado após a execução do JavaScript.

Em outras palavras, o Google rastreia e indexa conteúdo em duas ondas:

1. A primeira onda de indexação, ou o rastreamento instantâneo do HTML estático enviado pelo servidor da web
2. A segunda onda de indexação, ou o rastreamento adiado de qualquer conteúdo adicional renderizado via JavaScript

O resultado final é que o conteúdo dependente de JS para ser renderizado pode sofrer um atraso no rastreamento e indexação pelo Google. Isso costumava levar dias ou até semanas. Por exemplo, o Googlebot era historicamente executado no mecanismo de renderização do Chrome 41 desatualizado. No entanto, eles melhoraram significativamente seus rastreadores da web nos últimos anos.

O Googlebot foi atualizado recentemente para a versão estável mais recente do navegador sem cabeça Chromium em maio de 2019. Isso significa que seu rastreador da web agora é “perene” e totalmente compatível com ECMAScript 6 (ES6) e superior, ou com as versões mais recentes de JavaScript.

Então, se o Googlebot pode tecnicamente executar JavaScript agora, por que ainda estamos preocupados com problemas de indexação?

A resposta curta é rastrear orçamento. Este é o conceito de que o Google tem um limite de taxa para a frequência com que eles podem rastrear um determinado site devido aos recursos de computação limitados. Já sabemos que o Google adia o JavaScript para ser executado posteriormente para economizar orçamento de rastreamento.

Embora o atraso entre o rastreamento e a renderização tenha sido reduzido, não há garantia de que o Google realmente executará o código JavaScript que está aguardando na fila de sua fila de Web Rendering Services.

Aqui estão alguns motivos pelos quais o Google pode nunca realmente executar seu código JavaScript:

• Bloqueado em robots.txt
• Timeouts
• Erros

Portanto, o JavaScript pode causar problemas de SEO quando o conteúdo principal depende do JavaScript, mas não é processado pelo Google.

Aplicação do mundo real: JavaScript SEO para e-commerce

Os sites de comércio eletrônico são um exemplo da vida real de conteúdo dinâmico injetado via JavaScript. Por exemplo, as lojas online geralmente carregam produtos em páginas de categoria via JavaScript.

JavaScript pode permitir que sites de comércio eletrônico atualizem produtos em suas páginas de categoria dinamicamente. Isso faz sentido porque seu estoque está em um estado de fluxo constante devido às vendas. No entanto, o Google é realmente capaz de “ver” seu conteúdo se não executar seus arquivos JS?

Para sites de comércio eletrônico, que dependem de conversões online, não ter seus produtos indexados pelo Google pode ser desastroso.

Como testar e depurar problemas de SEO em JavaScript

Aqui estão as etapas que você pode seguir hoje para diagnosticar proativamente quaisquer possíveis problemas de SEO em JavaScript:

1. Visualize a página com as Ferramentas do Google para webmasters. Isso ajuda você a visualizar a página da perspectiva do Google.
2. Use o operador de pesquisa do site para verificar o índice do Google. Certifique-se de que todo o seu conteúdo JavaScript esteja sendo indexado corretamente, verificando manualmente o Google.
3. Depure usando as ferramentas de desenvolvimento integradas do Chrome. Compare e contraste o que o Google “vê” (código-fonte) com o que os usuários veem (código renderizado) e garanta que eles estejam alinhados em geral.

Existem também ferramentas e plug-ins úteis de terceiros que você pode usar. Falaremos sobre isso em breve.

Ferramentas do Google para webmasters

A melhor maneira de determinar se o Google está enfrentando dificuldades técnicas ao tentar renderizar suas páginas é testá-las usando as ferramentas do Google para webmasters, como:

• Ferramenta de inspeção de URL no Search Console
• Teste de compatibilidade com dispositivos móveis

O objetivo é simplesmente comparar e contrastar visualmente seu conteúdo visível em seu navegador e procurar quaisquer discrepâncias no que está sendo exibido nas ferramentas.

Ambas as ferramentas do Google para webmasters usam o mesmo mecanismo de renderização Chromium perene do Google. Isso significa que eles podem fornecer uma representação visual precisa do que o Googlebot realmente “vê” quando rastreia seu site.

Existem também ferramentas técnicas de SEO de terceiros, como a ferramenta de busca e renderização de Merkle . Ao contrário das ferramentas do Google, este aplicativo da web oferece aos usuários uma captura de tela em tamanho real de toda a página.

Site: Operador de pesquisa

Como alternativa, se você não tiver certeza se o conteúdo JavaScript está sendo indexado pelo Google, pode realizar uma verificação rápida usando o operador site: search no Google.

Copie e cole qualquer conteúdo que você não tem certeza de que o Google está indexando após o operador site: e seu nome de domínio e, em seguida, pressione a tecla Enter. Se você conseguir encontrar sua página nos resultados da pesquisa, não se preocupe! O Google pode rastrear, renderizar e indexar seu conteúdo perfeitamente. Caso contrário, significa que seu conteúdo JavaScript pode precisar de ajuda para ganhar visibilidade.

Veja como isso se parece no SERP do Google:

Chrome Dev Tools

Outro método que você pode usar para testar e depurar problemas de SEO do JavaScript é a funcionalidade integrada das ferramentas de desenvolvedor disponíveis no navegador Chrome.

Clique com o botão direito em qualquer lugar em uma página da web para exibir o menu de opções e clique em “Exibir código-fonte” para ver o documento HTML estático em uma nova guia.

Você também pode clicar em “Inspecionar elemento” após clicar com o botão direito para visualizar o conteúdo que está realmente carregado no DOM, incluindo JavaScript.

Compare e contraste essas duas perspectivas para ver se algum conteúdo principal é carregado apenas no DOM, mas não codificado na fonte. Existem também extensões do Chrome de terceiros que podem ajudar a fazer isso, como o plug-in Web Developer de Chris Pederick ou o plug-in View Rendered Source de Jon Hogg.

Como corrigir problemas de renderização de JavaScript

Depois de diagnosticar um problema de renderização de JavaScript, como você resolve problemas de SEO de JavaScript? A resposta é simples: Javascript universal, também conhecido como JavaScript “isomórfico”. 

O que isto significa? Universal ou Isomórfico aqui se refere a aplicativos JavaScript que podem ser executados no servidor ou no cliente.

Existem algumas implementações diferentes de JavaScript que são mais fáceis de pesquisar do que a renderização do lado do cliente, para evitar o descarregamento de JS para usuários e rastreadores:

• Renderização do lado do servidor (SSR). Isso significa que JS é executado no servidor para cada solicitação. Uma maneira de implementar o SSR é com uma biblioteca Node.js como o Puppeteer . No entanto, isso pode sobrecarregar o servidor.
• Renderização híbrida. Esta é uma combinação de renderização do lado do servidor e do lado do cliente. O conteúdo principal é renderizado no lado do servidor antes de ser enviado ao cliente. Quaisquer recursos adicionais são transferidos para o cliente.
• Renderização dinâmica. Nesta solução alternativa, o servidor detecta o agente do usuário do cliente que está fazendo a solicitação. Ele pode então enviar conteúdo JavaScript pré-renderizado para mecanismos de pesquisa, por exemplo. Qualquer outro agente de usuário precisará renderizar seu conteúdo do lado do cliente. Por exemplo, o Google Webmasters recomenda uma solução popular de código aberto chamada Renderton para implementar a renderização dinâmica.
• Regeneração estática incremental, ou atualização de conteúdo estático depois que um site já foi implantado. Isso pode ser feito com estruturas como Next.js for React ou Nuxt.js for Vue. Essas estruturas têm um processo de construção que pré-renderizará cada página de seu aplicativo JS para ativos estáticos que você pode servir a partir de algo como um balde S3. Dessa forma, seu site pode obter todos os benefícios de SEO da renderização do lado do servidor, sem o gerenciamento do servidor!

Cada uma dessas soluções ajuda a garantir que, quando os robôs do mecanismo de pesquisa fazem solicitações para rastrear documentos HTML, eles recebem as versões totalmente renderizadas das páginas da web. No entanto, alguns deles podem ser extremamente difíceis ou mesmo impossíveis de implementar depois que a infraestrutura da web já estiver construída. É por isso que é importante manter as melhores práticas de SEO em JavaScript em mente ao projetar a arquitetura de seu próximo aplicativo da web.

Observe, para sites construídos em um sistema de gerenciamento de conteúdo (CMS) que já pré-renderiza a maior parte do conteúdo, como WordPress ou Shopify, isso normalmente não é um problema.

Principais conclusões

Este guia fornece algumas práticas recomendadas gerais e percepções sobre JavaScript SEO. No entanto, JavaScript SEO é um campo de estudo complexo e cheio de nuances. Recomendamos que você leia a documentação oficial do Google e o guia de solução de problemas para obter mais informações básicas sobre JavaScript SEO. Interessado em aprender mais sobre como otimizar seu site JavaScript para pesquisa? Deixe um comentário abaixo.