Recomendaciones para un scroll infinito optimizado para buscadores

Estaréis de acuerdo conmigo que para muchos usuarios las webs de scroll infinito son mucho más cómodas que una serie paginada. Aun así, como muy bien sabemos, en el SEO debemos pensar tanto para los usuarios como para los crawlers de los buscadores. Desgraciadamente, rara vez los crawlers serán capaces de rastrear el contenido más allá de la primera carga de una página con scroll infinito.

Con algunas recomendaciones SEO podemos crear una página de scroll infinito cuyo contenido entero sea rastreable por los crawlers de los buscadores, creando una página amigable para los usuarios y optimizada para el posicionamiento en buscadores.

A grandes rasgos, consistiría en agrupar los ítems de contenido (artículos o productos por ejemplo) en páginas como si fuéramos a crear una paginación convencional y después implementar la función replaceState o pushState (a gusto del consumidor) para crear un scroll infinito optimizado para SEO que cargue sucesivamente las páginas en lugar de conjuntos de ítems de contenido como lo haría el scroll infinito convencional.

Para hacerlo lo mejor posible, ahí van unas recomendaciones SEO para el scroll infinito:

1. En primer lugar debemos agrupar los ítems de contenido en las páginas de una serie de paginación considerando:

• La cantidad de contenido. Éste dependerá de mantener un tiempo de carga razonable y de mantener fácilmente accesible el contenido a los crawlers.
• Que los ítems de contenido no se superpongan. Es decir, que un mismo ítem no esté presente en más de una página, ya que lo estaríamos duplicado (imagen 1).

2. Establecer una URL completa por cada página de la serie de paginación para un scroll infinito optimizado para buscadores. Por ejemplo:

• example.com/category?name=fun-items&page=1
• example.com/fun-items?lastid=567

Recordad optimizar el <title> de cada página evitando su duplicidad.

3. Nos tenemos que asegurar que los enlaces sean rastreables para los crawlers (deben poder ser seguidos por los crawlers al inhabilitar el JS). Como recomienda Google, utilizar rel=”next” y rel=”prev” para establecer la serie de paginación (imagen 2).

4. Implementar replace State o pushState para crear el  scroll infinito.

5. Por último, falta testear el trabajo hecho:

• Las URL deben ajustarse al contenido correspondiente a medida que se realiza el scroll tanto ascendente como descendente.
• Al escribir cualquier URL de la serie de paginación debe devolver el contenido de la página correspondiente.
• Verificar que cualquier página fuera de la serie devuelve un error 404. Por ejemplo: example.com/category?name=fun-items&page=999 debería devolver una respuesta 404 si la serie de paginación consta de 998 páginas de contenido.  

Para acabar puedes ver un ejemplo perfecto de scroll infinito optimizado para buscadores creado por John Mueller.