¿Qué es la navegación breadcrumb?

Navegación breadcrumb: definición y finalidad

El nombre procede del cuento de Hansel y Gretel: las migas marcan el camino de vuelta. En un sitio web, la navegación breadcrumb muestra dónde se encuentra el visitante en la estructura de páginas y, con cada eslabón de la ruta, ofrece un enlace a un nivel superior. Ayuda a orientarse sobre todo en tiendas, catálogos y páginas de conocimiento con varios niveles.

Los breadcrumbs no sustituyen a la navegación principal, sino que la complementan. Muestran a los buscadores cómo se relacionan las páginas y crean enlaces internos con textos de enlace descriptivos. Precisamente los visitantes que llegan desde un buscador directamente a una subpágina profunda encuentran así, sin rodeos, el camino de vuelta a la vista general.

Tipos y estructura

Se distinguen tres tipos. El más extendido es el basado en la ruta, que muestra la posición en la jerarquía del sitio. El basado en atributos muestra características elegidas, como la categoría o la marca; el basado en el historial, las últimas páginas visitadas, algo poco habitual en sitios web y que más bien dificulta la orientación.

Técnicamente, un breadcrumb consiste en una lista ordenada dentro de un elemento nav con una etiqueta para lectores de pantalla. La página actual está marcada (aria-current=page). Además, puede marcarse con datos estructurados (BreadcrumbList según schema.org) para que Google entienda la jerarquía.

• Ruta desde la página de inicio hasta la página actual
• Separadores como › o /, que no cuentan como texto de enlace
• Todos los niveles enlazados, salvo el actual
• En el smartphone, ahorrando espacio, por ejemplo solo el nivel superior

Ejemplo práctico: mayorista de sanitarios

Un mayorista de sanitarios ofrece 15.000 artículos en cuatro niveles: Inicio › Calefacción › Bombas › Bombas de circulación. Sin breadcrumb, los visitantes que llegan desde la búsqueda aterrizan directamente en una página de producto y no encuentran el camino de vuelta a la categoría. Con breadcrumb y marcado BreadcrumbList llegan con un clic a productos relacionados, y Google reconoce las categorías.

Desde principios de 2025, Google ya no muestra la línea de breadcrumb en los resultados de búsqueda móviles, donde solo aparece el dominio. En el escritorio se sigue mostrando. La utilidad para la orientación y el enlazado interno no se ve afectada, y el marcado sigue ayudando a entender la estructura del sitio.

Ventajas, límites y errores habituales

Los breadcrumbs aportan mejor orientación, menos callejones sin salida y un enlazado interno limpio. En sitios web planos con pocas páginas, la utilidad es escasa, y una variante mal construida puede incluso confundir a los visitantes o dar a los buscadores señales contradictorias. Conviene evitar estos puntos:

• El breadcrumb muestra el historial de clics del usuario en lugar de la jerarquía fija
• El marcado difiere de la ruta visible
• La página actual no es reconocible o es un enlace sin función
• Áreas de clic demasiado pequeñas en el smartphone
• Breadcrumb en sitios de una sola página o muy planos, sin utilidad apreciable

Imple­menta­ción

En WordPress, Shopware y Shopify, muchos temas incluyen breadcrumbs, pero deben corresponderse con la estructura real del sitio. Nano Concepts crea los breadcrumbs de forma accesible y con datos estructurados, para que la jerarquía visible y el marcado coincidan, y los prueba en pantallas pequeñas y con lectores de pantalla.