Los breadcrumbs, también conocidos como migas de pan, son un patrón de navegación que muestra al usuario la ruta seguida dentro de un sitio web. Aunque a primera vista puedan parecer un simple detalle visual, cumplen una doble función clave: ayudan a los usuarios a orientarse dentro de la arquitectura del sitio y ofrecen señales valiosas para los motores de búsqueda. Cuando se diseñan bien, los breadcrumbs mejoran la accesibilidad, reducen la frustración del usuario y refuerzan el SEO. Sin embargo, implementarlos de forma incorrecta puede hacer que se conviertan en un elemento decorativo sin utilidad real.
Qué son y por qué importan
Un breadcrumb es una cadena de enlaces que refleja la jerarquía de una página. Por ejemplo: Inicio > Tienda > Electrónica > Auriculares. Este rastro indica dónde está el usuario, le permite retroceder a niveles superiores y le da al buscador información sobre la estructura interna del sitio.
En términos de experiencia de usuario, los breadcrumbs disminuyen la sensación de pérdida, sobre todo en webs con muchos niveles de navegación, como e-commerce o portales de contenido. Desde la perspectiva del SEO, ofrecen un marcado semántico adicional que facilita a Google comprender la organización de las páginas, algo que puede traducirse en mejores resultados enriquecidos en los SERPs.
Principios de accesibilidad en breadcrumbs
Un error habitual es implementar breadcrumbs que solo funcionan visualmente. Para que sean accesibles, es necesario tener en cuenta a los usuarios que navegan con lectores de pantalla, teclados o dispositivos de asistencia.
El primer paso es estructurarlos como una lista ordenada (<ol>) o desordenada (<ul>), ya que esto transmite a las tecnologías de asistencia que se trata de una secuencia lógica de enlaces. Cada enlace debe estar claramente etiquetado, evitando textos genéricos como “Página” o “Categoría”.
Otro aspecto importante es marcar el último elemento de la cadena como el actual, sin convertirlo en un enlace. Esto puede hacerse con el atributo aria-current="page". De esta manera, el lector de pantalla entiende que se trata de la página activa y no de un enlace navegable.
Por último, los breadcrumbs deben ser navegables con teclado, con un foco visible y orden lógico. Si se utilizan iconos o separadores gráficos, es recomendable acompañarlos con etiquetas ocultas (aria-label) para que no interrumpan la lectura.
Cómo hacerlos útiles para SEO
Los breadcrumbs no solo ayudan a los usuarios, también son una señal valiosa para Google y otros motores de búsqueda. Para que aporten valor SEO, conviene seguir algunas prácticas:
- Usar texto descriptivo: cada enlace debe reflejar la categoría o sección a la que apunta. Evita términos genéricos como “Sección 1”.
- Mantener consistencia con la arquitectura del sitio: los breadcrumbs deben reflejar la jerarquía real de navegación, no inventar rutas que no existen en el menú.
- Implementar marcado de datos estructurados: Google recomienda usar
BreadcrumbListen formato JSON-LD o Microdata. Esto ayuda a que los breadcrumbs aparezcan en los resultados de búsqueda, mejorando la visibilidad. - Evitar cadenas excesivamente largas: si una página está a más de 5 o 6 niveles, conviene simplificar. Un breadcrumb demasiado extenso no aporta valor y puede verse como spam.
- Usar URLs limpias: los enlaces de los breadcrumbs deben apuntar a versiones canónicas y amigables de las páginas, no a URLs con parámetros innecesarios.
Ejemplos de buenas prácticas
En un e-commerce, un breadcrumb bien diseñado podría verse así: Inicio > Moda > Mujer > Zapatos > Botines de cuero. Esta estructura es clara para el usuario y, al mismo tiempo, refuerza a Google la jerarquía del producto dentro de la tienda.
En un blog o medio digital, la cadena podría ser Inicio > Tecnología > Inteligencia Artificial > Artículo específico. Esto ayuda a los lectores a encontrar más contenido en la misma categoría y al buscador a relacionar el artículo con su temática principal.
Un ejemplo incorrecto sería un breadcrumb como Inicio > Categoría > Subcategoría > Producto sin descripción. Aquí no hay información semántica real, ni para el usuario ni para el SEO.
Errores frecuentes a evitar
Uno de los fallos más comunes es colocar los breadcrumbs en un lugar poco visible o demasiado pequeño, lo que los convierte en un adorno irrelevante. Siempre deben ubicarse cerca del encabezado o justo encima del contenido principal, donde los usuarios esperan encontrarlos.
Otro error es duplicar funciones. Si el breadcrumb muestra lo mismo que el menú principal sin aportar contexto jerárquico, su valor se reduce. También hay que evitar ocultarlos en dispositivos móviles: con un diseño responsive bien planteado, pueden adaptarse de forma simple y funcional.
Desde el punto de vista técnico, un error grave es no implementar el marcado estructurado o hacerlo mal, lo que genera advertencias en Search Console y hace que Google ignore la información.
Los breadcrumbs son mucho más que un detalle de diseño. Bien implementados, mejoran la accesibilidad, facilitan la navegación, reducen el rebote y refuerzan la estrategia SEO con datos estructurados. En sitios complejos, como tiendas online o portales de contenido, son una herramienta imprescindible para guiar al usuario y ayudar a los buscadores a interpretar la jerarquía interna.
El secreto está en combinarlos con buenas prácticas: estructura semántica clara, accesibilidad garantizada, coherencia con la arquitectura y marcado para motores de búsqueda. Si se cuida cada detalle, los breadcrumbs se convierten en una pieza clave que aporta tanto a la experiencia de usuario como a la visibilidad en Google.
