Breadcrumbs

Qué son los breadcrumbs

Breadcrumbs (migas de pan) son una navegación secundaria horizontal que muestra al usuario dónde está dentro de la jerarquía del sitio:

Inicio > Sectores > Abogados

El nombre viene del cuento de Hansel y Gretel, que dejaban migas de pan para no perderse en el bosque.

Beneficios

Para el usuario

• Sabe dónde está en el sitio
• Puede volver a niveles superiores con un clic
• Reduce ansiedad (“¿cómo vuelvo al catálogo?”)

Para SEO

• Mejora internal linking
• Google los muestra en SERP (con schema BreadcrumbList) reemplazando la URL: visualmente más atractivo, sube CTR
• Distribuye autoridad de páginas internas hacia las superiores

Cómo implementar

HTML semántico

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/sectores/">Sectores</a></li>
    <li aria-current="page">Abogados</li>
  </ol>
</nav>

Schema BreadcrumbList

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Inicio", "item": "https://impero.es/" },
    { "@type": "ListItem", "position": 2, "name": "Sectores", "item": "https://impero.es/sectores/" },
    { "@type": "ListItem", "position": 3, "name": "Abogados" }
  ]
}
</script>

Mejores prácticas

• Coherentes con URL: si tu URL es /sectores/abogados/, los breadcrumbs deben reflejar esa jerarquía
• Texto descriptivo: “Inicio” mejor que “Home”
• Última página sin enlace: la actual no se enlaza a sí misma
• No duplicar título: el H1 ya da el nombre de la página, breadcrumb solo refuerza posición

Dónde colocarlos

• Arriba del H1, justo bajo el header
• En mobile, mantener visibles pero compactos
• Schema BreadcrumbList siempre presente aunque visualmente no se muestren

Audita tus breadcrumbs

Pasa cualquier URL por nuestra Auditoría SEO Técnica para validar tu BreadcrumbList schema.