Renderização dinâmica como uma solução alternativa

A renderização dinâmica é uma alternativa provisória, não uma solução de longo prazo, para problemas com conteúdo gerado por JavaScript nos mecanismos de pesquisa. É melhor usar a renderização do lado do servidor, a renderização estática ou a hidratação para resolver isso.

Em alguns sites, o JavaScript gera conteúdo adicional quando uma página é executada no navegador. Isso é chamado de renderização do lado do cliente. Embora a Pesquisa Google execute JavaScript, há recursos do JavaScript com limitações na Pesquisa Google, e algumas páginas talvez tenham problemas com conteúdos que não aparecem no HTML renderizado. Outros mecanismos de pesquisa podem ignorar o JavaScript e não ver conteúdo gerado por ele.

A renderização dinâmica é uma alternativa provisória para sites em que o conteúdo gerado por JavaScript não está disponível para os mecanismos de pesquisa. Um servidor de renderização dinâmica detecta bots que podem ter problemas com esse conteúdo e exibe a eles uma versão sem JavaScript renderizada pelo servidor, ao mesmo tempo que mostra aos usuários o original renderizado do lado do cliente.

A renderização dinâmica é uma alternativa provisória, e não uma solução recomendada, porque exige mais recursos e aumenta a complexidade.

Sites que precisam usar a renderização dinâmica

A renderização dinâmica é uma alternativa provisória para conteúdo público gerado por JavaScript que é indexável e muda rapidamente ou para material que usa recursos de JavaScript que não são compatíveis com os rastreadores mais relevantes para você. Nem todos os sites precisam usar a renderização dinâmica, e existem soluções melhores do que ela, como explica este artigo sobre renderização na Web.

Como funciona a renderização dinâmica

A renderização dinâmica requer que seu servidor da Web detecte rastreadores (por exemplo, verificando o user agent). Solicitações de rastreadores são encaminhadas para um renderizador e solicitações de usuários são veiculadas normalmente. Quando necessário, o renderizador dinâmico veicula uma versão do conteúdo adequada ao rastreador, por exemplo, uma versão em HTML estático. É possível ativar o renderizador dinâmico para todas as páginas ou para páginas específicas.

Renderização dinâmica não é uma técnica de cloaking

Em geral, o Googlebot não considera a renderização dinâmica como uma técnica de cloaking. Se a renderização dinâmica produzir conteúdo semelhante, o Googlebot não verá esse processo como uma técnica de cloaking.

Ao configurar a renderização dinâmica, seu site poderá gerar páginas de erro. O Googlebot não considera essas páginas de erro como técnicas de cloaking e tratará esse problema como qualquer outra página de erro.

O uso da renderização dinâmica para veicular conteúdo completamente diferente para usuários e rastreadores pode ser considerado uma técnica de cloaking. Por exemplo, um site que veicula uma página sobre gatos para usuários e outra sobre cachorros para rastreadores pode se enquadrar nesse tipo de violação.

Implementar a renderização dinâmica

Para configurar a renderização dinâmica para seu conteúdo, siga nossas diretrizes gerais. Como seus detalhes de configuração específicos variam muito entre as implementações, você precisará consultá-los.

1. Instale e configure um renderizador dinâmico (por exemplo, Puppeteer, Rendertron ou prerender.io) para transformar seu conteúdo em HTML estático, que é mais fácil de ser usado pelos rastreadores.
2. Escolha os user agents que você quer que recebam seu HTML estático e consulte seus detalhes de configuração específicos sobre como atualizar ou adicionar user agents. Veja um exemplo de lista de user agents comuns no middleware Rendertron:

   export const botUserAgents = [
     'googlebot',
     'bingbot',
     'linkedinbot',
     'mediapartners-google',
   ];

3. Se a pré-renderização desacelerar seu servidor ou se você observar um grande número de solicitações de pré-renderização, implemente um cache para conteúdo pré-renderizado ou verifique se as solicitações são de rastreadores legítimos.
4. Determine se os user agents requerem conteúdo para computadores ou dispositivos móveis. Use a exibição dinâmica para fornecer a versão apropriada a cada máquina. Veja um exemplo de como uma configuração pode determinar se um user agent requer conteúdo para computadores ou dispositivos móveis:

   isPrerenderedUA = userAgent.matches(botUserAgents)
   isMobileUA = userAgent.matches(['mobile', 'android'])
   
   
   if (!isPrerenderedUA) {
   } else {
     servePreRendered(isMobileUA)
   }

   Neste exemplo, use if (!isPrerenderedUA) {...} para exibir conteúdo regular processado no lado do cliente. Use else { servePreRendered(isMobileUA)} para exibir a versão para dispositivos móveis, se necessário.
5. Configure seu servidor para exibir HTML estático aos rastreadores selecionados. Há várias maneiras de fazer isso, dependendo da sua tecnologia. Veja alguns exemplos:
   • Solicitações de proxy feitas pelos rastreadores para o renderizador dinâmico.
   • Faça a pré-renderização como parte do processo de implantação e faça seu servidor exibir o HTML estático aos rastreadores.
   • Crie a renderização dinâmica no seu código de servidor personalizado.
   • Exiba conteúdo estático de um serviço de pré-renderização para os rastreadores.
   • Use um middleware para seu servidor, como o rendertron middleware (em inglês).

Verificar a configuração

Depois de concluir a implementação da renderização dinâmica, confira se tudo funciona conforme esperado verificando um URL com os seguintes testes:

1. Teste seu conteúdo para dispositivos móveis e computadores com a Ferramenta de inspeção de URL e garanta que ele também esteja visível na página renderizada (que é como ela aparece para o Google).

   Sucesso: o conteúdo para computadores e dispositivos móveis corresponde ao que você espera que seja exibido ao usuário.

   Tente novamente: se o conteúdo exibido não for o esperado, consulte a seção de solução de problemas.

2. Caso você use dados estruturados, verifique se eles são renderizados corretamente usando o teste de pesquisa aprimorada.

   Sucesso: os dados estruturados aparecem conforme esperado.

   Tente novamente: se os dados estruturados não aparecerem conforme esperado, consulte a seção de solução de problemas.

Solução de problemas

Se o conteúdo estiver mostrando erros na Ferramenta de inspeção de URL ou se ele não aparecer nos resultados da Pesquisa Google, tente resolver os problemas mais comuns. Caso a situação persista, poste um novo tópico na Comunidade de Ajuda da Central da Pesquisa Google.

O conteúdo está incompleto ou diferente

O que causou o problema: o renderizador pode estar configurado incorretamente ou seu app da Web pode ser incompatível com a solução de renderização. Às vezes, os tempos limite também podem fazer com que o conteúdo não seja renderizado corretamente.

Como corrigir o problema: consulte a documentação da sua solução para depurar a configuração da renderização dinâmica.

Tempos de resposta altos

O que causou o problema: o uso de um navegador headless para renderizar páginas sob demanda geralmente aumenta os tempos de resposta. Isso pode fazer com que os rastreadores cancelem a solicitação e não indexem o conteúdo. Os tempos de resposta altos também podem fazer com que os rastreadores reduzam a taxa de rastreamento ao rastrear e indexar seu conteúdo.

Como corrigir o problema:

1. Configure um cache para o HTML pré-renderizado ou crie uma versão do seu conteúdo em HTML estático como parte do processo de criação.
2. Ative o cache na sua configuração (por exemplo, apontando os rastreadores para seu cache).
3. Verifique se os rastreadores recebem seu conteúdo rapidamente usando ferramentas de teste, como o teste de pesquisa aprimorada ou o webpagetest (em inglês), com uma string de user agent personalizada da lista de user agents do rastreador do Google. Suas solicitações não podem expirar.

Os componentes da Web não são renderizados como esperado

O que causou o problema: oShadow DOM está isolado do restante da página. As soluções de renderização (como Rendertron) não podem ver o conteúdo dentro do shadow DOM isolado. Para mais informações, consulte as práticas recomendadas para componentes da Web.

Como corrigir o problema:

1. Carregue os polyfills webcomponents.js para elementos personalizados e o shadow DOM (em inglês).
2. Use o teste de pesquisa aprimorada ou a Ferramenta de inspeção de URL para verificar se o HTML renderizado tem todo o conteúdo esperado.

Faltam dados estruturados

O que causou o problema: a ausência do user agent dos dados estruturados ou a não inclusão de tags de script JSON-LD na saída pode causar erros nos dados estruturados.

Como corrigir o problema:

1. Use o teste de pesquisa aprimorada para garantir que os dados estruturados estejam presentes na página. Em seguida, configure o user agent para testar o conteúdo pré-renderizado com o Googlebot para computadores ou dispositivos móveis.
2. As tags de script JSON-LD precisam estar incluídas no HTML renderizado dinamicamente do seu conteúdo. Consulte os documentos da sua solução de renderização para saber mais.