Qué son las breadcrumbs (migas de pan) y cómo mejoran el SEO

Definición rápida y beneficios (UX, enlazado interno, CTR)

Las breadcrumbs o migas de pan son una ruta de enlaces que muestran al usuario dónde está dentro de la estructura del sitio y le permiten subir niveles con un clic. En la práctica, sirven para:

  • Mejorar la experiencia y usabilidad: la gente no se pierde y vuelve fácil a categorías/páginas anteriores.
  • Impulsar el enlazado interno: refuerzan categorías y plantillas clave sin “forzar” links.
  • Favorecer la indexación y la exploración: los bots entienden mejor la jerarquía.
  • Aumentar el CTR cuando Google las refleja en los resultados enriquecidos.

También invitan a explorar más páginas, lo que suele ayudar a reducir rebote y fomentar la interacción. 📈

Tipos de breadcrumbs

Jerarquía vs. ruta vs. historial (y dinámicas)

  • Jerarquía (las más comunes): Inicio > Categoría > Subcategoría > Página.
  • Ruta (basadas en la URL): reflejan el path real.
  • Historial (tipo “volver”): menos SEO, más UX del usuario.
  • Dinámicas por atributos (e-commerce): muestran la categoría canónica aunque el usuario llegue desde un filtro.

Cómo implementarlas

WordPress (plugins/temas) y CMS

En WordPress puedes usar Yoast / Rank Math / AIOSEO o el propio tema. Activarlas suele bastar para tener salida HTML y schema correcto. En e-commerce (Shopify/Magento/PrestaShop) normalmente hay opciones nativas o snippets del theme para inyectarlas sin complicaciones.

Consejos rápidos en CMS

  • Asegúrate de que reflejan la jerarquía real (no inventes niveles).
  • Evita duplicar “Inicio” o categorías irrelevantes.
  • Mantén un formato uniforme en todas las plantillas.

Código manual (HTML/CSS) + Schema JSON-LD

<nav class="breadcrumbs" aria-label="migas de pan">
<a href="/">Inicio</a> ›
<a href="/blog/">Blog</a> ›
<span>Qué son las breadcrumbs</span>
</nav>

Marcado JSON-LD (recomendado):

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1,
"name": "Inicio", "item": "https://www.ejemplo.com/" },
{ "@type": "ListItem", "position": 2,
"name": "Blog", "item": "https://www.ejemplo.com/blog/" },
{ "@type": "ListItem", "position": 3,
"name": "Qué son las breadcrumbs",
"item": "https://www.ejemplo.com/blog/breadcrumbs/" }
]
}
</script>

Errores típicos

  • Duplicar “Inicio” o añadir niveles “decorativos”.
  • Mostrar una ruta que no coincide con la arquitectura real.
  • No marcar schema o mezclar Microdata/JSON-LD con incoherencias. 🚫

✅ Checklist de publicación (2 minutos) — Versión texto

Arquitectura & UX

  • 🧭 La breadcrumb debe mostrar la ruta real de la página (ej.: Inicio > Categoría > Artículo). No inventes pasos.
  • 🏠 “Inicio” aparece una sola vez y siempre al principio.
  • 📚 Mantén 2–4 pasos como máximo; más niveles confunden.
  • 🖱️ Cada paso debe ser un enlace que funcione; el último es solo texto (la página actual).
  • ⬆️ Colócala arriba del contenido y usa el mismo separador en todo el sitio (›, / o →).

Accesibilidad & Diseño

  • ♿ Indica a los lectores de pantalla que es una breadcrumb con: nav con aria-label “migas de pan” y marca el paso actual con aria-current=”page”.
  • 📱 Texto legible y con buen contraste; en móvil no debe cortarse ni desbordar.
  • 👁️ No dependas solo del separador: usa espacios y/o estilos para que se lea fácil.

SEO técnico

  • 🔗 Los enlaces deben ir a páginas buenas y definitivas (la URL canónica: la versión preferida que carga bien, “200 OK”).
  • 🚫 No enlaces páginas con noindex (páginas que no quieres en Google) ni rutas de filtros/facetas (cambian según el usuario).
  • 🕸️ La breadcrumb debe ser coherente con el menú y con el enlazado interno del sitio.

Schema.org (marcado para Google)

  • 📦 Añade el marcado BreadcrumbList (en JSON-LD o en Microdata; usa solo uno).
  • 🎯 Revisa que las posiciones (1, 2, 3…) y los campos name/item coincidan con lo que se ve en pantalla.
  • ✅ Pasa la Prueba de resultados enriquecidos de Google sin errores.

CMS / Implementación

  • ⚙️ En WordPress/Shopify/Magento, activa la opción del tema o plugin para generar HTML + schema automáticamente.
  • ⚛️ En React/Next/Angular, que la breadcrumb se actualice sola según la ruta actual.
  • ♻️ Guárdala como componente/plantilla reutilizable y úsala donde haga falta.

QA & Medición

  • 🔍 Revisa en Google Search Console (Resultados enriquecidos) que Google la detecta y no hay errores.
  • 📈 Compara el CTR de páginas con breadcrumb frente a las que no la tienen.
  • 📊 Observa si aumentan las páginas por sesión y baja la tasa de rebote donde la añadiste.
  • 🧪 Prueba casos límite: paginación, categorías vacías, sitios multi-idioma (hreflang).

Scroll al inicio