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ásicos 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 el robot de 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 que tus páginas admitan 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 cada una de las secciones que los usuarios pueden compartir y cargar directamente. Te recomendamos que actualices la URL mediante la API History cuando el contenido se cargue de forma dinámica.

Probar

Una vez que hayas implementado esta técnica, asegúrate de que funcione correctamente. Puedes probarla localmente con una secuencia de comandos de Puppeteer, que es una biblioteca de Node.js con la que controlar una 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
    

Cuando hayas terminado de ejecutar la secuencia de comandos, revisa manualmente las capturas de pantalla que se hayan creado para asegurarte que se incluye todo el contenido que quieres que sea visible y que indexe el robot de 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.