¿Alguna vez te has preguntado qué es lo que hace que un sitio web sea sencillo de utilizar?¿Qué es lo que hace que encontremos lo que buscamos fácilmente en una página web? Los breadcrumbs son una herramienta imprescindible para lograrlo.
¿Qué son los breadcrumbs?
Cuando navegamos por una página web acostumbramos a no fijarnos en la ruta que seguimos para llegar al contenido que buscamos. A veces tenemos suficiente con ese contenido. Pero puede ser que en esa ruta hayamos visto otras páginas que también nos han parecido interesantes y queramos volver a ellas pero no sepamos exactamente cómo encontrarlas. O simplemente nos apetezca navegar por la web para ver qué nos ofrece, sobre todo en webs de ecommerce.
Los breadcrumbs son un elemento de navegación que nos indican nuestra ubicación en el sitio web y la ruta que hemos seguido desde la página principal hasta donde nos encontramos. Suelen estar ubicados en la parte superior de la página. Este sería un ejemplo:
Breadcrumbs es el término en inglés para “migas de pan”. Porque se trata metafóricamente de eso: un rastro de migas que dejamos atrás para encontrar el camino de vuelta.
Tipos de navegación por breadcrumbs
Existen tres tipos de navegación por breadcrumbs:
- breadcrumbs de ubicación
- breadcrumbs de atributo
- breadcrumbs de historia
Breadcrumbs de ubicación
También llamados breadcrumbs de jerarquía, son los más comunes. Este tipo de navegación muestra nuestra ubicación actual y las distintas páginas por las que hemos pasado para llegar donde estamos. El orden es jerárquico, es decir, empieza por la página con la categoría superior más amplia y va avanzando a través de subcategorías cada vez más específicas hasta llegar a donde nos encontramos.
Si queremos volver atrás no tenemos más que clicar en alguna de las categorías anteriores.
“Inicio > Blog > Categoría > Entrada del blog”
Breadcrumbs de atributo
Este tipo de navegación muestra las características de la página en la que nos encontramos Estas características son los atributos. Son muy útiles en páginas de ecommerce, por ejemplo, porque ayudan a encontrar los productos que se están buscando normalmente a través de filtros pero sin salir de la categoría en la que estamos.
Un ejemplo claro lo podemos encontrar en un sitio web de ropa:
“Inicio > Ropa > Mujer > Camisas > Manga corta > Estampadas”
Muchas veces se combinan la navegación basada en la ubicación y la basada en atributos para que podamos cambiar de categoría o de atributo fácilmente. En el ejemplo anterior, podemos volver a la página “Camisas” y verlas todas o especificar qué tipo de camisas queremos seleccionando el atributo en la página actual.
Breadcrumbs de historia
Este tipo de navegación se basa en el historial de navegación que hemos seguido en la página. Su funcionamiento es muy similar al del botón “Atrás” que podemos encontrar en el navegador. Se utiliza principalmente en sitios web que tienen una estructura de navegación compleja o que tienen mucho contenido como podrían ser los sitios de noticias.
También podemos encontrarla en páginas interactivas como formularios web pues permite volver a la página anterior si queremos modificar algún dato que hayamos escrito incorrectamente, por ejemplo, pero sin perder la información que ya hemos adjuntado.
Por qué los breadcrumbs son importantes para tu sitio web
Existen muchas razones que explican la importancia de los breadcrumbs para un sitio web. Estas son algunas de ellas.
Mejoran la experiencia de usuario
Cuando entramos a una página web lo que queremos es que la navegación sea ágil y sencilla. Los breadcrumbs nos permiten encontrar lo que buscamos fácilmente y movernos hacia delante y atrás pues nos proporcionan una ruta clara que seguir. Esto es especialmente útil en sitios con múltiples niveles de navegación.
Reducen la tasa de rebote
Al proporcionar una navegación sencilla y mostrar una estructura de la página fácilmente comprensible, consiguen que los usuarios encontremos lo que buscamos sin esfuerzo y no abandonemos la página en busca de un sitio más accesible.
Mejoran el SEO
Es posible conseguir un mejor posicionamiento en los resultados de búsqueda a través de los breadcrumbs. Esto podemos conseguirlo incluyendo en ellos palabras clave relevantes. Esta mejora del posicionamiento atraerá más tráfico a la web.
También sirven para estructurar mejor el contenido de la página y esto hace que los motores de búsqueda la entiendan mejor y la tengan en cuenta. Además son fáciles de ejecutar por cualquier equipo de marketing.
Aparecen en las SERP
Sabemos que Google utiliza los breadcrumbs para ayudar a poner en contexto la información de las páginas web y así poder posicionarlas mejor en los resultados de búsqueda. De hecho, los hace aparecer en las SERP.
Qué tener en cuenta cuando añadas breadcrumbs a tu web
Ahora que te hemos explicado lo importante que es simplificar y facilitar la navegación por tu página web usando los breadcrumbs, vamos a darte unos consejos básicos a la hora de implementarlos.
-Analiza tu web
No lo hemos comentado antes pero es importante saber que no siempre es necesario añadir breadcrumbs a una web. Si la tienes organizada de tal modo que todo su contenido sea accesible desde la homepage con un sólo clic, no te aportarán nada.
-Estructúrala bien
Es importante que la arquitectura de tu página sea clara y esté bien jerarquizada para que los breadcrumbs sean efectivos y funcionen correctamente.
-Utiliza un diseño sencillo y claro
Dale a los breadcrumbs un diseño sencillo y, sobre todo, claro. Que sean fáciles de entender y si es posible que cada una de las categorías quede definida con una sola palabra.
Es importante que mantengan el estilo visual de la página para que no llamen la atención más de lo necesario y den coherencia a la imagen.
También tienes que asegurarte de que se actualicen automáticamente cada vez que realices un cambio en tu página, de lo contrario, sólo generarán confusión y eso afectará negativamente a la experiencia de usuario.
-Enlaces activos
Asegúrate de que los elementos sean enlaces activos que lleven al usuario a donde indican con un solo clic.
-Añade palabras clave a los breadcrumbs
Como hemos comentado antes, una de las opciones más interesantes que nos ofrecen los breadcrumbs es utilizarlos para añadir palabras clave que nos sirvan para conseguir un mejor posicionamiento en los resultados de búsqueda. Investiga cuáles puedes utilizar para conseguirlo.
Implementación técnica de los breadcrumbs
Para que los breadcrumbs cumplan su función no solo de usabilidad, sino también de posicionamiento web, es fundamental implementarlos correctamente a nivel técnico. Aquí te explicamos cómo hacerlo de forma eficaz:
HTML y estructura semántica
Los breadcrumbs deben estar marcados con una estructura HTML semántica clara. Lo ideal es utilizar listas (<ul>, <ol>) o una secuencia de enlaces dentro de un contenedor <nav> con el atributo aria-label="breadcrumb". Por ejemplo:
<nav aria-label=»breadcrumb»>
<ol>
<li><a href=»/»>Inicio</a></li>
<li><a href=»/ropa»>Ropa</a></li>
<li><a href=»/ropa/mujer»>Mujer</a></li>
<li>Camisas</li>
</ol>
</nav>
Microdatos o JSON-LD para SEO
Para mejorar el posicionamiento y permitir que los buscadores (como Google) comprendan mejor la jerarquía del sitio, es importante añadir datos estructurados. Hay dos formas comunes: microdatos o JSON-LD. Google recomienda el uso de JSON-LD.
Ejemplo básico en JSON-LD:
<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»: «Ropa»,
«item»: «https://www.ejemplo.com/ropa»
},
{
«@type»: «ListItem»,
«position»: 3,
«name»: «Mujer»,
«item»: «https://www.ejemplo.com/ropa/mujer»
}
]
}
</script>
Consideraciones adicionales
- Usa enlaces válidos y bien definidos (no enlaces rotos).
- Asegúrate de que el breadcrumb se actualice dinámicamente según el contenido mostrado.
- Verifica en herramientas como Rich Results Test si los datos estructurados se están interpretando correctamente.
Accesibilidad web (a11y) en breadcrumbs
Además de mejorar la experiencia de usuario y el SEO, los breadcrumbs deben ser accesibles para todos los usuarios, incluidas las personas con discapacidades. Aquí te indicamos cómo hacerlo correctamente:
Uso de roles y atributos ARIA
El contenedor de breadcrumbs debe estar dentro de un elemento <nav> con el atributo aria-label="breadcrumb", para que los lectores de pantalla lo identifiquen correctamente como una herramienta de navegación secundaria:
<nav aria-label=»breadcrumb»>
<ol>
<li><a href=»/»>Inicio</a></li>
<li><a href=»/productos»>Productos</a></li>
<li aria-current=»page»>Camisetas</li>
</ol>
</nav>
Buenas prácticas de accesibilidad
- Contraste de color: Asegúrate de que los enlaces tengan suficiente contraste con el fondo.
- Tamaño de fuente legible: Usa un tamaño de fuente accesible, especialmente en dispositivos móviles.
- Navegación por teclado: Los breadcrumbs deben ser navegables con el teclado (usando la tecla Tab) como cualquier otro enlace.
- Uso de
aria-current="page": Este atributo debe indicarse en el último breadcrumb para señalar la página activa.
Compatibilidad con lectores de pantalla
Al seguir estas pautas, un lector de pantalla podrá interpretar y leer correctamente la ruta de navegación, facilitando la orientación dentro del sitio para usuarios con dificultades visuales o cognitivas.
En definitiva, los breadcrumbs son una herramienta muy útil para mejorar la navegación, la usabilidad e incluso el SEO de una página web, además de conseguir una mejor experiencia de usuario.
