Cómo asegurarse de que Google pueda acceder al contenido de carga diferida

El proceso de aplazar la carga de contenido no crítico o no visible, también conocido como "carga diferida", es una solución de rendimiento común recomendada para UX. Si quieres obtener más información al respecto, consulta la guía sobre la 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 e indexar contenido cargado de forma diferida.

Cómo cargar contenido cuando esté visible en la vista del puerto

Para garantizar que el robot de Google vea todo el contenido de tu página, asegúrate de que la implementación de carga diferida cargue todo el contenido relevante siempre que esté visible en la vista del puerto utilizando la API de IntersectionObserver y un parámetro polyfill.

Cómo admitir la carga paginada para el desplazamiento infinito

Si quieres implementar una experiencia de desplazamiento infinito, asegúrate de admitir la carga paginada. Este tipo de carga es importante para los usuarios porque les da la opción de compartir y volver a vincularse 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 paginada, proporciona un vínculo único a cada sección que los usuarios puedan compartir y cargar directamente. Recomendamos utilizar la API de History para actualizar la URL cuando se cargue el contenido de forma dinámica.

Cómo realizar una prueba

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

git checkout 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 creaste para asegurarte de que contengan todo el contenido que esperas que sea visible y que indexe el robot de Google.

Enviar comentarios sobre...