≡En resumen
- El breadcrumb trail es la ruta concreta de una página y su implementación en código, no solo el elemento visual.
- En HTML se marca como una lista ordenada dentro de un nav etiquetado, con la página actual indicada con aria-current.
- Para Google se añade un BreadcrumbList con al menos dos ListItem, cada uno con position, name e item.
- Google recomienda que la ruta refleje un recorrido típico del usuario, no que copie la estructura de la URL.
- Lo ideal es generar el HTML y el JSON-LD desde la misma fuente de datos para que nunca se contradigan.
01 ¿Qué es un breadcrumb trail?
| Término | A qué se refiere | Dónde profundizar |
|---|---|---|
| Breadcrumb | El elemento de migas de pan en general: qué es, para qué sirve y su efecto en SEO | Entrada breadcrumb |
| Breadcrumb navigation | El patrón de navegación: tipos, cuándo usarlo y diseño en escritorio y móvil | Entrada breadcrumb navigation |
| Breadcrumb trail | La ruta concreta de cada página y su implementación en HTML y datos estructurados | Esta página |
Si te interesa el concepto general, empieza por la entrada de migas de pan; si estás decidiendo el diseño, por la de breadcrumb navigation. Aquí vamos al código.
02 Anatomía de un breadcrumb trail
| Parte | Ejemplo | En HTML | En BreadcrumbList |
|---|---|---|---|
| Raíz | Inicio | Primer li con enlace a / | Opcional: Google no exige incluir el nivel del dominio |
| Niveles intermedios | Herramientas › Eléctricas › Taladros | li con enlace a cada categoría | Un ListItem por nivel con position, name e item |
| Separador | › | Generado con CSS, no en el texto | No existe en el marcado |
| Página actual | Taladro percutor 18 V | li sin enlace con aria-current="page" | Último ListItem; item es opcional |
03 Cómo marcar el breadcrumb trail en HTML accesible
<nav aria-label="Ruta de navegación" class="breadcrumbs">
<ol>
<li><a href="/">Inicio</a></li>
<li><a href="/herramientas/">Herramientas</a></li>
<li><a href="/herramientas/electricas/taladros/">Taladros</a></li>
<li aria-current="page">Taladro percutor 18 V</li>
</ol>
</nav>
nav con etiqueta
Crea una región de navegación; aria-label la distingue del menú principal para quien usa lector de pantalla.
ol en lugar de ul
Una lista ordenada comunica que el orden importa y el lector anuncia «lista de 4 elementos».
aria-current="page"
Indica cuál es la página en la que estás. La guía WAI-ARIA lo pide en el enlace a la página actual y lo deja opcional si no es enlace.
Sin separadores en el texto
Si escribes > entre enlaces, el lector de pantalla lo leerá en voz alta en cada nivel.
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin: 0 .5em; color: #6b7280; }
El pseudoelemento ::before dibuja el separador sin añadir texto al documento. Con CSS también puedes truncar niveles largos con text-overflow: ellipsis en móvil.
04 Datos estructurados: BreadcrumbList en JSON-LD
El HTML por sí solo no basta para que Google interprete la ruta como resultado enriquecido: necesita datos estructurados. El tipo es BreadcrumbList de Schema.org y Google recomienda JSON-LD, que se inserta en un bloque script independiente del diseño.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Herramientas", "item": "https://ejemplo.es/herramientas/"},
{"@type": "ListItem", "position": 2, "name": "Taladros", "item": "https://ejemplo.es/herramientas/electricas/taladros/"},
{"@type": "ListItem", "position": 3, "name": "Taladro percutor 18 V"}
]
}
</script>
Fíjate en que el trail marcado salta el nivel «Eléctricas»: Google aconseja representar un recorrido típico del usuario y no calcar la URL.
| Propiedad | Dónde | Qué contiene |
|---|---|---|
| itemListElement | BreadcrumbList | Array ordenado de ListItem; se necesitan al menos dos |
| position | ListItem | Número de orden en la ruta, empezando en 1 |
| name | ListItem | Texto del nivel tal como lo ve el usuario |
| item | ListItem | URL absoluta de la página del nivel; opcional en el último elemento |
05 Varias rutas para una página, Microdata y RDFa
Si una página se alcanza por dos caminos lógicos (un libro premiado que está en «Ficción» y en «Premios literarios»), Google admite varios BreadcrumbList en la misma página. Úsalo con moderación: para el usuario sigue siendo mejor mostrar una ruta principal visible.
JSON-LD
Bloque script separado del HTML. Es el formato recomendado y el más fácil de generar desde el servidor.
Microdata
Atributos itemscope, itemtype e itemprop en el propio HTML de la lista. Útil si el tema ya lo trae así.
RDFa
Atributos vocab, typeof y property. Admitido, pero hoy poco habitual en webs nuevas.
06 Implementar el breadcrumb trail en WordPress y en desarrollos a medida
-
1
WordPress con plugin SEO
Yoast SEO y Rank Math generan el trail visible y su BreadcrumbList; se insertan con bloque, shortcode o función PHP en la plantilla.
-
2
WooCommerce
Trae su propia ruta de producto; revisa que no se duplique con la del plugin SEO y define la categoría principal de cada producto.
-
3
Frameworks (Laravel, Next.js…)
Construye un array de niveles a partir del árbol de categorías o de las rutas y pásalo a un componente que pinte el HTML y el JSON-LD.
-
4
Páginas con varias categorías
Guarda una categoría canónica por contenido para que la ruta sea estable.
-
5
Caché y rendimiento
Calcula la ruta en el servidor y cachéala; no dependas de JavaScript en el cliente para imprimir el marcado.
En proyectos con catálogos o estructuras complejas, el trail forma parte del modelo de datos desde el principio. Es algo que planificamos en cualquier desarrollo web a medida, igual que las URL y el enlazado interno.
07 Cómo validar y monitorizar tu breadcrumb trail
- ✓Pasa varias plantillas (categoría, ficha, artículo) por la prueba de resultados enriquecidos de Google.
- ✓Comprueba la sintaxis Schema.org completa con el Schema Markup Validator.
- ✓Verifica que la ruta del JSON-LD coincide con la visible.
- ✓Confirma que cada item es una URL absoluta, indexable y que devuelve un código 200.
- ✓Revisa que position empieza en 1 y es correlativo.
- ✓Vigila el informe de rutas de exploración en el apartado de mejoras de Search Console tras cada despliegue.
Las migas de pan son uno de los puntos que revisamos en una auditoría SEO técnica, junto a los datos estructurados y el enlazado interno. Si quieres repasar el resto de elementos de página, tienes la guía de 25 factores de SEO on page.
Preguntas frecuentes sobre Breadcrumb trail
Es la ruta concreta de enlaces que lleva de la raíz del sitio a la página actual, por ejemplo Inicio > Blog > SEO > Artículo, y el marcado HTML y de datos estructurados que la representa.
Breadcrumb es el nombre del elemento de migas de pan en general; breadcrumb trail se refiere a la ruta específica de cada página y a cómo se implementa.
Con un elemento nav etiquetado con aria-label, una lista ordenada con un li por nivel y aria-current="page" en el último elemento; los separadores se añaden con CSS.
Un itemListElement con al menos dos ListItem, y en cada uno position, name e item; en el último elemento item es opcional.
No. Google recomienda representar un recorrido típico del usuario hasta la página en lugar de reproducir la estructura de la URL.
Sí. Google admite varios BreadcrumbList en la misma página cuando hay más de un camino lógico, aunque conviene mostrar una ruta principal al usuario.
Los tres son válidos para Google, pero JSON-LD es el formato recomendado porque se mantiene separado del HTML y es más fácil de generar.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗