Lazy Loading: Ya tenemos guía de ayuda SEO oficial de Google

Google ha publicado una primera versión de su guía de carga diferida (en inglés lazy loading) para SEO. Aunque la primera versión del documento es bastante corta, si que da un bueno truco para verificar que Google ve todo el contenido que cargamos de forma diferida en una página web.

Martin Splitt de Google fue el primero en compartir la noticia en Twitter diciendo «¿quieres echar un vistazo a la primera versión de los documentos de SEO de carga diferida que hemos estado elaborando?»

Guía «Make sure Google can see lazy-loaded content»

La primera versión del documento es bastante corta, se puede encontrar aquí. Cubre algunos de los primeros consejos para asegurarse de que las páginas web que implementan contenido cargado diferida también puedan encontrar ese contenido en el índice de búsqueda de Google.

Diferir la carga de contenido no crítico o no visible, también conocido como «lazy loading», es una práctica común y una buena práctica de UX. Hay más información en la guía Fundamentos de la Web para cargar imágenes y vídeos de forma diferida. Sin embargo, si no se implementa correctamente, esta técnica puede ocultar inadvertidamente el contenido de Google.

OJO con no ocultar contenido de Google al usar lazy loadingde carga diferida (en inglés lazy loading).

Este documento explica cómo asegurarse de que Google puede rastrear e indexar el contenido cargado de forma diferida. Básicamente son dos consejos y una explicación de como comprobar si Google ve todo el contenido de la página web.

Cargar contenido cuando es visible en el viewport

Para garantizar que Googlebot vea todo el contenido de tu página, asegúrate de que tu implementación de carga diferida cargue todo el contenido relevante siempre que sea visible en la ventana de visualización (viewport) mediante la API de IntersectionObserver y polyfill.

Con scroll infinito hay que permitir la carga paginada

Si tienes un scroll infinito que va cargando contenidos hay que asegurase de ofrecer también carga paginada. La carga paginada es importante para los usuarios porque les permite compartir y retomar su contenido. También permite a Google mostrar un enlace a un punto específico del contenido, en lugar de la parte superior de una página de scroll infinito.

Para soportar la carga paginada, proporciona un enlace único a cada sección que los usuarios puedan compartir y cargar directamente. Google recomienda usar la API Historial para actualizar la URL cuando el contenido se carga dinámicamente.

Cómo comprobar que Google «ve» todo el contenido de la web

Para comprobar que Google ve todo el contenido que se carga en diferido, Google recomienda usar Puppeteer script para comprobar su implementación en local. Puppeteer es una librería Node.js  para controlar un «headless» Chrome. Para ejecutar el script se necesita Node.js y luego se pueden ejecutar los siguientes comandos:

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

Después de ejecutar el script, hay que revisar las imágenes de la captura de pantalla que ha creado para asegurarte de que contienen todo el contenido que Googlebot espera que sea visible e indexado.

 

Esta es la primera versión del documento de 5 de noviembre de 2018 y seguro que le irán añadiendo más información. Lo más interesante es como se puede comprobar que Google ve correctamente el contenido de la web.