¿Qué son los atributos "rel=next" y "rel=prev" y cómo afectan a tu tienda online?
¿Sabes qué son el "rel=next" y "rel=prev" y cómo funciona la paginación de tu PrestaShop?
¿Sabías que si no está bien configurado puedes perder posicionamiento? ¿Conoces los últimos cambios que está haciendo Google al respecto?
Soy consciente de que al comprender cómo crear una tienda online o sitio web corporativo, la programación la tenemos que orientar a todas las políticas y recomendaciones del buscador.
Ante esta premisa, todos estamos a expensas de sus cambios y caprichos, pero:
¿Sabías que los últimos cambios de Google pueden afectar a tu PrestaShop?
La paginación "rel=next" y "rel=prev" ha sido siempre uno de los puntos de mayor discusión por parte de los especialistas en SEO, y cada uno tiene una opinión sobre ello, pero está claro que si no lo hacemos correctamente puede penalizarnos por contenido duplicado.
Es por esto, que debemos adaptar nuestras tiendas a las nuevas normas o consejos del gigante, en este post te voy a explicar que se estaba haciendo hasta ahora y como hay que hacerlo en adelante.
¿Qué son los atributos rel = prev /next de paginación?
Las denominaciones rel="next" y rel="prev" son atributos HTML que se emplean en desarrollo web para indicarle a los buscadores qué relación existe entre las páginas de una secuencia.
Éstas son empleadas en el blog de un sitio web, para así indicar la relación existente entre una página de esta sección y la siguiente/anterior.
Por ello, en el argot del día a día, rel="next" y rel="prev" se llaman "atributos de paginación", que facilitan la legibilidad de éstos al buscador.
¿Qué novedades existen acerca de la utilidad del rel="next" y rel="prev"?
El pasado 21 de Marzo como novedad de primavera, el buscador anunció en la cuenta de twitter de Google Webmaster que retiran estos atributos.
Lo que expone este tuit es que deciden retirar las etiquetas rel=prev y rel=next para las paginaciones debido a sus estudios realizados, en los que dicen que los usuarios prefieren ver todos los productos en una sola página siempre que se pueda.
Además de esto, marcan que dependiendo de la web, es bueno utilizar paginación o no, ya que ellos en su megabuscador utilizan la paginación,... un poco absurdo ¿no?
En resumen, recomiendan que muestres todos los productos en una sola página siempre que puedas, si no, que dejes la paginación pero no le va hacer caso a los atributos rel.
Esto es fácil hacerlo decirlo para páginas pequeñas con pocos productos por categoría, pero,
¿Cómo interpreto esta directiva si tengo un eCommerce?
Los que tenemos tiendas online, nos preguntamos si los que tenemos webs con más 50 productos por página, esta novedad es aplicable o no...
¿No empeora la velocidad y, por lo tanto, el posicionamiento orgánico?
Efectivamente, cuanto más contenido se muestre, más lenta cargará la web y peor experiencia de usuario tendrán nuestros visitantes.
Esto indica que vamos a mejorar la experiencia mostrando todo en una sola página, pero a su vez la empeoramos debido a la velocidad de carga.
Si yo tengo que elegir, prefiero que la web cargue rápido y que esté paginada, obviamente lo peor es que cargue lento y tenga paginación cada 10 productos.
Aquí es donde tenemos que valorar qué hacer en nuestro PrestaShop, o si podemos llegar a un término medio, por eso dice Google que dependiendo si se puede o no quitar la paginación.
¿Cómo funciona la paginación de PrestaShop?
Este tema nunca ha sido su fuerte, ya que la mayoría de las plantillas no incorporaban las etiquetas rel=”prev” y rel=”next”, como recomendaba Google hasta el 21 de Marzo.
Estos atributos insertados en la etiquetas link de HTML, indicando a los buscadores la relación entre diferentes páginas de una secuencia con la siguiente URL de la paginación y la anterior a la página actual.
Una forma sencilla de decirle a los motores de búsqueda que eso era una paginación y que lo tuviese en cuenta, y además de esto teniamos que asignar la URL canonical hacia sí mismo.
» Ejemplo de cómo usar rel=”prev” y rel=”next”
Para verlo más claro, vamos a poner un ejemplo de cómo se realizaba:
-
Página 1 de la categoría:
<link rel="next" href="https:// www. tutorialespresta.com/tutoriales/pagina-2.html">
<link rel="canonical" href="https:// www. tutorialespresta.com/tutoriales/pagina-1.html"/>
- Página 2 de la categoría:
<link rel="prev" href="https:// www. tutorialespresta.com/tutoriales/pagina-1.html">
<link rel="next" href="https:// www. tutorialespresta.com/tutoriales/pagina-3.html">
<link rel="canonical" href="https:// www. tutorialespresta.com/tutoriales/pagina-2.html"/>
Esto se ha tenido que cambiar en muchos PrestaShop, modificando el código marcando los atributos rel y el canonical, ya sea con un módulo o manualmente.
Ya nos olvidamos de esto y si lo tienes realizado en tu PrestaShop ya no importa, simplemente Google no lo tiene en cuenta.
¿Por qué Google ha eliminado la necesidad de usar rel=”prev” y rel=”next”?
Este cambio ha creado mucha polémica al respecto sobre este asunto el último mes, algo que Google documentó cómo realizarlo correctamente para ellos entender la paginación y no tener contenido duplicado, y de repente ha decidido cargárselo.
Nadie sabe las intenciones reales que Google tiene con sus cambios, pero, desde twitter el propio John Mueller afirma que no se ha estado usando para la indexación en los últimos años, y por eso ha decidido quitarlo completamente.
Incluso han eliminado la documentación y páginas que Google hablaba sobre como implementarlo, dando ahora un 404 estas urls.
Por lo tanto, según lo que comenta John Mueller, llevan mucho tiempo sin utilizar estos atributos (y mientras, todos los que tenemos o gestionamos sitios web, implementándolo sin realmente saber que no servía para nada).
Por ello, de sus palabras se evidencia que nos afectará lo mismo tenerlo que no tenerlo, en cuanto a la indexación se refiere.
Y los responsables de tiendas online, ¿ahora qué hacemos?
Lo que ha dicho John es que no utilicemos la paginación en la medida de lo posible, vamos que no dicen nada claro, si podemos mostrarlo todo en una página mejor.
Esto es realmente mejor para la usabilidad de la tienda, pero en la mayoría de la ocasiones en inviable por la cantidad de productos a mostrar.
Si mostramos muchos productos en nuestra página de categoría, el tiempo de carga de nuestra web va a empeorar, y esto es un factor muy importante para el posicionamiento, la conversión y la usabilidad.
Además de esto, cuando se muestra mucho contenido, el navegador suele tener un límite dependiendo de la potencia del ordenador, y puede ser que se quede colgado la ejecución de la página y deje de responder nuestro navegador.
Por ello tenemos dos opciones para tratar nuestras paginaciones:
- Dejar la paginación como lo hemos hecho hasta ahora, con un sentido lógico para los usuarios y con el canonical para evitar el contenido duplicado
- Utilizar el scroll infinito para que siga cargando los productos conforme vas haciendo scroll hacia abajo.
- Implementar el scroll infinito en nuestros eCommerce a priori parece ser la mejor solución, aunque tenemos que realizar algunos ajustes SEO que tenemos que tener en cuenta.
¿Cuándo debemos usar el scroll infinito en nuestro eCommerce?
En los eCommerce hay que pensar bien si debemos de implementar esta funcionalidad o no, si tenemos un catálogo de productos muy amplio el scroll infinito suele despistar y aburrir al usuario.
Sin embargo, una buena estructura de categoría y su paginación puede ayudar a que el cliente encuentre de forma más fácil lo que está buscando.
Cuando estamos buscando un producto y hay mucha cantidad de productos que por más scroll que hagamos, no nos dejan de salir, puede estresar al cliente y ocasionar el efecto de abandono.
Pero si este mismo usuario ve que hay mucha paginación en la categoría, puede que filtrase más su búsqueda para ir al producto más concreto.
Entonces, ¿cuándo debemos de utilizarlo?
Tenemos que ponernos en la lógica del cliente y ver si es recomendable dependiendo de la cantidad de productos que le vamos a mostrar y cuando se van a mostrar.
Además, debido al uso de apps ya estamos muy acostumbrados a utilizar esta tecnología en el móvil pero no tanto en el ordenador, por lo que si nuestra tienda tiene la mayoría de tráfico móvil, si puede ser interesante utilizar esta técnica.
¿Cómo implementar un "scroll infinito" en PrestaShop?
Para implementar en nuestro PrestaShop tenemos varios módulos que hacen este trabajo y no tenemos que tocar ni una línea de código, no hay mucha variedad pero hace dicha función sin problemas.
Si nos vamos a la web de addons de PrestaShop y buscamos por “infinite scroll”, veremos todos los módulos que tenemos disponibles, entre ellos, yo he podido probar en diferentes proyectos los siguientes:
- Módulo Infinite Scroll Premium
- Módulo Knowband - Desplazamiento infinito
- Módulo Webkul Infinite Scroll | Automatic Load Products
He de reconocer que todos los que he probado realizan el funcionamiento de paginación con scroll correctamente, y no he visto más modificaciones que quizás el poder modificar el aspecto de los botones, textos, etc.
Pero lo que es la funcionalidad es prácticamente la misma.
Por lo tanto, con cualquiera de estos o de los demás módulos disponibles en el addons de PrestaShop, nos sirve para implementar esta funcionalidad de forma sencilla en nuestro eCommerce.
¿El scroll infinito es bueno para el SEO?
Si se hace de forma correcta, sí lo es, además, según algunos estudios mejora la tasa de rebote y aumenta la permanencia en la página.
El gran problema del scroll infinito a nivel de SEO es que el robot de Google y los demás bots, no son capaces de realizar el scroll para que sigan apareciendo productos, y no son visibles para Google, por lo que no se indexan correctamente.
Para asegurarnos que el scroll infinito no nos perjudicará a nuestro SEO y que Google puede ver todos nuestros productos de forma correcta, tenemos que seguir las recomendaciones de Google para que lo indexe de forma correcta.
Google deja un manual explicativo en inglés sobre cómo realizarlo y sus recomendaciones en el Blog de Webmaster, pero ahora lo vamos a explicar.
El método que hay que utilizar consiste en utilizar la History API HTML5, las APIs pushState, replaceState y popState proporcionan un control detallado sobre el funcionamiento del botón de página anterior y la URL que se muestra al usuario en contenidos dinámicos.
Este es el truco, decirle al navegador cual es la página anterior y sobre todo, cambiar la url del navegador al realizar el scroll, de esta forma Google podrá escanear las diferentes urls donde tenemos productos y los usuarios normales podremos ver todos los productos haciendo scroll.
Si se está realizando bien cuando hacemos scroll y nos carga lo que sería la segunda página, la url de la web debe de cambiar como si estuviésemos en la página 2, y así con todas las demás.
Podemos ver un ejemplo del scroll infinito correctamente implementado en una página creado por Webmaster Trends Analyst, John Mueller.
Como vemos en el ejemplo, conforme vamos bajando, la URL va cambiando de http://scrollsample.appspot.com/items a http://scrollsample.appspot.com/items?page=2
Con estos ajustes, podemos utilizar el scroll infinito en nuestro PrestaShop sin tener problemas de SEO ni de indexación.
Pero, ¿los módulos anteriores lo tienen implementado?
Por desgracia, no he encontrado ni probado ningún módulo para PrestaShop que se adapte a estas modificaciones a nivel de SEO, por lo que tendremos que implementar o que algún programador especialista lo implemente en nuestra tienda.
Conclusión
Mi conclusión sobre este tema del "rel=next" y "rel=prev", es que no tenemos que obsesionarnos con la paginación, si ya tenemos implementada los atributos rel en nuestro PrestaShop y no le vemos ventajas en el scroll infinito, déjalo como está.
Si eres inquieto, puedes probar a cambiar la paginación a scroll infinito y analizar con Google analytics si en este caso se han mejorado las estadísticas.
Y si no es así, volver al estado anterior, ya que tus clientes están más acostumbrados a la paginación y lo ven con buenos ojos.
Al final tenemos que hacer diversas pruebas, porque no hay una regla definitiva para todas las tiendas y cada clientela es diferente.
Imágenes principales (elements) By Freepik.
