Definición:
Un breadcrumb, o miga de pan, es un elemento de navegación secundaria que representa la posición de una página dentro de la jerarquía de un sitio mediante una secuencia ordenada de etiquetas. Normalmente, cada nivel anterior enlaza con una página superior y el último elemento identifica la página actual.
Su función principal es orientar al usuario y facilitar el acceso a niveles más generales. No reproducen necesariamente las páginas visitadas durante la sesión ni sustituyen el menú principal, el buscador o la navegación local.
El breadcrumb resulta especialmente útil en sitios con varios niveles, como comercios electrónicos, medios, bases de conocimiento o catálogos. En una web plana o con muy pocas páginas puede aportar poca información adicional.
Índice de contenidos
Una ruta habitual puede adoptar la forma Inicio > Categoría > Subcategoría > Página actual. Los elementos anteriores permiten subir por la jerarquía y la página actual suele mostrarse como texto sin enlace para evitar una acción que lleve al mismo destino.
La secuencia debe representar una estructura comprensible para el usuario. No tiene que copiar literalmente las carpetas de la URL ni el recorrido seguido para llegar a la página. Una persona puede acceder desde un buscador o un enlace externo y utilizar las migas de pan para comprender dónde se encuentra.
El breadcrumb describe una relación jerárquica concreta. Una ruta de navegación es un concepto más amplio que puede incluir la secuencia real de páginas, decisiones e interacciones de un recorrido dentro de una web o aplicación.
La clasificación depende de la información que representa la secuencia:
- De ubicación o jerarquía: muestran los niveles superiores de la arquitectura del sitio. Son las más habituales y permanecen estables aunque el usuario llegue por caminos diferentes.
- De atributos: reflejan filtros o propiedades seleccionados, como categoría, marca, tamaño o color. Se utilizan principalmente en catálogos y sistemas de navegación facetada.
- De recorrido o historial: muestran pasos anteriores de una sesión o proceso. Son menos habituales en sitios jerárquicos y no deben confundirse con las migas de ubicación.
Una misma página puede pertenecer a más de una clasificación o sección. En esos casos conviene mostrar una ruta coherente y predecible, basada en la arquitectura y en la relación más útil para comprender el contenido.
Diseño y accesibilidad
El breadcrumb debe poder identificarse y utilizarse sin competir con el contenido principal:
- Ubicación: suelen aparecer cerca del inicio del contenido y en una posición consistente entre páginas equivalentes.
- Etiquetas: cada nivel necesita un nombre breve y descriptivo que coincida con el destino enlazado.
- Separadores: símbolos como
>indican la relación entre niveles, pero no deben formar parte del texto accesible de cada enlace. - Adaptación móvil: el tamaño, el espaciado y el comportamiento responsive deben evitar enlaces difíciles de pulsar o secuencias que ocupen varias líneas innecesarias.
El conjunto puede marcarse como una zona de navegación con una etiqueta accesible y representarse mediante una lista ordenada. Los textos de los enlaces deben describir los niveles de la arquitectura, no utilizarse para insertar palabras clave de manera forzada.
Breadcrumb y SEO
El breadcrumb crea enlaces internos hacia niveles superiores y ayuda a expresar relaciones dentro de la arquitectura. Esto puede facilitar el rastreo y la interpretación del sitio, pero no garantiza mejores posiciones, una reducción de la tasa de rebote ni un aumento del tiempo de permanencia. Su efecto depende de la utilidad real de la estructura y del resto de señales de SEO.
Los buscadores pueden utilizar esta información para mostrar una ruta en el resultado en lugar de una URL completa. Para describirla de forma estructurada se emplea BreadcrumbList, compuesto por elementos ListItem con su posición, nombre y, cuando corresponde, URL. Google mantiene la documentación técnica de breadcrumbs y admite JSON-LD, RDFa y microdatos.
El schema markup debe representar una jerarquía coherente con la navegación y el contenido. Su implementación permite que el buscador procese esa información, pero no obliga a mostrarla ni convierte por sí sola el resultado en un rich snippet. La navegación visible debe seguir siendo comprensible aunque el marcado estructurado no se procese.