Breadcrumbs

El breadcrumb (literalmente “miga de pan”, en referencia al cuento de Hansel y Gretel) es el elemento de navegación que muestra al usuario su posición actual dentro de la jerarquía del sitio, presentado como una secuencia de enlaces desde la raíz hasta la página actual.

Es uno de los elementos de navegación más útiles en sitios con jerarquías profundas y uno de los que más información aporta sobre la calidad de la arquitectura subyacente: si el breadcrumb no puede construirse de forma coherente, la arquitectura tiene un problema.

Por qué el breadcrumb importa

Orientación: El breadcrumb responde en todo momento a la pregunta “¿dónde estoy?”. En páginas a las que el usuario ha llegado directamente (desde un buscador, desde un enlace externo), sin haber navegado desde la portada, el breadcrumb es el único elemento que le sitúa dentro de la estructura del sitio.

Navegación ascendente: El breadcrumb permite al usuario subir por la jerarquía sin tener que volver a la portada. Desde un artículo específico, puede ir a la sección o a la categoría con un solo clic.

Señal de estructura: El breadcrumb visibiliza la arquitectura del sitio. Si la arquitectura está bien diseñada, el breadcrumb es coherente y tiene sentido. Si la arquitectura tiene problemas, el breadcrumb lo revela: rutas demasiado largas, jerarquías incoherentes, contenidos sin posición clara.

Resultados enriquecidos: Con el marcado Schema.org correcto, Google puede mostrar el breadcrumb directamente en los resultados de búsqueda, reemplazando la URL completa por la ruta de navegación. Esto hace el resultado más legible y más informativo.

Tipos de breadcrumb

Refleja la posición del contenido en la jerarquía del sitio. Cada nivel de la ruta es un enlace a la página de ese nivel.

Inicio > Fundamentos > Jerarquía vs. Taxonomía

En HTML semántico:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/fundamentos/">Fundamentos</a></li>
    <li aria-current="page">Jerarquía vs. Taxonomía</li>
  </ol>
</nav>

El uso de <ol> (lista ordenada) es semánticamente correcto: el breadcrumb es una secuencia ordenada. El atributo aria-current="page" en el último elemento indica a los lectores de pantalla que es la página actual.

Muestra los filtros aplicados en una navegación facetada. Es habitual en tiendas y catálogos.

Inicio > Tienda > [Color: Azul] > [Talla: M]

Los elementos entre corchetes son filtros activos que el usuario puede eliminar individualmente.

Refleja el camino que el usuario ha recorrido en esa sesión. Es menos habitual y más problemático: el camino navegado puede ser no lineal y confuso, y no refleja la estructura del sitio sino el comportamiento del usuario.

Cuándo usar breadcrumb y cuándo no

Usar breadcrumb:

  • En sitios con más de dos niveles de jerarquía.
  • En cualquier página que no sea la portada.
  • En sitios donde los usuarios llegan frecuentemente a páginas internas desde buscadores o enlaces externos.

No usar breadcrumb (o usarlo con cautela):

  • En la portada: la portada no tiene posición en la jerarquía porque es la raíz.
  • En sitios de una sola capa (sin jerarquía real): si todas las páginas están al mismo nivel, el breadcrumb solo muestra “Inicio > Página actual”, lo que aporta muy poco.
  • En flujos de proceso (checkout, formularios multipaso): en estos contextos, el breadcrumb de proceso (paso 1 de 3) es más útil que el jerárquico.

La relación entre breadcrumb y URL

En una arquitectura bien diseñada, el breadcrumb y la URL deben ser coherentes. Si la URL es /formacion/cursos/wordpress/taxonomias/, el breadcrumb debería ser Inicio > Formación > Cursos > WordPress > Taxonomías.

Cuando esta coherencia no existe —el breadcrumb muestra una ruta diferente a la que sugiere la URL— hay un problema de arquitectura. Las causas habituales:

  • El contenido tiene una URL plana (/taxonomias-en-wordpress/) pero el breadcrumb intenta reflejar una jerarquía que no está en la URL.
  • La URL incluye un segmento de categoría que se puede cambiar sin cambiar la URL real del contenido.
  • El CMS genera breadcrumbs basados en la categoría principal del contenido, que puede ser distinta del segmento de URL.

La coherencia entre URL y breadcrumb es una señal de que la arquitectura es consistente. La incoherencia es una señal de que hay deuda técnica.

Implementación con datos estructurados

El marcado Schema.org para breadcrumbs (BreadcrumbList) permite que Google los muestre en los resultados de búsqueda:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Inicio",
      "item": "https://www.arquitecturadelainformacion.es/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Navegación",
      "item": "https://www.arquitecturadelainformacion.es/navegacion/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumbs"
    }
  ]
}
</script>

El último elemento no necesita la propiedad item (ya que es la página actual). Los demás sí deben tenerla con la URL completa.

En WordPress: Los plugins de SEO (Yoast, Rank Math) generan automáticamente el marcado Schema.org del breadcrumb si el tema muestra un breadcrumb. Yoast también tiene su propia función de breadcrumb (yoast_breadcrumb()) que genera tanto el HTML semántico como los datos estructurados.

CSS para breadcrumbs

Un breadcrumb usable necesita separadores visuales claros entre niveles y debe colapsar correctamente en pantallas pequeñas:

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.breadcrumb li + li::before {
  content: "›";
  padding: 0 0.5rem;
  color: #666;
}

.breadcrumb [aria-current="page"] {
  color: #333;
  font-weight: 500;
}

.breadcrumb a {
  color: #0066cc;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

Para profundizar