Qué son los Breadcrumbs trail

Las migas de pan o breadcrumbs de una página, son una funcionalidad que usamos para indicar la posición de la página en la que nos encontramos navegando respecto a la jerarquía de navegación establecida en el sitio.

A la hora de construir la arquitectura de un sitio web, así como la jerarquía de navegación por éste, debemos tener en cuenta siempre al usuario, que pueda tener una experiencia positiva y no se pierda en el sitio web o tenga confusión a la hora de navegar y ascender o descender en el orden lógico. Debemos asegurar que las personas son capaces de encontrar fácilmente un camino óptimo de navegación

En los sitios web de gran tamaño, resultarán fundamentales y de gran utilidad.

Elementos de la ruta de navegación establecida por las migas de pan

Los breadcrumbs establecen la ruta de navegación estructural que lleva a la página en la que nos situamos, marcando los niveles o escalones de esa jerarquía. Si miramos el ejemplo de debajo, comprobaremos que el último elemento de la ruta corresponde a la página en la que estamos. Los anteriores marcan una secuencia lógica de navegación hasta este elemento final en el que nos ubicamos.

Ejemplo de Migas de pan o breadcrumbs

Ejemplo de Breadcrumbs o migas de pan marcando la estructura y jerarquización del contenido en una página de artículo del blog del sitio web de Human Level Communications.

Gracias a las migas de pan, marcamos los escalones de jerarquía hacia la URL en la que estamos, siendo por ejemplo el primer nivel, en este caso, el inicio o home en Human Level, marcada en rojo; el segundo nivel, los artículos del blog de Human Level, marcado en amarillo; el tercer escalón o la categoría de artículo, en amarillo; y por último en cuarto nivel el contenido del artículo en cuestión o página en la que nos encontramos.

Podemos encontrar Breadcrumb que no incluyan toda la ruta o niveles de navegación, será igualmente válida.

Ejemplo de Breadcrumbs ocultando niveles en la ruta

Ejemplo de migas de pan en las que se omite uno de los niveles de navegación, saltando del segundo nivel “Artículos” al cuarto del propio artículo en cuestión.

Incluso cabe la posibilidad de que exista más de una ruta o breadbrumb para representar la ubicación de una página en la jerarquía de la web, en este ejemplo podemos encontrar una ruta alternativa de navegación.

ruta alternativa en breadcrumbs hacia artículo concreto

Ejemplo de ruta de navegación alternativa implementada en las migas de pan o Breadcrumbs para llegar a un artículo concreto del blog de Human Level Communications

En los resultados de búsqueda de Google, se han integrado las breadcrumbs en el contenido de los snippets, con lo que éstos son más atractivos y transmiten claramente la estructuración del contenido que buscamos. La inclusión en el snippet no depende de nosotros, sino que una vez se han implementado los metadatos de las migas de pan, Google los mostrará cuando entienda que son relevantes a la búsqueda realizada por el usuario.

breadcrumbs en snippet de Human level

Ejemplo de aparición de las migas de pan o breadcrumbs en un snippet de los resultados de búsqueda de Google

Tipos de Breadcrumbs o migas de pan

De acuerdo a la ruta de navegación, tenemos distintos tipos de migas de pan:

  • Migas de pan en base a localización, que ayudan al usuario a saber dónde se encuentra la página en la que navega respecto al resto de estructura de la página.
  • Migas de pan en base a directorios, que recoge la ruta de directorios que recorre la navegación hasta llegar a la página actual.
  • Migas de pan basadas en los atributos de la página en la que nos situamos.

Mejores prácticas en el uso de breadcrumbs

Optimizar anchor text de las breadcrumbs

Otra de las posibilidades que nos ofrecen las breadcrumbs, es usarlas como elemento SEO, es decir, al final cada elemento de las migas de pan va a ser un enlace hacia una página del sitio web y como tal, debe tener su anchor text o texto de ancla, el cual puede y debe ser usado para incluir la palabra clave relevante al contenido de la página a la que nos dirige el enlace.

Hay que tener en cuenta en esta práctica dos aspectos importantes:

  • No sobreoptimizar el texto de ancla de las migas de pan, o anchor text de las breadcrumbs, sino ser de redacción natural y relevante con el contenido de la página a la que lleva. Siempre la experiencia del usuario delante de la redacción SEO,
  • No usar textos largos en las breadcrumbs, ya que debe primar en ellos la usabilidad.

No deben reemplazar la navegación principal

La navegación principal de un sitio web debe tener una estructura vertical con un orden o secuencia lógico jerárquico que se refleja principalmente en el menú, de home a categoría, de esta a subcategoría o sección y de ahí a terceros o cuartos niveles posteriores.

Las migas de pan muestran una estructura horizontal que no debe sustituir a la principal, sino ser un complemento para facilitar la navegación al usuario.

Breadcrumbs sólo cuando son necesarias

Siempre que aporten valor al sitio web porque facilite la navegabilidad al usuario, nunca abusar e implementarlas sin necesidad o hacerlo en lugares que no corresponda como en los título, descripciones, etc.

Implementación

Las migas de pan se pueden marcar con diferentes propiedades en las páginas web, para ello se deben implementar usando microdatos, a través del marcado RDFa o JSON-LD.

Las propiedades o atributos que va a reconocer Google son:

  • Artículo o ruta de explotación individual en la pista de las migas de pan. Incluye el título de la miga de pan y la URL.
  • Nombre o título de la miga de pan.
  • Posición o ubicación en la ruta de navegación del sendero de las migas de pan. La primera posición, será el primer elemento de las breadcrumbs, y el último, la página en la que nos situamos.

 

 

¿Te ha gustado el artículo? ¡Compártelo!