Resume este artículo, encuentra los puntos clave o pregunta lo que quieras entender mejor.
Las migas de pan web, también conocidas como breadcrumbs, son una ruta de navegación que muestra dónde se encuentra una página dentro de la estructura de un sitio. Suelen aparecer cerca de la parte superior del contenido y permiten volver fácilmente a niveles anteriores.
Una ruta sencilla puede verse así:
Inicio › Blog › SEO › Migas de pan web
Este elemento resulta especialmente útil en sitios con muchas categorías, productos, servicios o niveles de navegación. Además de orientar al usuario, las migas de pan pueden implementarse mediante HTML semántico y complementarse con datos estructurados BreadcrumbList.
Qué son las migas de pan web
Las migas de pan son un sistema de navegación secundaria que representa la ubicación actual de una página dentro de una jerarquía.
El término proviene de la idea de seguir un camino mediante pequeñas pistas. En una web ocurre algo parecido: cada elemento de la ruta muestra un nivel que permite entender cómo se relaciona la página actual con secciones anteriores.
Por ejemplo:
Inicio › Tecnología › Portátiles › Portátiles empresariales
Desde esa ruta, una persona puede regresar directamente a Tecnología o Portátiles sin tener que utilizar el menú principal o el botón Atrás del navegador.
Qué significa breadcrumb
Breadcrumb es el término inglés utilizado para referirse a una miga de pan. Su plural es breadcrumbs.
En desarrollo web, UX y SEO pueden encontrarse expresiones como
- breadcrumb;
- breadcrumbs;
- breadcrumb navigation;
- breadcrumb trail;
- migas de pan;
- ruta de navegación.
Todos hacen referencia al mismo concepto general, aunque la implementación puede variar según la estructura del sitio.
Cómo funcionan las migas de pan
Las migas de pan muestran diferentes niveles relacionados con la página actual.
Imaginemos un ecommerce que organiza sus productos de esta forma:
Inicio
└── Computadores
└── Portátiles
└── Portátiles ASUSDentro de un producto, la navegación podría mostrar:
Inicio › Computadores › Portátiles › ASUS ExpertBook
Los niveles anteriores pueden funcionar como enlaces, permitiendo subir dentro de la estructura del sitio.
La página actual normalmente se identifica de manera diferente para que el usuario comprenda dónde se encuentra.
Para qué sirven las migas de pan
Su utilidad principal es mejorar la orientación dentro de sitios con estructuras jerárquicas.
Pueden ayudar a
- mostrar dónde se encuentra la página actual;
- regresar a una categoría superior;
- explorar contenidos relacionados;
- hacer más comprensible la estructura del sitio;
- crear enlaces entre diferentes niveles de navegación.
No sustituyen el menú principal. Funcionan como una navegación complementaria.
Ejemplos de breadcrumbs
La estructura depende del tipo de sitio.
Ejemplo para un blog
Inicio › Blog › SEO › Qué son las migas de pan
Ejemplo para un ecommerce
Inicio › Tecnología › Portátiles › Lenovo ThinkPad
Ejemplo para un sitio de servicios
Inicio › Servicios › Marketing digital › SEO
Ejemplo para una academia
Inicio › Programas › Aviación › Piloto comercial
La ruta debería representar una organización comprensible para el usuario y no construirse únicamente para insertar palabras clave.
Qué tipos de migas de pan existen
La clasificación puede variar, pero normalmente se habla de tres modelos.
Migas de pan basadas en jerarquía
Muestran dónde se encuentra una página dentro de la arquitectura.
Por ejemplo:
Inicio › Blog › Desarrollo web › WordPress
Son las más habituales cuando existe una estructura clara de secciones y subsecciones.
Migas de pan basadas en atributos
Pueden encontrarse en catálogos donde el usuario explora productos mediante características o clasificaciones.
Su implementación requiere cuidado porque los filtros pueden generar numerosas combinaciones y no todas deberían convertirse en rutas indexables.
Migas de pan basadas en recorrido
Representan de alguna manera páginas o pasos visitados anteriormente.
Este modelo depende más de la navegación del usuario y no necesariamente refleja la estructura permanente del sitio.
Para una arquitectura web estable, suele ser más comprensible trabajar con rutas que representen la jerarquía real.
Qué diferencia hay entre breadcrumbs y menú principal
Ambos elementos permiten navegar, pero cumplen funciones distintas.
| Breadcrumbs | Menú principal |
|---|---|
| Muestran la ubicación actual | Muestra las principales áreas del sitio |
| Dependen del contexto de la página | Suele mantenerse relativamente estable |
| Permiten subir niveles | Permite desplazarse entre secciones principales |
| Funcionan como navegación complementaria | Forma parte de la navegación principal |
No debería eliminarse un buen menú simplemente porque el sitio utiliza migas de pan.
Cómo crear migas de pan en HTML
Una implementación sencilla puede utilizar un elemento nav y una lista ordenada.
<nav aria-label="Migas de pan">
<ol>
<li>
<a href="/">Inicio</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/blog/seo/">SEO</a>
</li>
<li aria-current="page">
Migas de pan web
</li>
</ol>
</nav>Esta estructura permite representar la navegación de forma comprensible también a nivel semántico.
El diseño visual puede aplicarse posteriormente mediante CSS.
Cómo hacer accesibles los breadcrumbs
Las migas de pan no deberían pensarse únicamente desde el diseño.
Una estructura accesible puede utilizar un elemento nav identificado mediante aria-label y una lista que mantenga el orden de los niveles.
También conviene identificar la página actual mediante aria-current="page" cuando corresponde.
Los separadores visuales como ›, / o > pueden generarse mediante CSS para evitar que los lectores de pantalla los interpreten como contenido innecesario.
Además, los enlaces deberían describir claramente la sección a la que llevan.
Qué relación tienen las migas de pan con el SEO
Las migas de pan pueden formar parte de una arquitectura web clara y crear enlaces entre una página y sus niveles superiores.
Eso puede resultar útil para comprender la organización de un sitio.
Sin embargo, no debería afirmarse que añadir breadcrumbs produce automáticamente
- mejores posiciones;
- más tráfico;
- mayor CTR;
- indexación garantizada;
- menor tasa de rebote.
Son un elemento de navegación y arquitectura. Su valor SEO depende del contexto completo del sitio y de cómo estén implementados.
Qué es BreadcrumbList
BreadcrumbList es un tipo de datos estructurados de Schema.org utilizado para describir una secuencia de migas de pan de forma que los sistemas compatibles puedan interpretar sus elementos y su orden.
Una implementación habitual utiliza JSON-LD.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Blog",
"item": "https://www.margetc.com/blog/"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://www.margetc.com/blog/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Migas de pan web",
"item": "https://www.margetc.com/blog/que-es-migas-de-pan-web/"
}
]
}
</script>Las URLs utilizadas deben corresponder con la estructura real del sitio.
Es obligatorio usar Schema BreadcrumbList
No es obligatorio para que las migas de pan funcionen como navegación.
Debemos diferenciar dos elementos.
Breadcrumb visible es la ruta que puede utilizar el visitante dentro de la página.
BreadcrumbList es el marcado estructurado que describe esa ruta mediante datos comprensibles para sistemas compatibles.
Una web puede tener breadcrumbs visuales sin datos estructurados, aunque cuando se implementa el marcado conviene hacerlo de manera coherente con la navegación real.
Los datos estructurados garantizan breadcrumbs en Google
No.
Implementar correctamente BreadcrumbList permite proporcionar información estructurada sobre la jerarquía, pero no garantiza que Google muestre ese formato en todos los resultados.
Los datos estructurados describen información. No permiten controlar completamente cómo aparecerá cada resultado de búsqueda.
Después de implementarlos conviene validar el código y comprobar que las URLs utilizadas sean accesibles y correctas.
Cómo validar Schema BreadcrumbList
La implementación puede comprobarse mediante herramientas de validación.
Un proceso básico sería
- Implementar las migas de pan visibles.
- Añadir el marcado estructurado cuando corresponda.
- Comprobar que cada nivel representa una página real.
- Validar el código.
- Revisar posibles errores.
- Comprobar posteriormente cómo Google procesa la URL.
La prueba no debería limitarse a comprobar que el JSON-LD no contiene errores de sintaxis.
También debemos verificar que la jerarquía descrita tenga sentido para el usuario.
Cómo implementar migas de pan en WordPress
WordPress puede mostrar breadcrumbs mediante el tema, código personalizado o funcionalidades proporcionadas por determinados plugins.
Antes de instalar algo nuevo conviene comprobar si el sitio ya genera migas de pan.
Tener dos sistemas activos al mismo tiempo puede provocar rutas duplicadas o diferentes.
Migas de pan con Yoast SEO
Yoast SEO dispone de funcionalidades para configurar breadcrumbs.
Dependiendo del tema, puede ser necesario habilitarlos e insertar su salida en la plantilla o utilizar los bloques y opciones disponibles.
También permite definir elementos como separador, página de inicio y taxonomías utilizadas dentro de la ruta.
Migas de pan con Rank Math
Rank Math también dispone de opciones para generar y personalizar breadcrumbs.
La forma de mostrarlos depende de la configuración del sitio y de cómo el tema gestione su navegación.
Migas de pan desde el tema
Algunos temas ya incorporan su propia navegación jerárquica.
Antes de activar otra implementación conviene verificar
- si ya aparece visualmente;
- qué ruta utiliza;
- si genera datos estructurados;
- si coincide con la arquitectura actual;
- si existe otra herramienta haciendo lo mismo.
Cómo deberían funcionar las migas de pan en ecommerce
En una tienda con cientos o miles de productos, las migas de pan pueden ayudar especialmente a regresar desde una ficha hacia categorías superiores.
Por ejemplo:
Inicio › Computadores › Portátiles › Portátiles ASUS
Una estructura clara permite que el usuario descubra otros productos sin comenzar nuevamente desde el menú.
El reto aparece cuando un mismo producto pertenece a varias categorías.
En esos casos conviene definir una lógica consistente para evitar que la ruta cambie arbitrariamente dependiendo de cómo llegó el usuario a la página.
Qué página debería aparecer en las migas de pan
La ruta debería representar una jerarquía lógica y útil.
No necesariamente tiene que copiar cada carpeta que aparece dentro de la URL.
Por ejemplo, una URL técnica podría contener estructuras internas que no aportan ningún contexto al usuario.
Las migas de pan deberían priorizar una ruta que ayude a comprender el lugar que ocupa la página dentro del sitio.
La página actual debe ser un enlace
No es necesario que la página actual enlace hacia sí misma.
Una estructura habitual mantiene enlazados los niveles anteriores y presenta el último elemento como texto.
Por ejemplo:
Inicio › Blog › Migas de pan web
Si la página actual se representa mediante un enlace, puede identificarse con aria-current="page".
Errores frecuentes al implementar breadcrumbs
Crear una ruta que no representa la arquitectura
Las migas de pan deberían ayudar a comprender dónde se encuentra la página.
Copiar automáticamente la URL
La estructura de carpetas técnicas no siempre representa la mejor navegación para una persona.
Agregar demasiados niveles
Una ruta excesivamente larga puede resultar difícil de leer, especialmente en pantallas pequeñas.
Duplicar sistemas de breadcrumbs
Un tema y un plugin pueden estar generando migas de pan simultáneamente.
Utilizar enlaces rotos
Cada nivel enlazado debe llevar realmente a la sección correspondiente.
Ocultarlas en móvil sin revisar su utilidad
En estructuras complejas también pueden resultar útiles desde dispositivos móviles. Si ocupan demasiado espacio, conviene adaptar su presentación antes que eliminarlas automáticamente.
Asumir que Schema garantiza resultados enriquecidos
El marcado estructurado no permite garantizar una presentación determinada en Google.
Cómo revisar las migas de pan de una web
Una revisión básica debería analizar tanto la parte visual como la técnica.
Podemos comprobar
- si aparecen en las páginas donde resultan útiles;
- si la jerarquía es coherente;
- si los enlaces funcionan;
- si se adaptan a móviles;
- si la página actual está claramente identificada;
- si existe marcado BreadcrumbList;
- si el marcado representa la misma estructura;
- si existen duplicados generados por plugins o temas.
También es importante comprobar varias plantillas.
Una implementación puede funcionar correctamente en artículos y fallar en productos, categorías o páginas.
Cuándo conviene utilizar migas de pan
Resultan especialmente útiles cuando un sitio tiene varios niveles de profundidad.
Por ejemplo
- ecommerce;
- portales de contenidos;
- blogs con categorías bien definidas;
- sitios corporativos con muchos servicios;
- bases de conocimiento;
- documentación;
- directorios.
En una web de tres páginas donde todo está disponible directamente desde el menú principal, quizá no aporten demasiado.
La decisión debería depender de la arquitectura y de la utilidad real para el usuario.
Las migas de pan deben comenzar por una buena arquitectura
Los breadcrumbs no corrigen una estructura desorganizada.
Si las categorías se superponen, existen páginas duplicadas o nadie sabe cuál debería ser la sección superior de un contenido, la dificultad está primero en la arquitectura del sitio.
Una buena ruta de navegación refleja relaciones comprensibles entre páginas.
Cuando esas relaciones están claras, las migas de pan pueden convertirse en una forma sencilla de mostrar al usuario dónde se encuentra y qué caminos tiene disponibles para seguir explorando.
Convierte lo que aprendes en el siguiente paso de tu negocio
Explora nuestros servicios o cuéntanos qué necesitas mejorar.
Preguntas frecuentes sobre migas de pan web
Qué son las migas de pan en una web
Son una ruta de navegación que muestra la ubicación de una página dentro de la jerarquía de un sitio y permite acceder a niveles anteriores.
Qué son los breadcrumbs
Breadcrumbs es el nombre en inglés utilizado para las migas de pan o rutas de navegación jerárquicas.
Para qué sirven las migas de pan
Ayudan a comprender la estructura del sitio, permiten regresar a secciones superiores y funcionan como navegación complementaria.
Cómo hacer migas de pan en HTML
Pueden implementarse mediante un elemento nav y una lista ordenada de enlaces que represente la jerarquía de la página.
Qué es BreadcrumbList
Es un tipo de datos estructurados utilizado para describir una secuencia de breadcrumbs y el orden de sus elementos.
Las migas de pan ayudan al SEO
Pueden contribuir a una arquitectura y navegación más comprensibles, pero implementarlas no garantiza mejores posiciones ni mayor tráfico orgánico.
Cómo añadir breadcrumbs en WordPress
Pueden incorporarse mediante el tema, código propio o herramientas como Yoast SEO y Rank Math. Antes de añadirlos conviene comprobar que el sitio no tenga ya otra implementación activa.
Las migas de pan son obligatorias
No. Su utilidad depende principalmente de la estructura y profundidad del sitio.
Los breadcrumbs deben ser visibles
Si se utilizan como sistema de navegación para el usuario, deberían presentarse de manera accesible y comprensible en la interfaz.
