Breadcrumb es una navegación secundaria dentro de una web (también llamada navegación de miga de pan). Breadcrumbs ofrece a los usuarios de la web la opción, en forma de enlaces internos, de volver rápidamente a la página principal o a otro nivel de la web. Gracias a la navegación con migas de pan, el usuario puede reconstruir qué páginas ha visitado anteriormente. Esta navegación secundaria suele construirse jerárquicamente según la web y muestra la ruta lógica desde la página principal hasta la posición actual. Una navegación de breadcrumb se puede encontrar regularmente en la parte superior de un sitio web, y por lo general no es demasiado notable como elemento de diseño.

Antecedentes

El término deriva del cuento de hadas “Hansel y Gretel” de los hermanos Grimm. En el cuento de hadas, dos niños usaron migajas de pan para encontrar el camino de vuelta a casa. Las migas de pan, tal como se aplican a Internet, ofrecen a los usuarios la posibilidad de encontrar el camino de vuelta a la página principal. La navegación con breadcrumb rastrea tus páginas anteriores. Esta navegación está estructurada jerárquicamente y muestra la ruta desde la página de inicio hasta la ubicación actual en el árbol de páginas.
Archivo:600×400-Breadcump-es-01.png

Representación gráfica del breadcrumb

Las etiquetas se mostrarán mediante flechas, otros símbolos tipográficos o gráficos y botones. A través de un clic, el usuario termina en la página principal o en la página principal del wiki. Por lo tanto, no se puede hacer clic en el último punto de la navegación. Los breadcrumb se muestran constantemente en un área de una web titulada “above the fold”; sin embargo, son bastante discretas en cuanto a la fuente y el color, de modo que la navegación principal sigue siendo perceptible. La consistencia también es relevante: si se utiliza una navegación secundaria, ésta debería estar disponible en todas las páginas y subpáginas.

Tipos de breadcrumb

Estrictamente hablando, los breadcrumbs deben diferenciarse de la ruta de clic, porque los clic paths pueden distinguirse por saltos a diferentes niveles jerárquicos, posiblemente circulares y no necesarios lógicamente. Sin embargo, los datos para la producción de breadcrumb a menudo provienen de la ruta de clics que ha seguido el usuario. Dependiendo de la variación del breadcrumb, la navegación con una ruta de clic es idéntica o relativa a otros elementos y niveles de una web.

Por lo tanto, la navegación con migas de pan se puede diferenciar según el nivel relativo del sitio web o la ruta de clics en la que se encuentre el usuario.

• Clic Path: Se trata de una navegación basada en la ruta que traza la ruta de clics real y muestra la posición actual. Con rutas extensas y webs con una estructura profunda, la variación es menos factible. Sobre todo, el usuario puede realizar la misma función con los botones adelante y atrás del navegador. La implementación de los datos depende de los datos del análisis de la ruta de clics y, en determinadas circunstancias, una navegación basada en la ruta puede ser muy larga.
• Ubicación: un breadcrumb basado en la ubicación se refiere a la posición actual del usuario en la jerarquía de la web. Los sitios web con más de 2 subniveles a menudo implementan esta variación para poder alcanzar rápidamente los elementos padre en el árbol de páginas.
• Categorías (atributo): los breadcrumb basados en atributos permiten al usuario ver a qué categoría pertenece la página actualmente visitada y a qué atributo se le puede atribuir esta página. Por lo general, estos sistemas de navegación serán utilizados por sitios web de comercio electrónico y tiendas online en el nivel de producto, y con la búsqueda y ofrecidos junto con las funciones de búsqueda y personalización. Por lo tanto, la implementación es más compleja, ya que el breadcrumb tiene que adaptarse a las funciones de las webs, y posiblemente también a la base de datos.

Aplicaciones

La navegación con breadcrumb se utiliza principalmente para webs y portales muy grandes que tienen una estructura jerárquica compleja. Te encontrarás con opciones de navegación de breadcrumb en las tiendas online a menudo, así, ya que ayudan a los usuarios a encontrar su camino en la gran categoría y selección de productos. Si un sitio web no tiene una jerarquía lógica, no se recomienda la navegación con breadcrumb. Una forma de hacerlo es construir la estructura de breadcrumb como un sitemap, que por lo general refleja la arquitectura de la web.

Vale la pena crear un sitemap y luego comprobar si una navegación con breadcrumb ayudaría. En caso de que la estructura de la página incluya muchos niveles, esto debería ser visible en el sitemap. Finalmente, lel breadcrumb se puede construir como el sitemap, ya que reflejan la arquitectura de la página. La siguiente regla es importante: la navegación con breadcrumb es una ayuda secundaria que no reemplaza ni al menú ni a la navegación. Por lo tanto, la navegación primaria y secundaria deben estar separadas, incluso en lo que se refiere al trazado y al diseño.

Implementación de Breadcrumbs en una web

Los breadcrumb se pueden integrar de muchas maneras:

• Plug in: Dependiendo del CMS (por ejemplo, wordpress), diferentes plug-ins son posibles para los breadcrumb. El programa adicional permite realizar cambios e integrar la navegación secundaria. El soporte de datos estructurados o microdatos es opcional, ya que los breadcrumb pueden ser leídos por los buscadores y mostradas en los SERPs.
• PHP y JavaScript: alternativamente, elementos de código de diferentes lenguajes de programación y script pueden ser integrados en el código fuente. Por ejemplo, una función puede ser definida en PHP y luego recuperada en el documento. Esto ocurre de manera similar con JavaScript, aunque también las webs generadas dinámicamente reciben un breadcrumb.
• Sistema de gestión de contenidos: algunos CMS y sistemas de tiendas ofrecen también breadcrumbs como una opción en el backend. La implementación es normalmente fácil y es posible con pocos clics.
• HTML: la variación manual se basa en enlaces que se pueden resumir en una ruta relativas que apunta a lados previamente visitados. El diseño se forma a través del CSS y debe ser coherente.

Ventajas de una navegación breadcrumbs

Los breadcrumbs tienen las siguientes ventajas para la usabilidad en las web:

• Muestran a los usuarios la posición actual relativa a otros niveles jerárquicos de una web. Con esto, el breadcrumbs es un soporte de uso y navegación.
• Permiten navegar por la jerarquía de páginas con un solo clic. Si el usuario llega a través de Google-Search o de enlaces profundos en medio de la arquitectura de información, los breadcrumbs son una ayuda de navegación rápida y sencilla.
• Los breadcrumbs no ocupan mucho lugar en una web y son relativamente fáciles de implementar.
• Según Jakob Nielsen, experto en usabilidad, nunca causan problemas con las pruebas de usuario. Los usuarios saben lo que es esta navegación secundaria y cómo pueden utilizar las migas de pan.

Importancia para el SEO

Basándose en numerosas pruebas de usabilidad, se cree que la navegación con breadcrumbs ayuda enormemente a los usuarios a navegar. Por lo tanto, desde el punto de vista de la usabilidad, el breadcrumbs es indispensable. Desde una perspectiva de optimización SEO y OnPage es importante implementar el breadcrumb correctamente. Desde hace algún tiempo los SERPs de Google muestran en parte la navegación de breadcrumb en la línea de URL como rich snippets. Se recomienda etiquetar la navegación con breadcrumbs en el código fuente utilizando microdatos (se puede encontrar más información en el servicio de asistencia de Google).

En un sentido más amplio, los breadcrumbs ayudan a los motores de búsqueda a rastrear y resumir los sitios web. A través de la navegación, se reforzará la vinculación interna y las URL que se ajusten temáticamente se vincularán a través del elemento de navegación. Por lo tanto, a través de la navegación de breadcrumbs, se puede llegar a directorios más profundos en la jerarquía de páginas y crawlearse más rápidamente.