Breadcrumb es una navegación secundaria dentro de una web (además 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 hallar regularmente en la parte de arriba de un portal 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 hallar el camino de vuelta a casa. Las migas de pan, tal como se aplican a Internet, ofrecen a los usuarios la oportunidad de hallar 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 por medio de flechas, otros símbolos tipográficos o gráficos y botones. Mediante de un clic, el usuario termina en la página principal o en la página principal del wiki. De esta manera, no se puede hacer un clic en el último punto de la navegación. Los breadcrumb se muestran constantemente en un área de una web titulada «above the fold»; no obstante, son bastante discretas con respecto a la fuente y el color, de modo que la navegación principal sigue siendo perceptible. La consistencia además es relevante: si se usa 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 distintos niveles jerárquicos, seguramente circulares y no necesarios lógicamente. No obstante, los datos para la producción de breadcrumb muchas veces 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 items y niveles de una web.
De esta manera, la navegación con migas de pan se puede diferenciar según el nivel relativo del portal web o la ruta de clics en la que se encuentre el usuario.
- Clic Path: Consiste en 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 posible. Fundamentalmente, 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 muchas veces implementan esta variación para poder alcanzar rápidamente los items 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 en este momento 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. De esta manera, la implementación es más compleja, dado que el breadcrumb tiene que adaptarse a las funciones de las webs, y seguramente además a la base de datos.
Apps
La navegación con breadcrumb se usa principalmente para webs y portales muy grandes que disponen una estructura jerárquica compleja. Te encontrarás con opciones de navegación de breadcrumb en las tiendas online muchas veces, así, dado que ayudan a los usuarios a hallar su camino en la gran categoría y selección de productos. Si un portal web no cuenta con 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.
Es importante destacar crear un sitemap y posteriormente 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. En resumen, lel breadcrumb se puede construir como el sitemap, dado que reflejan la arquitectura de la página. La próxima norma es esencial: la navegación con breadcrumb es una ayuda secundaria que no reemplaza ni al menú ni a la navegación. De esta manera, la navegación primaria y secundaria deben estar separadas, inclusive 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), distintos 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, dado que los breadcrumb pueden ser leídos por los buscadores y mostradas en los SERPs.
- PHP y JavaScript: alternativamente, items de código de distintos 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 posteriormente recuperada en el documento. Esto sucede de manera semejante con JavaScript, aún cuando además las webs generadas dinámicamente reciben un breadcrumb.
- Sistema de administración de contenidos: algunos CMS y sistemas de tiendas ofrecen además breadcrumbs como una opción en el backend. La implementación es normalmente fácil y es viable 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 por medio de del CSS y debe ser coherente.
Los breadcrumbs disponen 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 por medio de 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 poner en práctica.
- Según Jakob Nielsen, experto en usabilidad, nunca generan problemas con las pruebas de usuario. Los usuarios conocen lo que es esta navegación secundaria y cómo pueden usar 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. De esta manera, desde el punto de vista de la usabilidad, el breadcrumbs es indispensable. Desde una perspectiva de optimización SEO y OnPage es esencial poner en práctica 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 usando microdatos (se puede hallar 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. Mediante de la navegación, se reforzará la relación interna y las URL que se ajusten temáticamente se vincularán por medio de del elemento de navegación. De esta manera, por medio de 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.
Web Links
