Primeiros passos com 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 é importante observar que essa renderização é 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 os convertem em HTML estático. Depois que o conteúdo é convertido, o renderizador veicula o HTML estático ao rastreador.

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 para transformar seu conteúdo em HTML estático, que é mais fácil de ser usado pelos rastreadores. Alguns renderizadores dinâmicos comuns são Puppeteer, Rendertron e prerender.io.
  2. Escolha os user agents que você acredita que precisam receber 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',
      'google-structured-data-testing-tool',
      '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 (por exemplo, o rendertron middleware).

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.

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

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

  2. Teste seu conteúdo para computadores com a ferramenta Fetch as Google para garantir que ele também possa ser visto na página renderizada (que é a forma como o Googlebot vê sua página).

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

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

  3. Se você usa dados estruturados, teste se eles são renderizados corretamente usando a Ferramenta de teste de dados estruturados.

    done Sucesso: os dados estruturados aparecem conforme esperado.

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

Solução de 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 listados abaixo. Se os problemas continuarem, poste um novo tópico no Fórum para webmasters.

O conteúdo está incompleto ou diferente

error O que causou o problema: seu renderizador pode estar configurado incorretamente ou seu aplicativo da Web pode não ser compatí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.

done Corrigir o problema: consulte a documentação da sua solução de renderização específica para depurar a configuração da renderização dinâmica.

Tempos de resposta altos

error O que causou o problema: o uso de um navegador sem cabeçalho para renderizar páginas sob demanda geralmente causa tempos de resposta altos. Isso pode fazer com que os rastreadores cancelem a solicitação e não indexem seu 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.

done 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 (com uma string de user agent personalizada da lista de user agents do rastreador do Google). Suas solicitações não podem expirar.

Faltam dados estruturados

error 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.

done Corrigir o problema

  1. Use a Ferramenta de teste de dados estruturados para garantir que os dados estruturados estejam presentes na página. Em seguida, configure o user agent para que a Ferramenta de teste de dados estruturados teste o conteúdo pré-renderizado.
  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.

Enviar comentários sobre…