JavaScript SEO: certifique-se de que seu site seja indexável

O que é JavaScript SEO?

JavaScript SEO é a prática de otimizar o JavaScript em um site para maximizar a capacidade do site de classificação em mecanismos de pesquisa como o Google. Como estamos otimizando elementos na página e isso afeta diretamente as métricas técnicas de SEO, o JavaScript SEO geralmente se enquadra na categoria de SEO técnico.

JavaScript é ruim para SEO?

Existem muitos sites JavaScript por aí. E embora o JavaScript ofereça muitos benefícios, ele também pode impactar negativamente o SEO. JavaScript não é inerentemente ruim para SEO, mas quando implementado incorretamente, pode dificultar o rastreamento e indexação de páginas pelo Googlebot. Além disso, o uso excessivo de JavaScript pode aumentar o tempo de carregamento, prejudicando diretamente a capacidade de classificação e a experiência de navegação do usuário.

Nem todos os sites usam JavaScript da mesma maneira. Embora alguns sites utilizem JavaScript em seus códigos aqui e ali, outros usam JavaScript para potencializar estruturas e recursos principais.

Por exemplo, estruturas JavaScript como Angular e React podem ajudar os desenvolvedores a construir aplicações web com mais eficiência. Essas estruturas também exigem código JavaScript muito mais extenso e complexo do que um site comum.

Os sites criados usando esse modelo de shell de aplicativo, onde a interface do usuário e os módulos de dados são mantidos separados, exigem a execução de código JavaScript para exibir conteúdo crítico para visitantes e rastreadores de pesquisa. Assim, alguns sites correm mais risco de problemas de SEO relacionados a JavaScript do que outros. Sites que dependem de JavaScript para carregar conteúdo na página podem enfrentar problemas de SEO se o conteúdo for carregado corretamente para os visitantes, mas não para os rastreadores de pesquisa.

Como o Google lida com o JavaScript?

Antes de mergulhar na otimização, vamos examinar mais de perto como o Google realmente lida com o JavaScript.

O Google processa JavaScript em três fases: rastreamento, renderização e indexação. O Googlebot inicia o processo rastreando os URLs em sua fila. Ele envia uma solicitação ao servidor usando um agente de usuário móvel e extrai o HTML do site. O Google tem apenas uma quantidade finita de recursos de computação e só pode alocar alguns para rastrear qualquer site (seu orçamento de rastreamento). O Google processa primeiro os recursos HTML para economizar recursos de rastreamento e adia os recursos JavaScript da página para rastreamento posterior, colocando-os em uma fila de renderização.

A renderização permite que o Googlebot execute código JavaScript e veja o que um usuário veria se estivesse navegando no site, possibilitando que o Googlebot o indexasse corretamente. Ao lidar com sites que usam muito JavaScript – e especialmente sites que usam o modelo de shell do aplicativo para exibir informações críticas em JavaScript – o Googlebot deve primeiro executar e renderizar o código JavaScript para aprender mais sobre o conteúdo da página.

Esse processo de renderização cria um atraso quando o código JavaScript é colocado na fila do Web Rendering Services, onde aguarda processamento. Embora esse processo demorasse muito tempo, o Google afirmou recentemente que o atraso de renderização é, na verdade, de apenas 5 segundos em média, com 90% dos sites sendo processados ​​em minutos. Infelizmente, não é isso que os SEOs têm experiência. Um estudo mostrou que o Google demorou nove vezes mais para rastrear JavaScript do que HTML. Além disso, erros, tempos limite ou configurações do robots.txt ainda podem impedir que o Googlebot renderize e indexe uma página.

A necessidade de renderizar JavaScript leva o Googlebot a indexar a página em duas ondas. Depois de usar um Chromium headless para renderizar o JavaScript, o Googlebot rastreia o HTML renderizado novamente e adiciona quaisquer URLs recém-descobertos à lista para rastreamento adicional. Em seguida, ele usa o HTML renderizado para indexar o site.

Renderizando JavaScript

Não é apenas o Googlebot que precisa renderizar suas páginas. A renderização pega o código do seu site e o gera visualmente para que os visitantes possam visualizá-lo em seus navegadores. Muitos problemas de indexação relacionados ao JavaScript acontecem devido ao tipo de renderização que um site usa para exibir seu conteúdo. Existem várias opções diferentes quando se trata de renderizar suas páginas JavaScript, e algumas são melhores para bots de pesquisa do que outras.

Renderização do lado do servidor

Como o próprio nome indica, a renderização do lado do servidor (SSR) ocorre quando o processo de renderização ocorre diretamente no servidor. Após a renderização, a página HTML final é entregue ao navegador, onde os visitantes podem visualizá-la e os bots podem rastreá-la.

A renderização do lado do servidor é considerada uma boa escolha para SEO porque pode reduzir o tempo de carregamento do conteúdo e evitar mudanças de layout. A abordagem do lado do servidor também ajuda a garantir que todos os seus elementos sejam realmente renderizados e que a tecnologia do lado do cliente não os ignore.

No entanto, a renderização do lado do servidor também pode aumentar o tempo necessário para uma página aceitar entradas do usuário. É por isso que alguns sites que dependem muito de JavaScript preferem usar SSR em páginas da web que realmente importam para SEO, mas não em páginas onde uma funcionalidade sólida é crítica.

Renderização do lado do cliente

A renderização do lado do cliente (CSR) transfere a carga de trabalho de renderização do servidor para o cliente (o navegador). Em vez de receber o HTML totalmente renderizado diretamente do servidor, o usuário recebe um HTML básico junto com um arquivo JavaScript para seu próprio navegador renderizar.

Como o próprio navegador precisa lidar com a carga de renderização, a renderização no lado do cliente geralmente é mais lenta que a renderização no lado do servidor. Isso pode causar problemas óbvios de SEO, já que a velocidade da página é um dos muitos sinais técnicos de SEO que o Google usa para classificar as páginas. Além disso, velocidades de carregamento mais lentas também podem aumentar a taxa de rejeição e, embora a taxa de rejeição possa não ser um sinal em si, uma taxa alta pode ser indicativa de uma experiência de navegação ruim e de visitantes frustrados do site. Se você deseja aumentar a velocidade do site, abandonar a renderização do lado do cliente pode não ser uma má ideia.

Renderização Dinâmica

A renderização dinâmica usa a renderização do lado do cliente e do lado do servidor em momentos diferentes. As solicitações provenientes de navegadores receberão a versão da página do lado do cliente, enquanto as solicitações provenientes de bots que possam ter problemas com JavaScript receberão a versão do lado do servidor. Isso protege a funcionalidade nas páginas mais importantes, ao mesmo tempo que facilita o acesso dos rastreadores de pesquisa àquelas que requerem indexação.

Um site com muito conteúdo dinâmico que precisa ser atualizado e reindexado com frequência pode se beneficiar desse estilo de renderização mais flexível. No entanto, embora a renderização dinâmica possa parecer uma solução sólida para seus problemas de renderização, na verdade não é a que o Google sugere. Na verdade, a página central de pesquisa do Google para JavaScript alerta especificamente que a renderização dinâmica é uma “solução alternativa” e “não uma solução de longo prazo” devido a complexidades extras e requisitos de recursos. Dito isto, ainda pode ser uma solução de curto prazo quando necessário.

Renderização estática

A renderização estática, também conhecida como pré-renderização, envolve a geração do conteúdo HTML de uma página durante o processo de construção ou implantação, e não no tempo de execução. Os arquivos HTML pré-renderizados são então servidos diretamente ao navegador ou cliente mediante solicitação.

Na renderização estática, o servidor gera os arquivos HTML com todo o conteúdo e dados necessários para a página, incluindo elementos dinâmicos. Isso significa que o navegador ou cliente recebe uma página HTML totalmente renderizada sem a necessidade de processamento adicional ou execução de JavaScript.

Os arquivos HTML pré-renderizados são facilmente rastreáveis ​​por bots de mecanismos de busca, permitindo uma melhor indexação do conteúdo do site. Além disso, a renderização estática pode melhorar significativamente o tempo de carregamento da página, uma vez que o conteúdo já está presente no arquivo HTML e não requer renderização adicional no lado do cliente.

Qual tipo de renderização é melhor para SEO?

O Google recomenda usar renderização do lado do servidor, renderização estática ou combinar renderização do lado do cliente e do lado do servidor por meio de reidratação (semelhante à renderização dinâmica). O Google não proíbe a renderização do lado do cliente, mas como pode ser mais problemática, não é exatamente preferida. À medida que a quantidade de JavaScript no aplicativo ou na página aumenta, isso pode afetar negativamente a interação da página com a próxima pintura (INP, que fará parte do Core Web Vitals em março de 2024) quando renderizada no lado do cliente. Quando se trata de JavaScript do lado do cliente, o Google aconselha adotar a abordagem de “servir apenas o que você precisa, quando precisar”.

Dicas para reduzir problemas de SEO com JavaScript

Tornar o JavaScript do seu site compatível com SEO não precisa ser muito complicado, mas existem várias práticas recomendadas que você deve seguir para obter ótimos resultados. Aqui estão algumas dicas de SEO JavaScript para ajudar você e sua equipe de desenvolvimento a criar uma estratégia de JavaScript que não prejudique suas classificações.

1. Certifique-se de que o Google está indexando conteúdo JavaScript

Não confie que o Google renderizará e indexará automaticamente seu conteúdo JavaScript. Reserve algum tempo para verificar você mesmo, realizando uma pesquisa no site por uma sequência de texto específica em sua página colocada entre aspas (site: seudominio.com “texto específico”). Se a página aparecer, você pode ter certeza de que ela está indexada.

Você também pode usar várias ferramentas diferentes do Google (ferramenta de inspeção de URL, teste de compatibilidade com dispositivos móveis) e ferramentas de terceiros (Screaming Frog, JetOctopus) para se aprofundar um pouco mais e testar sua implementação de JavaScript. Confira a seção “Teste e solução de problemas” na parte inferior deste guia para saber mais sobre como usar essas ferramentas para verificar erros de indexação relacionados ao JavaScript.

Por último, não se esqueça que o robots.txt pode impedir que rastreadores de pesquisa acessem páginas específicas. Se o Google simplesmente não indexar uma página, certifique-se de que o arquivo robots.txt não a esteja proibindo. O Google não recomenda o uso do robots.txt para bloquear arquivos JavaScript, pois isso pode afetar a capacidade do Googlebot de renderizar adequadamente o conteúdo da página e indexá-la.

2. Siga as práticas recomendadas de SEO na página

Só porque você está trabalhando com JavaScript em vez de HTML não significa que o processo de SEO na página mudará. Todas as habituais otimizações técnicas e on-page (tags, títulos, atributos, etc.) continuam essenciais. Na verdade, o Google sugeriu que os desenvolvedores evitassem usar JavaScript para criar ou gerenciar tags canônicas.

3. Use links internos eficazes

Sem links internos, os bots de pesquisa não conseguirão encontrar todas as páginas da arquitetura do seu site e terão problemas para rastreá-las ou classificá-las. Para fins de SEO em JavaScript, é melhor ter links em HTML em vez de JavaScript, para que possam ser rastreados imediatamente, em vez de após a renderização.

Se você usar JavaScript para inserir links dinamicamente em seu código, certifique-se de configurá-los usando a marcação HTML adequada. Também recomendo usar a ferramenta de inspeção de URL do Google para verificar se o texto âncora está presente no HTML final renderizado. Além disso, o Google recomenda evitar links com manipuladores de eventos JavaScript ou elementos HTML como <div> ou <span>, pois eles podem causar problemas para o Googlebot e impedir que ele rastreie o link.

4. Fique longe de hashes em URLs

SPA (aplicativos de página única) podem usar URLs fragmentados para carregar visualizações diferentes. No entanto, o Google deseja que os administradores da web evitem o uso de hashes em URLs fragmentados, sugerindo que você não deve contar com eles para trabalhar com o Googlebot. Em vez disso, eles recomendam usar a API History para carregar conteúdo diferente com base no URL.

5. Use imagens de carregamento lento

O carregamento lento é a prática de atrasar o carregamento de ativos de página menos importantes ou não visíveis. É comum otimizar desempenho e UX. Mas se você não tomar cuidado com o que atrasa e como faz isso, poderá acabar tendo problemas de indexação.

O Googlebot não rola ao visualizar o conteúdo; apenas redimensiona sua janela de visualização. Isso significa que eventos de rolagem com script podem não ser acionados e o conteúdo pode não ser renderizado. O Google sugere várias maneiras diferentes de garantir que todo o conteúdo da sua página seja carregado durante o carregamento lento.

Provavelmente é melhor deixar o carregamento lento para suas imagens. O conteúdo de carregamento lento é arriscado, pois pode expirar e acabar não sendo indexado.

6. Corrigir conteúdo duplicado

O Google afirma que o conteúdo duplicado não é motivo para uma ação manual, a menos que seja de natureza maliciosa ou enganosa. Mas isso ainda pode consumir seu orçamento de rastreamento, atrasar a indexação e fazer com que suas páginas concorram entre si pela classificação. JavaScript tende a criar vários URLs para o mesmo conteúdo, então decida qual versão você deseja indexar e aplique tags canônicas e noindex ao restante.

7. Execute auditorias regulares do site

À medida que o volume e a complexidade do código JavaScript de uma página aumentam, é importante verificar se ele está sendo renderizado e indexado corretamente. Auditorias de site agendadas regularmente podem ajudá-lo a detectar qualquer coisa que você possa ter perdido durante a rodada inicial de testes de implementação, então não se esqueça de incluir o JavaScript SEO em sua lista de verificação regular de SEO.

Teste e solução de problemas

Existem várias ferramentas diferentes que você pode usar para testar se o Google está tendo dificuldades para indexar o JavaScript em seu site ou se as correções recentes de SEO do JavaScript do Google estão funcionando.

Sua primeira parada deve ser nas ferramentas da web do Google – especificamente a ferramenta de inspeção de URL e a ferramenta de teste de compatibilidade com dispositivos móveis. Essas ferramentas não são perfeitas, pois geram uma versão da sua página a partir dos recursos disponíveis em tempo real, e não a mesma versão em cache usada pelo renderizador. Mas eles ainda podem fornecer um retrato bastante preciso de como o Google está lidando com seu JavaScript.

A ferramenta de teste de compatibilidade com dispositivos móveis permite que você navegue entre o código da sua página e uma captura de tela do que o Google vê, para que você possa comparar os dois para JavaScript que pode não estar sendo executado corretamente. Você pode acessar esse recurso clicando em “Exibir página testada” após o término do teste. Clicar na guia “Mais informações” também mostra possíveis mensagens de erro originadas do console JavaScript e mais informações sobre quais recursos da página falharam ao carregar e por quê.

Da mesma forma, a ferramenta de inspeção de URL do Google fornece uma captura de tela de como o Googlebot vê suas páginas para que você possa inspecionar visualmente seus elementos. Ele também exibe o status do índice de suas páginas para que você possa identificar rapidamente se uma de suas páginas com muitos scripts não foi indexada e pode exigir atenção.

Além dessas ferramentas da web, existem várias ferramentas de terceiros que você pode usar para testes e solução de problemas. Ferramentas rastreadoras como Screaming Frog e JetOctopus podem renderizar capturas de tela JavaScript de suas páginas. No entanto, lembre-se de que essas renderizações não são necessariamente as mesmas que o Googlebot produziria, uma vez que outros rastreadores as estão gerando.

Obtenha ajuda de especialistas técnicos em SEO

JavaScript SEO tem muitas partes móveis. Com um parceiro dedicado, você não precisa resolver esses problemas técnicos de SEO sozinho. A Victorious pode ajudar você e sua equipe de desenvolvimento a garantir que seu site esteja devidamente otimizado e que seus esforços de SEO contribuam para seus objetivos de negócios. Solicite uma consulta gratuita para saber mais.