Javascript: Como testar a implementação de SSR e/ou pré-renderização com Oncrawl?
Publicados: 2021-09-13Diagnosticar problemas de SEO com a implementação de JavaScript de um site nem sempre é fácil. Quando você opta pelo Server Side Rendering ou Pre-rendering para bots, a tarefa pode se tornar ainda mais complexa.
Você precisa ter certeza de que a versão veiculada aos bots do Google está completa, que todos os elementos javascript foram executados no lado do servidor e estão presentes no html rastreado pelo bot.
Neste artigo, veremos como testar de forma rápida e fácil sua renderização JS de todas as suas páginas usando o Oncrawl.
SEO e JS
Antes de começar com a prática, vamos falar rapidamente sobre o interesse em SEO de Server Side Rendering (SSR) e Pré-renderização de elementos javascript de um site.
JS e Google: boas práticas
Por padrão, a renderização HTML do javascript é feita pelo cliente, ou seja, seu navegador web. Quando você solicita uma página contendo elementos JS, é seu navegador que executa esse código javascript para exibir a página completa. Isso é chamado de renderização do lado do cliente (CSR).
Para o Google isso é um problema porque requer muito tempo e principalmente recursos. Ele o força a percorrer sua página duas vezes, uma vez para recuperar o código, depois uma segunda vez após renderizar o HTML do JS.
Como consequência direta do CSR para o seu SEO, o conteúdo completo de suas páginas não será visível imediatamente pelo Google e, portanto, pode atrasar a indexação das mesmas. Além disso, o orçamento de rastreamento concedido ao seu site também é afetado porque suas páginas precisam ser rastreadas duas vezes.
O SSR (renderização do lado do servidor)
No caso do SSR, a renderização HTML do javascript é feita no lado do servidor para todos os visitantes do site, humanos e bots. Como consequência, o Google não precisa gerenciar o conteúdo em JS, pois obtém diretamente o html completo no momento do rastreamento. Isso corrige o defeito do javascript no SEO.
Por outro lado, o custo de recursos para obter essa renderização no lado do servidor pode ser importante. É aqui que entra a terceira opção, a pré-renderização.
Pré-renderização
Nesta configuração híbrida, a execução do JS é feita no lado do cliente para todos os visitantes (CSR), exceto para os bots de busca. Um conteúdo HTML pré-renderizado é fornecido aos bots do Google para manter as vantagens de SEO do SSR, mas também as vantagens econômicas do CSR.
Essa prática que à primeira vista poderia ser considerada como cloaking (oferecer diferentes versões para bots e visitantes de uma página da web) é na verdade uma ideia do Google que é altamente recomendada. Podemos facilmente adivinhar o porquê.
Como testar a renderização do Javascript com o Oncrawl?
Existem muitas maneiras de diagnosticar erros de SEO na implementação de JS. Usando Oncrawl você poderá testar todas as suas páginas automaticamente sem ter que fazer comparações manuais.
Oncrawl é capaz de rastrear um site executando javascript no lado do cliente. A ideia é lançar dois rastreamentos e gerar uma comparação entre:
- Um rastreamento com renderização JS habilitada
- Um rastreamento com renderização JS desabilitada
Em seguida, para medir através de várias métricas as diferenças entre esses dois rastreamentos, sinaliza que parte do javascript não é executada no lado do servidor.
Observe que, no caso de pré-renderização, o segundo rastreamento deve ser feito com um user agent do Google para rastrear a versão pré-renderizada do site.
Este teste pode ser feito em três etapas:
- Crie os perfis de rastreamento
- Rastreie o site com cada perfil e gere um rastreamento sobre rastreamento
- Analise os resultados
Crie os perfis de rastreamento
O perfil com JS
Na página do seu projeto, clique em “+ Configurar novo rastreamento” .
Isso levará você à página de configurações de rastreamento. Suas configurações de rastreamento padrão são exibidas. Você pode alterá-los ou criar uma nova configuração de rastreamento.
Um perfil de rastreamento é um conjunto de configurações que foi salvo com um nome para uso futuro.
Para criar um novo perfil de rastreamento, clique no botão azul “+ Criar perfil de rastreamento” no canto superior direito.
Nomeie-o como “Rastrear com JS” e copie seu perfil de rastreamento usual (o Padrão, por exemplo).
Para ativar o JS neste novo perfil, você deve exibir os parâmetros adicionais que estão ocultos por padrão. Para acessá-los, clique no botão “Mostrar configurações extras” na parte superior da página.
Em seguida, vá para as configurações Extra e clique em “Ativar” na opção Crawl JS.
Nota: Lembre-se de adaptar sua velocidade de rastreamento à capacidade dos servidores do seu site, pois o Oncrawl fará muito mais chamadas por URL para executar os elementos em Javascript. A velocidade ideal é aquela que sua arquitetura de servidor e site pode suportar melhor. Se a velocidade de rastreamento do OnCrawl for muito rápida, seu servidor pode não conseguir acompanhar.
O perfil sem JS
Para este segundo perfil de rastreamento, siga as mesmas etapas e desmarque a caixa de habilitação de JS .
Nota: é importante ter dois perfis com escopo idêntico para que a comparação seja significativa.
Se o seu site estiver em Server Side Rendering, vá para a próxima etapa.
Se seu site estiver em pré-renderização baseada em bots do Google, você deverá nos enviar uma solicitação para modificar o User Agent para o rastreamento. Após a criação do perfil, envie-nos uma mensagem via Intercom diretamente no aplicativo para que possamos substituir o User Agent Oncrawl por um User Agent do Google bot.
Comece seu teste gratuito de 14 dias
Comece seu testeInicie seus rastreamentos e gere um rastreamento sobre rastreamento
Depois que os dois perfis forem criados, você só precisa rastrear seu site com esses dois perfis. Para facilitar, você pode usar a função de programação de rastreamento.
Agendar um rastreamento
- Na página do projeto, clique na guia “Rastreamentos agendados” na parte superior da caixa de rastreamento de rastreamento.
- Clique em “+ Agendar rastreamento” para agendar um novo rastreamento.
- Em seguida, você precisará escolher:
- O perfil de rastreamento que você deseja usar para o rastreamento futuro
- A frequência para repetir o rastreamento, escolha “Apenas uma vez”.
- A data, hora (no formato de 24 horas) e fuso horário (por cidade) de quando você deseja que o rastreamento seja iniciado.
- Clique em “agendar rastreamento” .
Assim que ambas as análises de seus rastreamentos estiverem disponíveis, você precisará gerar um rastreamento sobre rastreamento. 
Gerar um rastreamento sobre rastreamento
- Na página inicial do projeto, inicie um rastreamento sobre rastreamento:
- Em "Tarefas", clique na guia "Executando rastreamento sobre rastreamentos" .
- Clique em “+ Iniciar rastreamento sobre rastreamento” .
- Selecione os dois rastreamentos que você deseja comparar.
Quando você clica em "+ Executar rastreamento sobre rastreamento" , o Oncrawl analisa as diferenças entre os dois rastreamentos existentes e adiciona o relatório Rastreamento sobre rastreamento aos resultados da análise dos dois rastreamentos.
Você pode acompanhar o progresso desse rastreamento sobre o rastreamento na guia "Iniciar rastreamento sobre rastreamento" na página inicial do projeto. Como o rastreamento já está concluído, o over crawl pulará o estado "Rastreamento" e começará diretamente com "Análise".
Analise os resultados
Acesse o relatório de rastreamento sobre rastreamento nas três exibições a seguir:
- Estrutura
- Contente
- Vinculação interna
Você também pode baixar nosso painel personalizado.
Quais métricas observar?
Página rastreada, contagem média de palavras por página e proporção média de texto para código
O primeiro indicador Página rastreada mostra imediatamente se os dois perfis rastrearam o mesmo número de páginas.
Se a diferença não for significativa, você pode verificar dois indicadores na página:
- Contagem média de palavras por página
- Proporção média de texto para código
Essas duas métricas destacarão uma diferença no conteúdo html com ou sem execução de javascript no lado do cliente.
Se houver menos palavras por página em média, significa que parte do conteúdo da página não está disponível sem renderização JS.
Da mesma forma, se a proporção entre texto for menor, significa que parte do conteúdo da página não está disponível sem renderização JS.
A proporção de texto para código mede quanto do conteúdo de uma página é visível (texto) e quanto é conteúdo codificado (código). Quanto maior a porcentagem relatada, mais texto a página contém em comparação com a quantidade de código.
Profundidade, Inrank e Inlinks
Você pode então olhar para as métricas relacionadas à sua malha interna que são mais sensíveis. Que uma pequena parte do conteúdo da página não esteja disponível sem renderização JS não é necessariamente problemático para o seu SEO, mas se isso impactar sua malha interna, as consequências na rastreabilidade do seu site e no orçamento do rastreamento são mais importantes.
Compare a profundidade média, o Inrank médio, o número médio de Inlinks e outlinks internos.
Uma profundidade média crescente, um inrank médio decrescente e um número médio decrescente de inlinks e outlinks são indicadores da existência de blocos de malha gerenciados em JS não pré-renderizados no lado do servidor. Como resultado, alguns dos links não estão imediatamente disponíveis para o google bot.
Isso pode ter consequências em todo ou parte do seu site. É então necessário estudar essas modificações por grupo de páginas para identificar se alguns tipos de páginas são prejudicados por esta malha javascript.
O explorador de dados permitirá que você brinque com os filtros para destacar esses elementos.
Vá mais longe com o explorador de dados e os detalhes do URL
No explorador de dados
Ao examinar os dados de Rastreamento sobre Rastreamento no explorador de dados, você verá duas colunas de URLs: uma para os URLs de Rastreamento 1 e outra para os URLs de Rastreamento 2.
Você pode adicionar cada uma das métricas mencionadas acima (páginas rastreadas, contagem de palavras, proporção de texto para código, profundidade, classificação interna, links internos) duas vezes cada para exibir o valor de Rastreamento 1 e Rastreamento 2 lado a lado.
Ao utilizar os filtros poderá identificar os URLs com as maiores diferenças.
Detalhes do URL
Se você identificou diferenças entre a versão SSR e/ou pré-renderizada e a versão renderizada do lado do cliente, precisará entrar em mais detalhes para entender quais elementos JS não são otimizados para SEO.
Ao clicar em uma página no data-explorer, você alterna para os detalhes do URL e pode visualizar o código-fonte conforme visto pelo Oncraw clicando na guia “view source”.
Você pode então recuperar o código HTML clicando em Copiar fonte HTML.
No canto superior esquerdo, você pode alternar de um rastreamento para outro para recuperar a outra versão do código.
Usando uma ferramenta de comparação de código html, você pode comparar as duas versões de uma página, com JS e sem JS executado no lado do cliente. De resto, fica a seu critério!