¿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. Desde Factoría Creativa te lo explicamos.
Tabla de contenidos
- ¿Qué son los breadcrumbs?
- Tipos de navegación por breadcrumbs
- Por qué los breadcrumbs son importantes para tu sitio web
- Qué tener en cuenta cuando añadas breadcrumbs a tu web
¿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.
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.
¡No dejes que tu sitio web sea un laberinto para tus visitantes! Implementa los breadcrumbs o migas de pan y mejora la navegación, la experiencia del usuario y el rendimiento SEO de tu página. Haz que cada clic cuente y guía a tus usuarios a través de tu sitio de manera efectiva. ¡Adelante, optimiza tu sitio hoy mismo y observa cómo mejora la interacción de tus visitantes! Recuerda, un sitio fácil de navegar es un sitio más exitoso, En Factoria Creativa te ayudamos a crear y diseñar sitios web exitos.