El scroll infinito, implicaciones SEO-Usabilidad

Si estás pensando en implementar un scroll infinito en una web es importante que revises las implicaciones que esto puede tener en el SEO y en la Usabilidad del sitio.

Se trata de una opción de diseño en alza desde hace algunos años a la que habitualmente se relaciona con una mejor experiencia de usuario, aunque su idoneidad suele depender del  tipo de sitio web. En todo caso, siempre debemos prestar atención a su implementación, ya que puede tener impacto en el SEO y por tanto en el posicionamiento del sitio.

En este artículo:

1. Se explica qué es el scroll infinito y su principio de funcionamiento.
2. Se detalla porqué una mala implementación puede impactar negativamente en SEO.
3. Se reflexiona sobre los tipos de sitios web dónde puede mejorar la usabilidad.
4. Se exponen  posibles implementaciones correctas desde la óptica del SEO.
5. Se proponen unas conclusiones y consejos.

1. ¿Qué es el scroll infinito y cómo funciona?

El scroll infinito se puede describir como una técnica que permite cargar y visualizar progresivamente más contenido en una página web a medida que se avanza con el scroll, una acción que en teórica no tiene fin: al llegar a la parte de abajo de la web se carga y se visualiza más contenido, de forma que siempre podemos seguir bajando.

Se trata de un sistema alternativo al mecanismo de paginación para mostrar listados de resultados, que se ha puesto muy de moda gracias a las redes sociales -como Twitter, Facebook o Pinterest- que emplean este sistema.

Lo más habitual para implementar un scroll infinito es utilizar AJAX (Asynchronous JavaScript And XML), una técnica de desarrollo web muy utilizada en sitios interactivos cuyos contenidos cambian sin necesidad de tener que recargar la página.

Para los más curiosos el scroll infinito funciona de la siguiente manera:

1. Se carga la página web en el navegador del usuario.
2. Cuando al accionar el scroll se llega al final de la página una función de JavaScript se ejecuta y solicita al servidor nuevo contenido.
3. Cuando el servidor suministra este nuevo contenido otra función JavaScript lo inserta al final de la página web.
4. El usuario puede entonces ver este nuevo contenido e interaccionar con él.

Habitualmente los nuevos contenidos se solicitan al servidor y se almacenan en caché, antes de que el usuario llegue al final de la página, para evitar demoras en su carga.

2. ¿Cuándo o por qué puede ser un problema en SEO?

Se ha explicado que lo más habitual es implementar el scroll infinito mediante AJAX y siempre que hay JavaScript por medio debemos estar atentos y revisar que los buscadores puedan acceder a los contenidos situados “detrás” de las funciones de este lenguaje.

De forma intuitiva en sencillo pensar que si el contenido se carga progresivamente a medida que el usuario acciona el scroll, puedan existir problemas con las arañas de los buscadores, al no poder emular esta acción (son robots!) y por tanto solo van a poder acceder a los contenidos ubicados en la parte superior.

Es cierto que en los últimos años ha mejorado mucho la capacidad de los buscadores para interpretar JavaScript y acceder al contenido ubicado detrás de este código. Diversos experimentos reportan resultados favorables indexado contenido -solo accesible a través de JavaScript- siempre que estos se incluyan en el código HTML o en el propio fichero js.

Por el contrario, en el caso del scroll infinito deberemos proveer algún sistema específico si queremos que sea rastreable y que se indexe en su totalidad.

3. El scroll infinito y la usabilidad

En general se ha tendido a atribuir siempre efectos beneficiosos al scroll infinito, especialmente en dispositivos  móviles dónde es más fácil utilizar el scroll con los dedos que hacer clic en un paginado convencional.

En la práctica podemos encontrar casos muy notables de éxito y de fracaso tras su implementación:

• Éxito: Tras la puesta en marcha del scroll infinito en Time se reportó una disminución de la tasa de rebote del 15%.
• Fracaso: Esty tuvo que dar marcha atrás después de haber migrado a scroll infinito al ver como disminuían los clics de los usuarios en sus productos.

Estos dos ejemplos pueden ilustrar bien que no existe una verdad absoluta,  siendo o no beneficioso el scroll infinito en función especialmente de: 1) el tipo de sitio web y 2) el tipo de contenidos.

¿Cuándo suele funcionar bien el scroll infinito?

El scroll infinito se ha hecho popular de la mano de las redes sociales y será en sitios web de este tipo dónde mejor puede funcionar, ya que:

1. No existe una fuerte jerarquía en la información y todos los contenidos son relativamente homogéneos.
2. Mostrar contenido sin interrupción es compatible con la finalidad del usuario en el sitio. Frecuentemente se trata de webs donde se entra a “ojear”, “curiosear”, etc..
3. Existe una actualización constante de información.

Un sitio web que muestre fotografías sin jerarquía o una revista con artículos sin jerarquía (el usuario accede más a leer lo que se encuentre que a buscar una información concreta), serían ejemplos de sitios dónde el scroll infinito puede funcionar bien y mejorar la experiencia de usuario.

En estos casos el tiempo de estancia en la página suele aumentar  -el scroll tienta, el usuario no pierde la esperanza de encontrar algún contenido de su interés- y esto es un factor favorable desde la óptica del posicionamiento.

¿Cuándo puede dar problemas el scroll infinito?

Cuando el exceso de información y contenidos es poco compatible con la finalidad que el usuario busca en la web, por ejemplo:

1. En la búsqueda de una información concreta, las jerarquías y las estructuras de navegación ayudan a orientar al usuario.
2. Para comparar ítems la paginación supone una ventaja ya que permite recordar mentalmente dónde está cada elemento.
3. Cuando hay que tomar una decisión el scroll infinito introduce exceso de optimismo, desorienta y puede agotar al usuario.

Una tienda online debería pensar bien si el scroll infinito es su mejor opción, particularmente si su catálogo es amplio. Las categorias y paginación estándar puede ayudar al usuario a encontrar antes lo que busca, permite dimensionar mentalmente las alternativas disponibles y ayudar a comparar.

Entonces el scroll infinito, ¿siempre va mal en ecommerce? No necesariamente. Si tuviese una tienda de regalos posiblemente probaría con un scroll infinito, también estudiaría especialmente la opción si un gran número de usuarios proceden de dispositivos móviles.

4. El scroll infinito amigable con el SEO

Si ya hemos decidido que en nuestra web los mejor es poner en marcha un scroll infinito debemos entonces asegurar que esto no va a suponer ningún impacto negativo en SEO.

Diversas alternativas permiten implementar con éxito un scroll infinito que no solo no perjudique al SEO sino que indirectamente mejore el posicionamiento del sitio al aumentar el tiempo de permanencia del usuario y disminuir la tasa de rebote.

Recomendación oficial de Google

La recomendación oficial de Google sobre el scroll infinito se puede consultar en el Blog para Webmasters (además de en diversos post en español dónde han traducido y explicado la información suministrada por el buscador).

El sistema consiste básicamente en utilizar la API History de HTML5 (métodos replaceState y/o pushState) que  permite manipular el  historial del navegador (introducir o eliminar contenidos y avanzar o retroceder por el  mismo). Así por ejemplo replaceState permitirá modificar la URL en el navegador sin necesidad de recargar la página.

Con este sistema será posible conformar una serie de segmentos (o páginas virtuales podríamos decir) a partir de la página con scroll infinito. Esta imagen resume  la transformación que propone Google:Se trata entonces de:

1. Dividir el contenido en segmentos únicos que no se solapen.
2. Tratar a cada uno de estos segmentos como una página individual, asignando una URL diferente a cada uno. Estas URL deben tener una estructura determinada.
3. Incluir en el head de estas páginas las etiquetas rel=»next» y rel=»prev, para ayudar a Google a entender la secuencia de páginas.

Podemos ver dos casos prácticos de esta implementación aquí (fíjate en ambos casos cómo cambia la URL al avanzar con el scroll):

• En esta web hay una demo.
• Aquí hay una implementación real.

Esta solución no parece técnicamente sencilla y hará falta contar con un desarrollador que conozca la API History. Como alternativa podemos apoyarnos en algún plugin que facilite esta tarea:

• No lo he analizado a fondo pero una alternativa interesante puede ser  “SEO-friendly jQuery Infinite Scroll Plugin“

Otras alternativas

En la web se encuentran otros sistemas que a pesar de no ser los oficialmente recomendados pueden resultar interesantes en algunos casos.

1. Mejora progresiva: En función de las características del navegador se muestra un contenido distinto.

Se trata de incluir un menú de navegación con paginado convencional que solo se mostrará a aquellos usuario sin capacidad para ejecutar JavaScript (contenedor noscript). Alternativamente el paginado puede estar siempre presente en la página pero ocultarse con el scroll infinito; esta variante se puede implementar mejor sin incurrir en cloaking.

Un ejemplo de este tipo de implementación puede verse en Mashable, si bien va más allá de incluir un paginado ya que añaden todo un índice por años de sus contenidos, accesible solo en la navegación sin JavaScript.

Usando Web Developer (Chrome / Mozilla) o alguna extensión similar se puede desactivar fácilmente el JavaScript del navegador y comprobar cómo se muestra la home de Mashable en cada caso.

2. Incluir un Sitemap: Un archivo, idealmente en XML, que lista todos los contenidos del sitio web que desemos que sean indexados por el buscador.

En una solución obvia y simple, aunque no ideal. Si no podemos proveer una solución que asegure que es posible un rastreo completo del sitio web, al menos debemos asegurarnos que los buscadores disponen de un índice que pueden recorrer para rastrear todos los contenidos. Adicionalmente usar una estructura de enlaces internos robusta (menús, migas de pan,  etiquetas,… ).

5. Conclusiones

• El scroll infinito es un recurso de diseño de interacción en los sitios web cada vez más usado. El propio Google lo utiliza en su buscador de imágenes, si bien en el buscador convencional se mantiene el tradicional paginado.
• Muchas webs pueden mejorar la experiencia de usuario, y por extensión el SEO, implementando un scroll infinito, pero no se trata de una solución aconsejable de forma universal.
• Un test A/B puede ser la mejor opción para decidir si el scroll infinito es la mejor alternativa para un sitio web que ya esté en funcionamiento.
• Diseñadores y desarrolladores web deben conocer las implicaciones SEO de esta técnica y utilizar algunos de los sistemas propuestos para implementarla sin dañar el posicionamiento.
• Los profesionales del SEO deben conocer las implicaciones que el scroll infinito puede tener en el rastreado del sitio y cuáles son las alternativas existentes. Se recomienda siempre realizar una auditoría  de indexabilidad.