Un breadcrumb mal hecho falla casi siempre de una de estas dos formas: se ve en pantalla pero no lleva marcado que Google pueda leer, o lleva dos marcados distintos porque el tema y el plugin de SEO lo generan por separado. Ninguna de las dos se detecta mirando la página. Aquí está el código mínimo para que la ruta funcione con lector de pantalla y el JSON-LD que entiende el buscador, con las reglas oficiales de cada uno.
El HTML que esperan los lectores de pantalla
El patrón que documenta el W3C en sus WAI-ARIA Authoring Practices es corto y tiene tres reglas. La ruta va dentro de una región de navegación, esa región lleva una etiqueta propia con aria-label o aria-labelledby, y el enlace a la página actual lleva aria-current="page". Si el último elemento no es un enlace, ese atributo pasa a ser opcional.
<nav aria-label="Ruta de navegación">
<ol class="breadcrumb">
<li><a href="/">Inicio</a></li>
<li><a href="/tienda/">Tienda</a></li>
<li><a href="/tienda/audio/">Audio</a></li>
<li><a href="/tienda/audio/auriculares-xz/" aria-current="page">
Auriculares XZ
</a></li>
</ol>
</nav>La lista ordenada importa porque la secuencia tiene un orden real: cada eslabón está por encima del siguiente. El separador visual, sea una barra o un chevrón, se pinta con CSS y no se escribe dentro del HTML, para que el lector de pantalla no vaya leyendo «mayor que» entre cada nivel.
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0 }
.breadcrumb li + li::before { content: "�"; margin-right: .5rem; color: #6B7896 }
.breadcrumb a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }El foco visible del último bloque no es un adorno. Quien navega con teclado necesita ver dónde está, y los breadcrumbs suelen ser lo primero que se recorre al entrar en el contenido. La misma lógica que aplicamos al crear componentes accesibles con roles ARIA.
El JSON-LD que lee Google
El HTML anterior orienta a las personas, pero al buscador hay que dárselo en BreadcrumbList. La documentación de Google Search Central exige un itemListElement con objetos ListItem, y cada uno con position, name e item.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Inicio",
"item": "https://ejemplo.com/" },
{ "@type": "ListItem", "position": 2, "name": "Tienda",
"item": "https://ejemplo.com/tienda/" },
{ "@type": "ListItem", "position": 3, "name": "Audio",
"item": "https://ejemplo.com/tienda/audio/" },
{ "@type": "ListItem", "position": 4, "name": "Auriculares XZ" }
]
}
</script>El último elemento va sin item a propósito. Google documenta esa excepción: cuando el último eslabón no incluye la propiedad, el buscador usa la URL de la página que contiene el marcado. Incluirla tampoco es un error, pero omitirla evita discrepancias con la URL canónica.
Una página puede declarar varias rutas si se llega a ella por caminos distintos. Google lo contempla y lo ilustra con un producto accesible desde dos jerarquías de la misma tienda. En ese caso se publican varios bloques BreadcrumbList, uno por ruta.
La ruta del usuario, no la de la URL
La recomendación de Google que más se incumple es también la más fácil de aplicar: los breadcrumbs deben representar el camino habitual de un usuario hasta esa página, no reproducir la estructura de carpetas de la URL. Son dos cosas distintas más veces de lo que parece, sobre todo en webs que han crecido a base de reorganizar categorías sin tocar las direcciones antiguas.
De ahí salen también las rutas inventadas: eslabones que no existen como página navegable y que llevan a un archivo vacío o a un 404. Cada nivel del breadcrumb tiene que ser una página real a la que el usuario pueda llegar y quedarse.
El fallo silencioso: dos BreadcrumbList en la misma página
En WordPress este es el problema más frecuente y el que menos se ve. El tema imprime su propio marcado de breadcrumbs y el plugin de SEO, Rank Math o Yoast, añade el suyo. La página termina con dos BreadcrumbList que describen la misma ruta con nombres o URLs distintas, y el buscador tiene que elegir. Lo mismo pasa con constructores visuales que incluyen su widget de migas de pan.
Comprobarlo cuesta un minuto: abrir el código fuente de una ficha de producto o de un artículo y buscar cuántas veces aparece BreadcrumbList. Si sale más de una vez y no son rutas distintas a propósito, hay que desactivar una de las dos fuentes. Lo habitual es dejar la del plugin de SEO, que se mantiene sola con la jerarquía de categorías, y quitar la del tema.
Conviene recordar que el marcado correcto no garantiza nada en pantalla. La propia documentación de Google avisa de que no asegura que las funciones que consumen datos estructurados aparezcan en los resultados de búsqueda. Lo que sí hace el marcado es dejar clara la jerarquía del sitio, algo que también cuenta cuando el contenido se estructura para búsquedas conversacionales.
Dónde colocarlos y cuándo sobran
El sitio esperado es encima del título del contenido y debajo de la cabecera. Esconderlos en móvil es tentador por espacio, pero ahí es justo donde más ayudan, porque el menú principal está plegado y la ruta es la única pista de dónde ha caído quien llega desde un buscador. Una fila con flex-wrap y tamaño de fuente reducido resuelve la falta de ancho sin ocultar nada.
También hay webs donde no aportan. Un sitio plano de cinco páginas, o una landing sin jerarquía por encima, no gana nada con una ruta de un solo nivel. Los breadcrumbs resuelven un problema de profundidad, y sin profundidad no hay problema que resolver.
Preguntas frecuentes
¿El último elemento del breadcrumb debe ser un enlace?
Puede serlo o no. Si es un enlace, lleva aria-current="page" para que el lector de pantalla sepa que apunta a la página actual. Si es texto plano, ese atributo es opcional según el patrón del W3C.
¿Qué propiedades son obligatorias en BreadcrumbList?
Un itemListElement con objetos ListItem, y en cada uno position, name e item. La única excepción es el último eslabón, donde item puede omitirse porque Google usa la URL de la propia página.
¿Puede una página tener varias rutas de breadcrumbs?
Sí. Google admite varios bloques BreadcrumbList cuando a la misma página se llega por jerarquías distintas, algo habitual en tiendas con productos en varias categorías.
¿Los breadcrumbs tienen que coincidir con la estructura de la URL?
No. Google recomienda que representen el camino típico de un usuario hasta esa página en lugar de replicar la estructura de la dirección, que muchas veces refleja decisiones antiguas de organización.
¿Cómo sé si mi web genera el marcado dos veces?
Buscando BreadcrumbList en el código fuente de una página interna. Si aparece más de una vez sin que sean rutas distintas a propósito, el tema y el plugin de SEO lo están publicando por duplicado.
Fuentes
- Google Search Central, Breadcrumb (BreadcrumbList) structured data
- W3C, ARIA Authoring Practices Guide: Breadcrumb Pattern
