Los breadcrumbs, también conocidos como "migas de pan" por su traducción del inglés, son una herramienta de navegación que ayuda a los usuarios a entender en qué parte del sitio web se encuentran y cómo pueden regresar a las páginas anteriores. Además de mejorar la usabilidad de tu sitio web, los breadcrumbs también pueden tener un impacto positivo en el SEO. En este artículo, exploraremos todo lo que necesitas saber sobre los breadcrumbs.

¿Qué son los breadcrumbs?

Los breadcrumbs son una herramienta de navegación que muestra la ruta que ha seguido el usuario para llegar a una página específica dentro del sitio web. Por ejemplo, si el usuario está en una página de producto, los breadcrumbs mostrarán la categoría del producto y cualquier subcategoría relacionada.

Es por esto que es muy importante tener correctamente definida la ruta de navegación a través de la página, ya que esa ruta de navegación es la que aparecerá en las migas de pan. Si la ruta de navegación no está definida, los breadcrumbs no tendrán sentido.

Las migas de pan suelen aparecer en la parte superior o inferior de la página y están diseñados para ser fáciles de usar e interpretar por los usuarios.

Tipos de breadcrumbs

Hay tres tipos principales de breadcrumbs, dependiendo del árbol de navegación que quieras seguir:

1. Basados en ubicación

Este tipo muestra al usuario dónde se encuentra dentro del sitio web en relación con otras páginas. Por ejemplo: Inicio > Tienda > Categoría > Subcategoría > Producto.

Este tipo de breadcrumb es el más utilizado, y es muy útil para permitir al usuario moverse fácilmente entre niveles. Haciendo click en la diferente categoría o subcategoría permitiremos al usuario navegar por nuestra página web de una forma rápida.

2. Basados en atributo

Este tipo muestra al usuario cómo llegó a una página según las características o atributos específicos del producto o servicio. Por ejemplo: Inicio > Marca > Tamaño > Color > Producto.

Este tipo de breadcrumb no se utiliza tanto, pero es muy útil cuando trabajamos con tiendas online que tienen productos con muchos atributos, como por ejemplo tiendas de ropa. No son tanto breadcrumbs de navegación sino de confirmación. Le confirman al usuario la elección de variaciones del producto que ha hecho, una vez está en la página de producto.

3. Dinámicos

Este tipo cambia según las acciones del usuario. Por ejemplo, si el usuario utiliza un filtro para buscar productos, los breadcrumbs cambiarán automáticamente para reflejar esos filtros.

Son las migas de pan menos utilizados por su complejidad, y si no se aplican correctamente, lo más probable es que el usuario acabe perdido en unos breadcrumbs que no entienda. Hay que tener mucho cuidado al aplicarlos.

¿Por qué son importantes los breadcrumbs?

Los breadcrumbs tienen varios beneficios tanto para la usabilidad como para el SEO:

1. Mejora la experiencia del usuario

Los usuarios pueden navegar fácilmente por tu sitio web utilizando los breadcrumbs, lo que mejora su experiencia y reduce la frustración al encontrar contenido relevante. El usuario sabe en cada momento en que página está dentro de la estructura de la página, y le permite entender mejor tu contenido.

2. Reduce la tasa de rebote

Al proporcionar una navegación clara y fácil, es menos probable que el usuario abandone tu sitio web después de visitar solo una página (lo que se conoce como tasa de rebote). Cuanto más fácil se lo pongamos al usuario para navegar por nuestra página web, más tiempo permanecerá en ella (siempre que el contenido sea interesante y de calidad) y para eso los breadcrumbs son una gran herramienta.

3. Mejora la accesibilidad

Para aquellos usuarios con discapacidades visuales o cognitivas, los breadcrumbs pueden ayudarles a comprender mejor cómo está organizado tu sitio web y cómo navegar por él.

4. Ayuda al SEO

Los buscadores utilizan información contextual para entender mejor tus páginas y clasificarlas correctamente. Los breadcrumbs proporcionan esa información contextual adicional sobre dónde se encuentra cada página dentro del sitio web.

Tener unas migas de pan basados en ubicación le ayudará a los buscadores a entender la estructura de tu página web, a navegar por ella, y, por lo tanto, hay muchas posibilidades de que se produzca una indexación más rápida y eficaz.

Cómo implementar correctamente los Breadcrumbs

Para implementar correctamente los breadcrumbs en tu sitio web, sigue estos pasos:

Paso 1: Decidir qué tipo utilizarás

Decide qué tipo de breadcrumb es más adecuado para tu sitio web y asegúrate de que sea coherente en todas tus páginas. Yo siempre recomiendo utilizar migas de pan basadas en la ubicación, ya que el resto de tipos son solo aplicables a casos muy específicos, mientras que este tipo se puede aplicar a todas las páginas web para mejorar la navegación.

Paso 2: Colocación

La ubicación más habitual de las migas de pan es debajo del título principal o debajo del encabezado principal o menú principal en cada página, ya que eso permite que todos los usuarios puedan ver donde están antes de acceder al contenido, reduciendo la tasa de rebote.

Pero puedes aplicar la creatividad y poner tus breadcrumbs donde más cuadre dentro del diseño de tu página web. Eso sí, te recomiendo llevar un seguimiento de clicks realizados en las migas de pan y tasa de rebote, para ver si realmente la posición de las migas de pan está siendo efectiva.

Paso 3: Implementación

Si estás utilizando un CMS como WordPress u otro sistema similar, te recomiendo utilizar plugins especializados y gratuitos disponibles para automatizar esta tarea sin requerir grandes conocimientos técnicos.

Los mejores plugins para implementar esta herramienta en WordPress son los plugins de SEO como Yoast SEO o Math Rank, ya que, dentro del abanico de herramientas que presentan estos plugins, las migas de pan son una opción que podemo activar facilmente. Una vez activado, los plugins no permitirán posicionar los breadcrumbs donde queramos en nuestra página a tráves de un shortcode.

En PrestaShop, existen módulos de migas de pan para implementarlas, con el inconveniente de que muchos de ellos no son gratuitos, y PrestaShop no es tan intuitivo.

Por último, si tenemos conocimientos técnicos, siempre podemos implementar unos breadcrumbs a través de programación utilizando HTML y CSS. Esto se lo dejamos a los más expertos.

Consejos adicionales sobre el uso de los breadcrumbs:

• Evita utilizar demasiadas palabras.
• Haz clicables cada uno elementos hasta llegar al inicio.
• Asegúrate siempre revisar periódicamente su funcionamiento.
• No uses migajas duplicadas.
• Puedes utilizar microdatos schema.org/BreadcrumbList junto a Google Search Console.

En conclusión, agregar migas de pan o breadcrumbs a tu sitio puede mejorar significativamente tanto la usabilidad como el SEO general del mismo. ¡Sigue estos consejos prácticos cuando agregues migajas a tu propio sitio para garantizar que sean efectivas desde ambos puntos vista!