Corregir contenido cargado en diferido

Es habitual y recomendable retrasar la carga del contenido que no sea fundamental ni visible para mejorar la experiencia de usuario y el rendimiento; esta práctica se denomina "carga en diferido". Para obtener más información al respecto, consulta la guía sobre carga en diferido de imágenes y vídeos del sitio web Aspectos básico de la Web. Sin embargo, si esta técnica no se implementa correctamente, es posible que se oculte contenido por error y Google no pueda verlo. En este documento se explica cómo asegurarse de que Google pueda rastrear e indexar contenido que se carga en diferido.

Cargar el contenido cuando sea visible en el viewport

Para que Google pueda ver todo el contenido de tu página, asegúrate de que hayas implementado la carga en diferido de modo que todo el contenido importante siempre sea visible cuando esté en el viewport. A continuación se muestran algunos ejemplos de cómo hacerlo:

Asegúrate de probar tu implementación.

Admitir la carga con paginación en páginas con desplazamiento infinito

Si quieres implementar una experiencia de desplazamiento infinito, asegúrate de admitir la carga con paginación. Es importante utilizar esta técnica de carga de cara a los usuarios, porque les permite compartir y volver a interactuar con tu contenido. Además, de este modo Google puede mostrar un enlace a un punto concreto del contenido, y no únicamente a la parte superior de una página con desplazamiento infinito.

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

Probar

Una vez que hayas implementado esta técnica, asegúrate de que funcione correctamente. Para ello, utiliza una secuencia de comandos de Puppeteer para probar la implementación localmente. Puppeteer es una biblioteca Node.js para controlar la versión de Chrome sin interfaz gráfica. Para ejecutar la secuencia de comandos, necesitas Node.js. Puedes ver y ejecutar la secuencia de comandos con los siguientes comandos:

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 capturas de pantalla que se hayan creado para asegurarte de que se incluye todo el contenido que esperas que sea visible y que indexe Google.

También puedes comprobar que se hayan cargado todas las imágenes con la herramienta de inspección de URLs de Search Console. Para hacerlo, consulta las capturas de pantalla y el HTML renderizado.