¿Alguna vez te has perdido en un web? ¿O no tienes ni idea de cómo volver a una página en la que estabas y que tenía información útil?
Esta es la belleza de la navegación con migas de pan o “breadcrumb”, como son conocidas en el sector.
¿Qué es la navegación por breadcrumb o migas de pan?
Normalmente, la navegación con breadcrumb es una ruta de texto que se muestra en la parte superior de la página, cerca del menú o de la navegación principal. Dependiendo del tipo, puede mostrar a los usuarios cómo está categorizada en el sitio la página en la que se encuentran o el camino que siguió el usuario para encontrarla.
Por ejemplo, este es el aspecto de la navegación con breadcrumb en la web de Barnes & Noble:
La navegación con breadcrumb se denomina “navegación secundaria” en una web. Utilizada eficazmente, la navegación breadcrumb es útil tanto para los usuarios como para los motores de búsqueda.
Para los usuarios, ayuda a la búsqueda de contenidos en tu web, orientándolos sobre dónde se encuentran y ayudándoles a retroceder si es necesario. Para los motores de búsqueda, la navegación por breadcrumb indica cómo está estructurada tu web.
Si quieres proporcionar una mejor experiencia de usuario a las personas que llegan a tu sitio (y ayudar a que no se pierdan una vez allí), déjales algunas migas de pan.
Aquí tienes tres opciones de navegación con breadcrumb:
- Breadcrumb jerárquicas.
- Breadcrumb basadas en la ruta.
- Breadcrumb basadas en atributos.
Navegación por breadcrumb basada en jerarquías
En casi todos los artículos que encuentres sobre breadcrumb, empiezan con la navegación con breadcrumb basada en jerarquía (también denominada "navegación con breadcrumb basada en la ubicación"). El motivo es que es la opción más común, especialmente para las webs que tienen una arquitectura compleja con más de dos niveles.
Esta opción de navegación sigue la arquitectura o "jerarquía" de tu web, facilitando a los usuarios anticiparse y encontrar contenidos relacionados.
Considera este ejemplo de Target:
Como puedes ver en el ejemplo anterior, los senderos de breadcrumb basados en jerarquías comienzan con la categoría de nivel superior más amplia (en este caso, Target en general) y avanzan a través de subcategorías anidadas más específicas antes de llegar a la página actual.
Si el usuario cambia de opinión, puede hacer clic fácilmente en una categoría más amplia para encontrar otra cosa.
Navegación de breadcrumb basada en rutas
Las breadcrumb basadas en la ruta (también llamadas “breadcrumb basadas en el historial”) son como una variante del botón Atrás de tu navegador.
Muestran la ruta que ha seguido el usuario hasta llegar a su página actual, aunque normalmente esta ruta no se muestra en su totalidad. Esta opción puede facilitar a los usuario volver a los resultados de búsqueda, especialmente en las webs ecommerce.
Aquí tienes un ejemplo de Adidas:
En el ejemplo anterior, Adidas utiliza una navegación basada en breadcrumb en la ruta (el enlace "Atrás") para devolver al usuario a la página de resultados. Como puedes ver, también se sitúa junto a las breadcrumb basadas en la ubicación. De esta forma, los usuarios sacan partido de ambas navegaciones.
Las breadcrumb basadas en rutas se utilizan a menudo en páginas interactivas, como los formularios web, ya que permiten a los usuarios volver al paso anterior conservando toda la información que ya han enviado. Así, pueden hacer cambios en la información enviada si es necesario.
Navegación basada en atributos
Las breadcrumb basadas en atributos muestran metainformación sobre una página o tema en un formato de breadcrumb. Esto puede ser útil cuando un artículo pertenece a varias categorías distintas a la vez, lo que puede ser difícil de mostrar en una jerarquía. Las breadcrumb basadas en atributos suelen encontrarse en las ecommerce para filtrar los resultados de la búsqueda de productos.
He aquí un ejemplo del minorista de ropa Old Navy:
En el ejemplo anterior, los “filtros” son en realidad migas de pan basadas en atributos. Cada uno se refiere a un atributo específico del inventario de ropa de Old Navy. Con la cadena anterior, un usuario solo puede ver tops de mujer de talla pequeña, verdes y holgados. Sin embargo, podría eliminar cualquiera de esos filtros, o incluso añadir más, sin necesidad de cambiar de categoría.
En este ejemplo, la web de Old Navy combina la navegación basada en atributos y jerarquías, de modo que los usuarios tienen la opción de ver toda una categoría (tops de mujer), o filtrar con más precisión dentro de esa categoría.
Por qué las breadcrumb son buenas para el SEO
Las breadcrumb ofrecen muchas ventajas SEO, entre ellas:
Ayudar a los usuarios y a los motores de búsqueda a entender cómo está organizado una web
Las breadcrumb proporcionan a los usuarios y a los motores de búsqueda información importante sobre qué tipo de contenido está disponible en tu sitio y cómo está estructurado ese contenido. Esto puede ayudar a los motores de búsqueda a comprender mejor tus páginas, al tiempo que ayuda a los visitantes a entender mejor lo que ofrece tu sitio, animándoles a quedarse aún más tiempo.
Aparecer en los resultados de búsqueda
Google nos dice que utiliza las breadcrumb para ayudar a contextualizar el contenido de tu web y colocarlo en resultados de búsqueda más relevantes. Se muestran incluso en las SERP para ayudar a los usuarios a anticipar mejor el contenido de tu página cuando la vean en sus resultados.
Aumentar la rastreabilidad y reducir la tasa de rebote
Como las breadcrumb facilitan a los usuarios la comprensión y la navegación por tu web, pueden ayudar a reducir la tasa de rebote. También mejoran la rastreabilidad al crear enlaces internos entre páginas y categorías, lo que podría tener efectos positivos en el rendimiento orgánico.
Una herramienta como Auditoría del sitio puede ayudarte a comprobar el estado de tu navegación breadcrumb y la rastreabilidad, y a identificar las páginas huérfanas que podrían mejorarse utilizando enlaces de breadcrumb.
Utilizar Auditoría del sitio para comprobar las breadcrumb de tu web
Si utilizas el esquema de breadcrumb, el informe de marcado de Auditoría del Sitio puede ayudarte a verificar que se ha implementado correctamente.
Marcado es uno de los Informes Temáticos de la Auditoría del sitio. Una vez que lo hayas configurado, el informe de Marcado se encuentra en la pestaña Visión general:
La Auditoría del sitio reconoce más de 20 elementos de datos estructurados, incluyendo BreadcrumbsList. Puede decirte cuántas páginas de tu web tienen datos estructurados no válidos, o ni siquiera están presentes.
Auditoría del sitio también te dirá qué páginas de tu web contienen datos estructurados no válidos (como el esquema de breadcrumb) y cómo solucionarlo.
Con este informe, puedes centrar rápidamente tus esfuerzos y asegurarte la navegación breadcrumb se implementan correctamente en toda la web.
Funciones mejoradas de navegación y búsqueda
La navegación basada en atributos y rutas, especialmente de forma combinada, puede ayudar a los usuarios a filtrar el contenido de la web, lo que significa que es posible encontrar el contenido de forma más rápida y fácilmente.
Los usuarios pueden utilizar breadcrumb basadas en atributos como filtros de búsqueda, y breadcrumb basadas en rutas para volver a esos resultados filtrados después de hacer clic, lo que podría mejorar la experiencia de usuarios, especialmente en webs ecommerce.
5 consejos para una navegación eficaz con breadcrumb
Ahora que sabes qué tipos de breadcrumb existen y sus ventajas, el siguiente paso es ponerlas en práctica. A continuación encontrarás 5 consejos que te ayudarán a aprovechar al máximo la navegación por breadcrumb.
Utiliza solo la navegación por breadcrumb que tenga sentido para TU web
La navegación por breadcrumb suele tener más sentido si la estructura de tu contenido tiene más de dos niveles. Si tienes una estructura plana, en la que todo está a un solo clic de la página de inicio, es probable que no añadan ninguna información real o valor a tus visitantes.
Considera el tipo de contenido que ofreces en tu web y cómo lo encuentran los usuarios. En la mayoría de los casos, un sistema basado en jerarquías será la opción más eficaz, ya que refleja directamente cómo está organizado tu contenido.
Sin embargo, si diriges un ecommerce, por ejemplo, las páginas de productos individuales pueden tener muchos atributos diferentes que se comparten en varias categorías (por ejemplo, talla, color, marca). En ese caso, también puede tener sentido utilizar una combinación de breadcrumb basadas en atributos y rutas para ayudar a los usuarios a encontrar los productos que buscan.
Utiliza una navegación que sea útil para tu audiencia
Cuando decidas si utilizar breadcrumb y cómo hacerlo, piensa en cómo suele interactuar tu público con tu web. Pregúntate:
- ¿Cuál es la información clave que quiero que el público encuentre?
- ¿Qué páginas son las más y las menos populares?
- ¿Cuáles son las páginas más y menos accesibles?
Si conoces otras web que tu audiencia suele visitar, especialmente si son compatibles con tu mercado o compartes nicho, toma nota de su estructura, y de cómo utilizan la navegación por migas de pan. Puede darte una pista de qué es lo que esperan ver los usuarios.
Asumiendo que el contenido de tu web está estructurado de forma lógica, el siguiente paso es asegurarte de que tu navegación sigue esa estructura de forma clara y coherente. He aquí algunas cosas que debes tener en cuenta:
- Utiliza una nomenclatura coherente en todas las páginas.
- Haz que tus breadcrumb sean breves, utilizando el menor número de palabras posible.
- Si es posible, empléalas para incorporar palabras clave adicionales.
- Asegúrate de que tus navegación se muestra en un orden lógico (es decir, las breadcrumb basadas en la ubicación deben ser cada vez más específicas).
Organiza tus breadcrumb de forma lógica
La mayoría de los sitios muestran este tipo de navegación en la mitad superior de la página, generalmente justo debajo del menú de navegación principal, o justo encima del contenido de la página. Por ejemplo, IKEA coloca las suyas directamente debajo de la navegación principal y de la barra de búsqueda:
Sin embargo, tus necesidades pueden variar en función de tu web, de lo que esperen tus clientes y de lo que sea habitual en tu sector. Si no estás seguro, considera la posibilidad de investigar las webs de tus competidores para ver cómo han usado las breadcrumb en su navegación.
Haz que el diseño sea sencillo
El diseño de las breadcrumb debe ser lo más sencillo y discreto posible, para que sean útiles sin distraer al lector del contenido real de la página. Por eso, en muchas webs, tienen el mismo aspecto que los enlaces de texto normales.
Por ejemplo, Nordstrom optó por este diseño:
Se encuentran cerca de la esquina superior derecha de la pantalla, en una tipografía pequeña pero legible y coherente con el resto de su web. Incluso los separadores entre las categorías son sencillos. Estas breadcrumb son fáciles de localizar y entender, pero no llaman la atención más de lo necesario.
Compara tus breadcrumb
Tanto si es la primera vez que utilizas esta navegación como si estás aprovechando para actualizar los nombres de las categorías o ajustar su disposición, es una buena idea realizar pruebas antes de decidirte por una u otra opción. Puede ayudarte a detectar y resolver cualquier posible resultado negativo antes de que tenga un impacto importante en toda tu web (SplitSignal puede ayudarte con esta tarea).
Las pruebas A/B funcionan mejor con cambios más pequeños e incrementales, así que si vas a hacer varias actualizaciones, es mejor testarlas de una en una. De este modo, tu prueba arrojará resultados más fiables, y podrás actualizar tu web con confianza en tu decisión.
Mejora tu SEO y UX con la navegación por breadcrumb
La navegación por breadcrumb puede parecer sencilla, pero asegurarse de que funcionan de forma eficaz, es fácil de usar y es coherente en todas las páginas puede ser más complejo.
Herramientas como Auditoría del sitio pueden ayudarte a identificar fácilmente problemas técnicos y errores relacionados con las breadcrumb de tu web, el marcado Schema, la rastreabilidad y mucho más, ayudando a garantizar que tu navegación con breadcrumb está impulsando tu SEO y añadiendo valor a quienes visitan tu web.