Implementar a renderização dinâmica

Atualmente, é difícil processar JavaScript, e nem todos os rastreadores de mecanismos de pesquisa conseguem processá-lo com êxito ou de forma imediata. Esperamos que esse problema possa ser corrigido no futuro, mas, por enquanto, recomendamos a renderização dinâmica como solução alternativa. Renderização dinâmica significa alternar entre conteúdo renderizado no lado do cliente e conteúdo pré-renderizado para user agents específicos.

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

A renderização dinâmica é indicada para conteúdo público gerado por JavaScript que é indexável e muda rapidamente ou para conteúdo que usa recursos de JavaScript que não são compatíveis com seus rastreadores favoritos. Nem todos os sites precisam usar a renderização dinâmica, e esse processo é uma solução alternativa aos rastreadores.

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.

Um diagrama que mostra como a renderização dinâmica funciona. O diagrama mostra o servidor veiculando
              o conteúdo HTML e JavaScript inicial diretamente ao navegador. Em contrapartida, o diagrama
              mostra o servidor veiculando o HTML e o JavaScript iniciais para um renderizador, que converte o
              HTML e o JavaScript iniciais em HTML estático. Depois que o conteúdo é convertido, o
              renderizador veicula o HTML estático ao rastreador.

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) }
  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, veja se tudo funciona conforme esperado verificando um URL com os seguintes testes:

  1. Faça o teste de compatibilidade com dispositivos móveis no seu conteúdo para garantir que o Google pode vê-lo.

    Sucesso: seu conteúdo para dispositivos móveis corresponde ao que você espera que o usuário veja.

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

  2. Teste seu conteúdo para computadores com a Ferramenta de inspeção de URL para garantir que ele também possa ser visto na página renderizada, que é a forma como o Googlebot vê sua página.

    Sucesso: o conteúdo para computadores é o que você espera que o usuário veja.

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

  3. Se você usar dados estruturados, teste 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.

Resolver problemas

Caso seu conteúdo apresente erros no teste de compatibilidade com dispositivos móveis ou caso ele não apareça nos resultados da Pesquisa Google, tente solucionar os problemas mais comuns. Se você ainda estiver com problemas, 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: seu 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.

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.

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 compatibilidade com dispositivos móveis 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: o Shadow 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.

Corrigir o problema

  1. Carregue os polyfills webcomponents.js para elementos personalizados e o shadow DOM (em inglês).
  2. Use o Teste de compatibilidade com dispositivos móveis 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 podem causar erros nos dados estruturados.

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 ver mais informações.