Introdução a Renderização Dinâmica

A Renderização Dinâmica (do inglês, Dynamic Rendering) é importante porque desenvolvedores estão cada vez mais optando por frameworks JavaScript como o Angular ou React para construir não só websites, mas todo o tipo de aplicação web.

---

• O que é renderização dinâmica?
• Renderização Dinâmica: Primeiros Passos
• Entenda como funciona a renderização dinâmica
• Considerações sobre dispositivos móveis

---

E por que estão fazendo essa escolha?

Bom, é simples, com esses frameworks são construídas as famosas SPAs (Single Page Applications) que possuem uma experiência otimizada para o usuário final.

Single Page Applications (SPA) são aplicações cuja funcionalidade está concentrada em uma única página. Ao invés de carregar toda a página ou redirecionar o usuário para uma página nova, apenas o conteúdo principal é atualizado de forma assíncrona, mantendo toda a estrutura da página estática.

Imagine um dashboard, em que o menu lateral e superior são os mesmos para todas as telas da aplicação. Ao clicar em uma opção como “Cadastro de produtos”, o usuário não precisaria carregar toda a página para ver que no fim apenas o conteúdo central mudou. Para evitar isso, mantemos os menus fixos e alteramos apenas a parte do conteúdo, em que estarão os formulários, tabelas, etc.

Além de otimizar a performance da aplicação, reduzindo o conteúdo a ser carregado, as SPAs têm foco na experiência do usuário, que lida com uma interface mais rápida.

Exemplos de Single Page Applications

As SPA estão presentes no nosso dia a dia há algum tempo. Grandes exemplos disso são o Gmail, o Outlook e outras aplicações (web) de e-mail. Na mesma página temos a possibilidade de abrir uma mensagem, excluí-la, respondê-la, etc, sem que toda a estrutura seja recarregada (apenas a parte central muda).

Também há cenários híbridos, ou seja, em partes da aplicação o conceito de SPA é aplicado, enquanto em outros continua a navegação síncrona convencional. Um exemplo disso é o site Airbnb. No primeiro momento fazemos uma busca e somos direcionados para outra página. Nesse segundo ambiente temos o comportamento do tipo SPA: fazemos filtros e apenas os resultados são recarregados. Ao clicar em um dos resultados, porém, somos novamente enviados para outra página, ocorrendo a mudança de contexto.

Esse tipo de aplicação promete ser o futuro quando falamos em aplicações web, vamos ser sinceros! Nenhum usuário gosta de ter que esperar suas páginas carregarem todas vez que se clica em um link.

O problema é que os crawlers usados por motores de busca geralmente não “enxergam” o conteúdo da maneira como os navegadores fazem quando visitam sites renderizados no lado do cliente (client-side). Isso pode levar a problemas de indexação.

Um rastreador da rede, em inglês web crawler, é um programa de computador que navega pela rede mundial de uma forma metódica e automatizada. Outros termos para rastreadores da rede são indexadores automáticos, robôs, aranhas da rede, robô da rede ou escutador da rede

Felizmente, o Google tem uma solução: a renderização dinâmica.

Sim, meu amigo SEO, você vai ter que aprender JavaScript.

O que é renderização dinâmica?

Às vezes, desenvolvemos aplicações web complexas, no modelo SPA (Single Page Application). Eles normalmente dependem de frameworks JavaScript para manipular a interface do usuário.

Uma SPA é excelente para os usuários, mas não tão bom para crawlers de motores de busca que tentam rastrear o conteúdo do site.

Por quê? Porque os bots estão usando um Headless Browser.

O que é um Headless Browser?

De início, qualquer browser (navegador) tem que ser capaz de fazer três coisas:

• Dado um endereço de URL, acessar uma página HTML;
• Renderizar o conteúdo no DOM, executar scripts, e torná-lo disponível;
• Renderizar o DOM em um conteúdo visual.

O DOM (Document Object Model) é uma interface que representa como os documentos HTML e XML são lidos pelo seu browser. Após o browser ler seu documento HTML, ele cria um objeto que faz uma representação estruturada do seu documento e define meios de como essa estrutura pode ser acessada. Nós podemos acessar e manipular o DOM com JavaScript, é a forma mais fácil e usada.

Um browser que somente faz o primeiro item é chamado de “text-based”.

Um browser que cobre os três itens são os browsers que conhecemos atualmente (Chrome, Opera, Firefox, Microsoft Edge e etc).

Um headless browser cobre os dois primeiros itens.

Logo, headless browser se trata de um navegador web sem uma interface gráfica, ou seja, não conseguimos ver o conteúdo da página na nossa tela, mas este browser consegue executar qualquer ação sobre a URL desejada.

Um headless browser é um navegador que navega pela internet sem renderizar uma interface gráfica para o usuário. Não renderiza a parte visual de uma página da web.

Em vez disso, rastreia somente elementos HTML estáticos.

Sites renderizados via JavaScript produzem boa parte do seu conteúdo de forma dinâmica. Não é gerado um HTML estático.

Assim, os crawlers usados por motores de busca não veem nada além de um monte de código JavaScript. Eles não conseguem indexar isso.

Existe uma solução, no entanto, chamado de renderização dinâmica.

Como funciona?

Criamos uma série de páginas estáticas que irão renderizar apenas para crawlers. Dessa forma, os motores de busca podem rastrear o conteúdo e indexá-lo.

Em seguida, incluímos uma lógica na aplicação que verifica cada tipo de solicitação. Se a solicitação vier de um crawler, o site exibirá o conteúdo estático. Se a solicitação vier de um navegador comum, o site exibirá o conteúdo JavaScript gerado dinamicamente.

Infelizmente, não é uma solução tão simples, pois exige uma certa complexidade quando falamos em desenvolvimento.

Talvez algum dia o Google e o Bing desenvolvam crawlers que possam rastrear elementos gerados renderizados por JavaScript. Por enquanto esse não é o caso.

E na guerra para buscar as melhores posições nos resultados de pesquisa você não pode se dar ao luxo de ser deixado de lado por bots como Googlebot ou o Bingbot.

Quem precisa usar a renderização dinâmica?

Você precisa usar a renderização dinâmica se estiver executando um site renderizado dinamicamente via JavaScript.

Aqui estão alguns dos frameworks JavaScript que costumam ser usados para criar esse tipo de aplicação:

• Angular
• React
• Vue.js
• jQuery

Empresas como a Dish, Twitch, Wix, Comcast e até a Domino’s Pizza dependem de uma estrutura de renderização dinâmica para otimizar o SEO de seus sites.

Como a renderização dinâmica ajuda o Marketing

Quando se trata de marketing digital, o nome do jogo é visibilidade. Você quer que as pessoas encontrem seu negócio.

Uma das maneiras de fazer isso acontecer é com a otimização para motores de busca (SEO). Você configura seu site para que os mecanismos de pesquisa possam indexá-lo facilmente e classificá-lo nos primeiros resultados para palavras-chaves relacionadas ao seu nicho.

Como vimos, isso é um desafio se você tiver um website renderizado via JavaScript. Os crawlers de motores de busca não conseguem “ler” seu conteúdo.

A Renderização Dinâmica permite que você maximize seu alcance “traduzindo” suas páginas de forma que os crawlers possam rastreá-las e indexá-las.

Renderização Dinâmica: Primeiros Passos

Se você quiser adicionar renderização dinâmico a seu website, provavelmente precisará incluir a ajuda de mais um framework.

Eu sei. Não é isso que você queria ouvir.

Infelizmente, provavelmente será necessário. Aqui estão alguns frameworks que você deve considerar:

Puppeteer

Este é o oficial do Google, por isso é um bom ponto de partida. Usando o Puppeteer, você pode gerar capturas de tela e PDFs de páginas web, criar conteúdo pré-renderizado e até mesmo automatizar o envio de formulários. O melhor de tudo, é grátis. Saiba mais.

Rendertron

Esse aqui vai exigir um pouco de estudo, disponível no Github. Ainda assim, foi criado para renderizar páginas web para que o Googlebot possa rastrear e indexar o conteúdo. Você pode ver uma demonstração aqui.

Prerender.io

Esta solução custará algum dinheiro se você planeja renderizar mais de 250 páginas. O código para o framework também está disponível no Github. Depois de configurar e executar seu renderizador dinâmico, é hora de escolher o conteúdo que você deseja gerar HTML estático. Saiba mais.

Se você estiver interessado em indexar suas SPAs, obviamente irá desejar ter “googlebot” e “bingbot” nessa lista. No entanto, existem outros agentes (como “facebot”) que você também pode querer gerar conteúdo estático.

Acompanhe o tema no Twiiter:

Google Webmasters @googlewmc 📢 If you have heard @johnmu mention dynamic rendering at I/O and wonder what it is, when to use it and how to solve common issues, we’ve got you covered with the new 📖 “Get started with dynamic rendering” docs. See more here.

Nerds: Entenda como funciona a renderização dinâmica

A renderização dinâmica requer que seu servidor detecte crawlers (por exemplo, verificando user agents: googlebot, Slurp, facebot, bingbot e etc). Solicitações de crawlers são roteadas para um renderizador, as solicitações dos usuários são exibidas normalmente.

Quando necessário, o renderizador dinâmico veicula uma versão do conteúdo adequada para o crawler, por exemplo, uma versão HTML estática. Você pode optar por ativar o renderizador dinâmico para todas as páginas ou para páginas específicas.

Como mostrado na imagem anterior.

Para configurar a renderização dinâmica de suas páginas web. Você precisará estudar a documentação da ferramenta escolhida, pois pode variar muito entre as formas de implementação.

• Instale e configure um renderizador dinâmico para transformar seu conteúdo em HTML estático, que é mais fácil de ser usado pelos crawlers. Alguns renderizadores dinâmicos comuns são Puppeteer, Rendertron, e prerender.io.

• 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 agent. 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',
];

• Se a pré-renderização deixar seu servidor lento 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 crawlers legítimos.

• 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 robot. 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)
}

• Configure seu servidor para exibir HTML estático aos crawlers selecionados. Há várias maneiras de fazer isso, dependendo da sua tecnologia. Veja alguns exemplos:
  • Solicitações de proxy feitas pelos crawlers para o renderizador dinâmico.
  • Faça a pré-renderização como parte do processo de implementação e faça seu servidor exibir o HTML estático aos crawlers.
  • Crie a renderização dinâmica deixando seu código em um outro servidor.
  • Exiba conteúdo estático de um serviço de pré-renderização para os crawlers.
  • Use um middleware para seu servidor (por exemplo, o rendertron middleware).

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

• Configure seu servidor para exibir HTML estático aos crawlers selecionados. Há várias maneiras de fazer isso, dependendo da sua tecnologia. Veja alguns exemplos:
  • Solicitações de proxy feitas pelos crawlers para o renderizador dinâmico.
  • Faça a pré-renderização como parte do processo de implementação e faça seu servidor exibir o HTML estático aos crawlers.
  • Crie a renderização dinâmica deixando seu código em um outro servidor.
  • Exiba conteúdo estático de um serviço de pré-renderização para os crawlers.
  • Use um middleware para seu servidor (por exemplo, o rendertron middleware).

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

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

   • ✔ 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.

Resolvendo problemas (debugando)

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, você pode postar sua dúvida no Fórum para Webmasters do Google.

O conteúdo está incompleto ou diferenteO conteúdo está incompleto ou diferente

• O que causou o problema: seu renderizador pode estar configurado incorretamente ou sua aplicação web pode ser incompatível com o framework de renderização escolhido. Às vezes, o tempo limite de resposta do servidor também pode fazer com que o conteúdo não seja renderizado corretamente.

• Corrigir o problema: consulte a documentação de seu framework de renderização para depurar a configuração da renderização dinâmica.

Demora no tempo de resposta do servidor

• O que causou o problema: o uso de um headless browser para renderizar páginas sob demanda geralmente aumenta o tempo de resposta. Isso pode fazer com que os crawlers cancelem a solicitação e não indexem o conteúdo. A demora no tempo de resposta do servidor também pode fazer com que os crawlers reduzam a taxa de rastreamento ao rastrear e indexar seu conteúdo, ou seja, o tempo de resposta de seu servidor por influênciar no número de visitas do crawler ao seu domínio.

• 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 crawlers para seu cache).
  3. Verifique se os crawlers 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 crawler do Google). Suas solicitações não podem expirar.

Falha nos dados estruturados

• O que causou o problema: a ausência do user agent para dados estruturados ou a não inclusão de tags JSON-LD podem causar erros nos dados estruturados.

• 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 JSON-LD precisam estar incluídas no HTML renderizado dinamicamente do seu conteúdo. Consulte a documentação de seu framework de renderização para ver mais informações.

Renderizando rapidamente

Depois de integrar a estrutura de renderização dinâmica e escolher seus bots, talvez seja necessário ajustar algumas coisas.

Por exemplo, se você achar que o renderizador está sobrecarregando seu servidor, precisará fazer alguns ajustes. Caso contrário, seu site ficará lento e você poderá perder posições em resultados de busca.

Você pode consertar isso adicionando um cache para servir conteúdo estático. Além disso, talvez você precise validar que as solicitações de bots são de crawlers legítimos.

Por exemplo, veja como validar que uma solicitação de bot é realmente do Google:

• Obtenha o endereço IP do bot (exemplo: 22.33.44.155);
• Execute uma pesquisa reversa de DNS para obter o nome do servidor desse endereço IP (por exemplo: xyz.googlebot.com);
• Se o nome do servidor terminar em googlebot.com ou google.com, você sabe que é uma solicitação legítima do Google.

Renderização Dinâmica: Considerações sobre dispositivos móveis

Estamos em um mundo mobile. Se seu site não for ajustado para veicular conteúdo com ótima aparência em uma plataforma para smartphones (Android e iOS), você certamente terá problemas.

É por isso que você precisa garantir que seu renderizador dinâmico veicule conteúdo HTML de fácil utilização para as menores telas de smartphones. Você provavelmente precisará usar a exibição dinâmica (dynamic serving) para que isso aconteça.

Veja como todo o processo funciona:

• Primeiro, determine se um bot ou um usuário real está acessando seu website;
• Em seguida, determine se o user agent é um user agent móvel ou desktop;
• Se a solicitação vier de um usuário real em um navegador comum, exiba o conteúdo renderizado via JavaScript;
• Se a solicitação for proveniente de um user agent, veicule o conteúdo estático para dispositivos móveis se ele for um user agent móvel ou veicule o conteúdo estático para desktop se ele for um user agent desktop.

Esse é um conceito importante porque o Google está migrando para mobile-first indexing, a maioria dos sites já receberam uma notificação sobre. Ou seja, está rastreando páginas com um user agent voltado para dispositivos móveis e “visualizando” as páginas como um usuário em um dispositivo móvel as visualizaria.

Por isso, se estiver interessado que suas páginas sejam indexadas com uma boa classificação na SERP, seu renderizador dinâmico precisa apresentar conteúdo HTML compatível com dispositivos móveis.

Testando

Depois de configurar tudo, é hora de fazer alguns testes.

Como dito anteriormente, comece por visitar o Teste de compatibilidade com dispositivos móveis do Google. Basta inserir o URL do seu site.

Teste sua renderização dinâmica usando a Ferramenta de teste de compatibilidade com dispositivos móveis do Google.

Depois de alguns segundos, o Google mostrará a aparência do seu site na perspectiva de seu user agent. Se o conteúdo não corresponder ao que você deseja, entre em contato com sua equipe de desenvolvimento e explique como deseja que ele apareça.

O teste de compatibilidade também alertará se houver problemas específicos para dispositivos móveis associados ao seu site.

Em seguida, use o Fetch as Google para testar seu renderizador dinâmico. Apenas certifique-se de clicar no botão “FETCH AND RENDER” ou você não verá nada.

Mais uma vez, confira a versão renderizada do seu site, se não estiver correto, faça os ajustes necessários.

Se você estiver usando dados estruturados em seu site (e provavelmente você deveria estar usando, se não estiver), vá para a Ferramenta de teste de dados estruturados.

Insira sua URL e verifique se o Google está encontrando todas as suas marcações.

Naturalmente, o teste final é esperar um pouco e verificar os resultados da pesquisa. Seu conteúdo está aparecendo? Se sim, então o renderizador dinâmico está fazendo o seu trabalho.

Uma dica é usar a seguinte consulta no Google: site:www.seudominio.com

Isso é um comando no buscador do Google, ele vai te informar todas as suas URLs indexadas.

Solução de problemas de renderização dinâmica Lembre-se, quando se trata de desenvolvimento de software, a Lei de Murphy é rigorosamente aplicada. É provável que algo dê errado na primeira vez que você implementar um renderizador dinâmico.

Para começar, se o conteúdo do seu website não estiver aparecendo como deveria, verifique se você configurou a estrutura corretamente. Percorra todas as configurações novamente, confira a sessão Resolvendo problemas.

Você também pode estar usando uma estrutura que simplesmente não é compatível com sua aplicação web. Nesse caso, tente mudar para outro framework.

Se o seu site não estiver sendo indexado, isso pode ser devido carregamento lento. Tente melhorar seu sistema de cache.

Por fim, se você não estiver vendo dados estruturados, verifique o código JSON-LD. Se eles estiverem ausentes, o Google não irá ler a marcação.

Finalizando a renderização dinâmica

Os frameworks JavaScript facilitam a criação de aplicações web excelentes no ponto de vista de usabilidade do usuário, como o Gmail, Spotify e etc. No entanto, esse conteúdo exige maior poder de processamento de crawlers.

É por isso que você deve implementar a renderização dinâmica se estiver executando um site que renderize conteúdo via JavaScript.

A renderização dinâmica permitirá que os crawlers de motores de busca encontrem seu conteúdo e o indexem para que seu site tenha maior exposição nos resultados da pesquisa.

Não é uma solução fácil, no entanto. Não deixe de contar com a ajuda de uma equipe de desenvolvimento qualificada.

Se você trabalha com SEO, aconselho assistir de série de JavaScript SEO no Canal do Google Webmasters no e se aproximar de comunidades do GDG.

O profissional do SEO se encontra em constante evolução e precisa entender de arquitetura da informação e linguagens de programação web. Pois otimizar tags HTML e ficar conseguindo links uma hora vai deixar de ser tão relevante.

Hoje a web se comunica e navega através de links, mas quando sistemas inteligentes começarem a entender e interpretar linked data a web vai mudar.