Hoje os motores de pesquisa já conseguem executar JavaScript e indexar o conteúdo renderizado. Mas muitos sites ainda têm problemas de JavaScript que prejudicam o SEO. O conteúdo que depende de JavaScript para carregar pode não ser indexado. As imagens com carregamento diferido podem não ser descobertas. A renderização no lado do cliente pode ser demasiado lenta. Os motores de pesquisa podem não esperar que tudo carregue. Uma boa otimização de JavaScript garante que os motores de pesquisa veem todo o teu conteúdo, o compreendem e o conseguem rastrear com eficiência.
Como os motores de pesquisa lidam com JavaScript
A Google rastreia as páginas como um navegador. Executa o JavaScript, renderiza o conteúdo e indexa o que vê. Isto é uma boa notícia. As aplicações JavaScript complexas podem ser indexadas.
A Google processa as páginas em duas ondas. Na primeira onda, rastreia o HTML para ver a estrutura básica da página. Na segunda onda, renderiza o JavaScript para ver o conteúdo dinâmico. Este processo em duas ondas leva tempo e recursos.
Em páginas com JavaScript complexo ou renderização pesada, a Google pode não esperar que tudo carregue. Pode indexar apenas o que está visível depois de alguns segundos de renderização. O conteúdo que carrega devagar ou com carregamento diferido pode não ser indexado.
Problemas comuns de JavaScript e SEO
A renderização no lado do cliente atrasa a visibilidade do conteúdo. Uma página HTML em branco carrega JavaScript que renderiza o conteúdo. A Google vê primeiro a página em branco. Se a renderização demorar demasiado, a Google pode indexar a versão em branco.
As imagens e o conteúdo com carregamento diferido só carregam quando os utilizadores fazem scroll. A Google nem sempre faz scroll. O conteúdo com carregamento diferido abaixo da dobra pode não ser descoberto nem indexado.
Os erros de JavaScript quebram a renderização. Se o JavaScript tem erros, a página pode não renderizar corretamente. Os motores de pesquisa veem conteúdo partido e incompleto.
Os URLs gerados dinamicamente com parâmetros (page?id=123&sessionid=abc) criam conteúdo duplicado. Cada parâmetro único cria um novo URL. Os motores de pesquisa podem ver milhares de duplicados do mesmo conteúdo.
As etiquetas meta geradas por JavaScript podem não ser vistas por todos os rastreadores. As etiquetas Open Graph, os Twitter cards e outras etiquetas meta adicionadas via JavaScript podem não ser lidas corretamente pelos rastreadores das redes sociais.
Renderização no servidor vs. renderização no cliente
A renderização no servidor gera o HTML no servidor e envia-o ao navegador. O HTML já contém todo o conteúdo. Os navegadores mostram-no de imediato. Os motores de pesquisa veem todo o conteúdo logo.
A renderização no cliente envia HTML mínimo e JavaScript que constrói a página no navegador. O conteúdo é gerado no navegador depois de o JavaScript ser executado. Demora mais e os motores de pesquisa podem não ver tudo.
Para o SEO, é melhor a renderização no servidor ou a geração estática. O HTML é enviado completo ao navegador (e aos motores de pesquisa). O conteúdo fica visível de imediato.
Testar a renderização de JavaScript
Usa a ferramenta de inspeção de URL do Google Search Console. Introduz uma página com muito JavaScript. A Google mostra o que encontrou depois da renderização. Podes comparar a página tal como foi rastreada (o que a Google vê) com o que vês no teu navegador.
Usa o Lighthouse nas Chrome DevTools. Testa o quão rastreável é a tua página e assinala problemas relacionados com JavaScript.
Vê o código-fonte da página no navegador para ver o HTML em bruto. Depois inspeciona o elemento para ver o DOM renderizado. Compara-os. Se forem muito diferentes, tens renderização no cliente que pode confundir os motores de pesquisa.
Usa um proxy de depuração de JavaScript, como uma plataforma de testes em vários navegadores. Simula o que a Google rastreia e o que é renderizado.
Boas práticas de JavaScript para SEO
Usa renderização no servidor (SSR) ou geração de sites estáticos (SSG) para o conteúdo crítico. Assim garantes que o conteúdo está no HTML enviado aos motores de pesquisa.
Pré-carrega ou carrega logo o conteúdo importante. Não dependas do carregamento diferido para o conteúdo acima da dobra. Carrega de imediato as imagens e o texto críticos.
Evita URLs gerados dinamicamente com parâmetros desnecessários. Usa URLs limpos e simples. Se tiveres mesmo de usar parâmetros, usa etiquetas canónicas para consolidar os duplicados.
Garante que as etiquetas meta estão no HTML ou são renderizadas rapidamente pelo JavaScript. Os rastreadores das redes sociais e os motores de pesquisa devem ver as etiquetas meta de imediato, não depois de uma renderização pesada.
Testa com o Google Search Console. Verifica o que a Google vê depois da renderização. Corrige quaisquer diferenças entre o que vês tu e o que vê a Google.
Minimiza o tamanho do bundle de JavaScript. Os ficheiros JavaScript grandes demoram mais a descarregar e a executar. Bundles mais pequenos renderizam mais depressa e os motores de pesquisa rastreiam mais depressa.
Frameworks e SEO
React, Vue, Angular e outras frameworks modernas usam renderização no cliente por predefinição. Isto cria desafios de SEO, porque o conteúdo tem de ser renderizado antes de os motores de pesquisa o poderem ver.
Next.js e Nuxt.js são meta-frameworks que acrescentam renderização no servidor ou geração estática ao React e ao Vue. Resolvem muitos dos problemas da renderização no cliente.
Se usas uma framework de cliente sem renderização no servidor, tens de ter cuidado redobrado com o JavaScript e o SEO. Testa bem com o Google Search Console.
Perguntas frequentes
A Google consegue indexar conteúdo com muito JavaScript?
Sim, a Google consegue executar JavaScript e indexar o conteúdo renderizado. No entanto, isso exige tempo e recursos. Um JavaScript muito pesado pode não ser totalmente indexado se a renderização demorar demasiado. Mantém o JavaScript eficiente e testa com o Google Search Console para garantires que o teu conteúdo está a ser indexado. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Devo usar renderização no servidor ou no cliente?
A renderização no servidor é melhor para o SEO. O conteúdo está no HTML enviado aos motores de pesquisa. Os motores de pesquisa veem-no de imediato, sem esperar pelo JavaScript. A renderização no cliente cria atrasos e o risco de o conteúdo não ser indexado. Usa renderização no servidor ou geração estática para o conteúdo que precisa de se posicionar nas pesquisas.
Preciso de servir HTML diferente aos motores de pesquisa?
Não. A Google prefere que sirvas o mesmo HTML a toda a gente. Não cries versões especiais para o Googlebot. Usa uma renderização no servidor adequada ou deteção de renderização. A Google vai rastrear a versão normal do utilizador e deve ver todo o conteúdo.
Como corrijo as imagens com carregamento diferido para o SEO?
Pré-carrega as imagens críticas acima da dobra. Usa o carregamento diferido nativo (loading="lazy") com alternativas adequadas para navegadores mais antigos. Usa a API Intersection Observer para carregar imagens à medida que os utilizadores fazem scroll. Testa com o Google Search Console para garantires que a Google vê as tuas imagens.
O JavaScript torna o meu site mais lento?
Sim, a execução de JavaScript demora tempo. Bundles de JavaScript grandes e processamento pesado atrasam o carregamento da página. Isto prejudica a experiência do utilizador e os Core Web Vitals. Minimiza o tamanho do bundle de JavaScript, divide o código e adia o JavaScript não crítico. Carrega só o que é necessário.
Devo usar JavaScript para gerar etiquetas meta?
Evita, se possível. As etiquetas meta devem estar no código-fonte HTML. Os rastreadores das redes sociais e alguns motores de pesquisa podem não executar JavaScript. Se tiveres mesmo de gerar etiquetas meta com JavaScript, usa renderização no servidor ou pré-renderização para garantires que estão no HTML.