Soluciona el problema de carga diferida de contenido

El proceso de retrasar la carga de contenido no fundamental o no visible, también conocido como "carga diferida", es una práctica recomendada común para UX y rendimiento. Para obtener más información al respecto, consulta la guía sobre carga diferida en imágenes y videos de Fundamentos de la Web. Sin embargo, si no se implementa correctamente esta técnica, es posible que se oculte inadvertidamente el contenido y Google no pueda verlo. Este documento explica cómo asegurarse de que Google pueda rastrear y también indexar contenido de carga diferida.

Cómo cargar contenido cuando esté visible en el viewport

Para que Google vea todo el contenido de la página, asegúrate de que tu implementación de carga diferida cargue todo el contenido relevante siempre que sea visible en el viewport. Aquí tienes algunos ejemplos de cómo hacerlo:

Asegúrate de probar la implementación.

Cómo admitir la carga con paginación para el desplazamiento infinito

Si quieres implementar una experiencia de desplazamiento infinito, asegúrate de admitir la carga con paginación. Este tipo de carga es importante para los usuarios porque les da la opción de compartir y volver a interactuar con tu contenido. Además, permite que Google muestre un vínculo a un punto específico del contenido, en lugar de la parte superior de una página de desplazamiento infinito.

Para admitir la carga con paginación, proporciona un vínculo único a cada sección que los usuarios puedan compartir y cargar directamente. Te recomendamos usar la API de History para actualizar la URL cuando el contenido se cargue de forma dinámica.

Prueba

Después de configurar la implementación, asegúrate de que funcione correctamente. Para ello, utiliza la secuencia de comandos de Puppeteer y pruébala de forma local. Puppeteer es una biblioteca Node.js para controlar Chrome sin interfaz gráfica. Para ejecutar la secuencia de comandos, necesitarás Node.js. Usa los siguientes comandos para revisar la secuencia y ejecutarla: 

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

Una vez que termines, revisa manualmente las imágenes de captura de pantalla que se crearon para asegurarte de que contengan todo el contenido que esperas que sea visible y que indexe Google.

También puedes usar la Herramienta de inspección de URL en Search Console y comprobar que se hayan cargado todas las imágenes. Para ello, revisa la captura de pantalla y el HTML procesado.