¿Qué son las migas de pan (breadcrumbs) de una web?

Las ves encima del título de casi cualquier ficha de producto: Inicio › Mujer › Camisas › Camisa de lino. El nombre viene del cuento de Hansel y Gretel, que iban dejando migas para encontrar el camino de vuelta, y en inglés se llaman igual, breadcrumbs. En una tienda hacen dos trabajos a la vez. Orientan a quien llega a una ficha desde un buscador sin haber pasado por la portada, y le dicen a Google en qué parte del catálogo está esa página. Son navegación y datos estructurados a la vez, y lo que importa es que digan lo mismo en los dos sitios.

Cómo funcionan

Lo que ve el visitante. El W3C, en su guía de patrones de accesibilidad, define las migas como una lista de enlaces a las páginas padre de la página actual, en orden jerárquico. Pide tres cosas: que la lista vaya dentro de una región de navegación, que esa región tenga una etiqueta (con aria-label o aria-labelledby) y que el enlace a la página actual lleve aria-current="page", para que un lector de pantalla anuncie dónde estás.⁠^{[1]W3C, WAI-ARIA Authoring Practices Guide. Breadcrumb Pattern} Google describe la misma idea desde el otro lado: las migas indican la posición de la página en la jerarquía del sitio, pueden ayudar a entenderlo y explorarlo, y permiten subir un nivel cada vez empezando por la última miga.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

Qué jerarquía enseñan. Aquí está la decisión que más se equivoca. Google recomienda que las migas representen el camino típico de un visitante hasta la página, en lugar de copiar la estructura de la URL. No hace falta incluir el nivel del dominio ni la propia página, y una página a la que se llega por caminos distintos puede declarar más de una ruta: en el ejemplo de Google, la misma página de premios literarios cuelga de «Libros › Ciencia ficción» y también de «Literatura».⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

Lo que lee el buscador. Las migas se marcan con el tipo BreadcrumbList de Schema.org, que el vocabulario define como un ItemList formado por una cadena de páginas enlazadas, descritas normalmente por su URL y su nombre, y que suele terminar en la página actual. La propiedad position es la que reconstruye el orden, empezando por 1.⁠^{[3]Schema.org. BreadcrumbList} Google pide un BreadcrumbList con al menos dos elementos de tipo ListItem, cada uno con tres propiedades: item (la URL de la página de esa miga), name (el texto que ve el visitante) y position (su lugar en la ruta, donde 1 es el principio). La última miga puede ir sin item: entonces Google usa la URL de la página que la contiene.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

Lo que ha cambiado en Google. El 23 de enero de 2025, Google dejó de mostrar las migas en los resultados de búsqueda en móvil, en todos los idiomas y regiones, porque en pantallas pequeñas se cortaban y no resultaban tan útiles. En móvil, la URL visible del resultado se reduce al dominio; en ordenador sigue mostrando el dominio y la ruta de migas. Google aclaró que quien usa el marcado no tiene que hacer nada, porque lo sigue admitiendo para los resultados de ordenador, y que el informe de resultados enriquecidos de migas en Search Console y la Prueba de resultados enriquecidos siguen disponibles.⁠^{[4]Blog de Google Search Central. Simplifying the visible URL element on mobile search results} Su documentación lo dice así a día de hoy: la función está disponible en ordenador en todas las regiones e idiomas donde funciona la Búsqueda.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

Y cada miga es un enlace. Google usa los enlaces como señal para decidir la relevancia de las páginas y para encontrar páginas nuevas que rastrear, y en general solo puede seguir un enlace si es un elemento <a> con atributo href.⁠^{[5]Google Search Central. Link best practices for Google} Unas migas hechas con botones que navegan por JavaScript se ven igual, pero un rastreador puede no seguirlas.

En una tienda

La ruta visible y su marcado, uno debajo del otro. Ejemplo ficticio: la tienda, las categorías y las direcciones son inventadas.

<nav aria-label="Migas de pan">
  <ol>
    <li><a href="https://www.example.com/">Inicio</a></li>
    <li><a href="https://www.example.com/mujer">Mujer</a></li>
    <li><a href="https://www.example.com/mujer/camisas">Camisas</a></li>
    <li>
      <a href="https://www.example.com/camisa-lino-calella" aria-current="page"
        >Camisa de lino Calella</a
      >
    </li>
  </ol>
</nav>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Inicio",
        "item": "https://www.example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Mujer",
        "item": "https://www.example.com/mujer"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Camisas",
        "item": "https://www.example.com/mujer/camisas"
      },
      { "@type": "ListItem", "position": 4, "name": "Camisa de lino Calella" }
    ]
  }
</script>

Se comprueban posición por posición: cada name es el texto de una miga visible, cada item es la dirección de su enlace, y el orden es el mismo. La última miga va sin item, porque es la página en la que estás. Fíjate en que la URL de la ficha, /camisa-lino-calella, no contiene /mujer/camisas, y no pasa nada: las migas describen el camino del visitante, no la dirección.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data} Si la misma camisa está también en la sección de rebajas, la ficha puede declarar una segunda ruta en lugar de elegir una al azar.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

En una ficha publicada con Clione, el BreadcrumbList va dentro del mismo @graph que los nodos Organization, WebSite y Product.

Cómo comprobarlo

1. Lee la ruta visible de una ficha y abre su código fuente: cada miga, salvo la última, tiene que ser un enlace <a> con href.⁠^{[5]Google Search Central. Link best practices for Google}
2. Pasa la URL por la Prueba de resultados enriquecidos. Te dice qué tipos de resultado enriquecido encuentra, las migas entre ellos, y con qué errores o sugerencias.⁠^{[6]Ayuda de Search Console. Rich Results Test}
3. Compara miga por miga el name, el item y la position de cada elemento con lo que ve el visitante, y confirma que hay al menos dos.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}
4. Vigila el informe de migas de Search Console después de cambiar de tema o de plantilla. Google avisa de que un aumento de elementos no válidos tras un cambio suele señalar una plantilla que no funciona.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}
5. Busca tu ficha en Google desde un ordenador, no desde el móvil: es donde Google sigue enseñando la ruta de migas bajo el título.⁠^{[4]Blog de Google Search Central. Simplifying the visible URL element on mobile search results}

Concepto cercano: enlazado interno

Las migas son una forma de enlazado interno, pero no son todo el enlazado interno. El enlazado interno es el conjunto de enlaces entre páginas de tu propio sitio: el menú, los productos relacionados, los enlaces dentro de una descripción y también las migas. Google lee el texto de cada enlace como una pista sobre la página de destino, para las personas y para él.⁠^{[5]Google Search Central. Link best practices for Google} En las migas ese texto es el nombre de cada página de categoría, así que un buen nombre de categoría trabaja dos veces: orienta al visitante y describe la página a la que apunta. Lo que distingue a las migas del resto del enlazado es su orden: no enseñan todo el sitio, como un menú, sino el camino hasta la página en la que estás.

Para seguir, la ruta de lectura de datos estructurados ordena el resto de términos, y la guía para auditar los datos estructurados de una ficha incluye las migas en la revisión de una ficha entera.