Verificar se o Google pode ver conteúdo de carregamento lento

Adiar o carregamento de conteúdo não crítico ou não visível, também conhecido como "carregamento lento", é uma prática recomendada de UX e de desempenho comum. Para ver mais informações, consulte o guia para carregamento lento de imagens e vídeos no Fundamentos da Web. No entanto, se essa técnica não for implementada de forma correta, ela poderá ocultar inadvertidamente o conteúdo do Google. Este documento explica como garantir que o Google possa rastrear e indexar conteúdo com carregamento lento.

Carregar conteúdo quando estiver visível na janela de visualização

Para garantir que todo conteúdo da sua página seja visível para o Googlebot, use a API IntersectionObserver e um polyfill. Assim, sua implementação do carregamento lento carregará todo o conteúdo relevante sempre que visível na janela de visualização.

Compatibilidade de carregamento paginado com rolagem infinita

Se você estiver implementando uma experiência de rolagem infinita, a compatibilidade com o carregamento paginado será necessária. O carregamento paginado é importante para os usuários porque permite que eles compartilhem e interajam novamente com seu conteúdo. Ele também permite que o Google mostre um link para um ponto específico no conteúdo em vez do topo de uma página de rolagem infinita.

Para a compatibilidade com o carregamento paginado, forneça um link exclusivo para cada seção que os usuários podem compartilhar e carregar diretamente. Recomendamos usar a API History para atualizar o URL quando o conteúdo for carregado dinamicamente.

Teste

Depois de configurar sua implementação, verifique se ela funciona corretamente. Uma maneira de fazer isso é usando um script Puppeteer para testar localmente sua implementação. O Puppeteer é uma biblioteca do Node.js para controlar o Chrome sem interface. Para executar o script, o Node.js será necessário. Use os seguintes comandos para verificar o script e executá-lo:

git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Depois de executar o script, revise manualmente as imagens de captura de tela que ele criou para garantir que elas contenham todo o conteúdo esperado para visualização e indexação pelo Googlebot.

Enviar comentários sobre…