Breadcrumb

Es una forma secundaria para navegar en Internet a través de enlaces de diferentes páginas en el sitio. Los breadcrumbs marcan la ruta de navegación del usuario dentro del sitio, lo que le permite regresar al punto de partida en el cuál inició su búsqueda.

📌 ¿Qué es?

Breadcrumb se traduce del inglés como “migas de pan”, haciendo referencia al cuento de “Hansel y Gretel” de los hermanos Grimm. La idea del término es asociarlo con la ruta de páginas por las cuál el usuario llegó a la página donde está, de forma que pueda decidir volver sobre sus pasos cuando lo necesite. Suele ser muy utilizado durante el diseño web de tiendas online.

La verdad es que esto permite perfeccionar la experiencia de navegación del usuario, ya que no solo tendrá la opción de retroceder un paso, sino incluso hasta la página principal haciendo un solo clic.

📌 ¿Para qué sirve?

Como consecuencia de lo anterior, el sitio web también puede mejorar su posicionamiento web en la página de resultados de buscadores, ya que la experiencia de usuario es uno de los factores más importantes para la indexación.

Igualmente, le añade estructura y jerarquización a la navegación, haciendo una línea lógica en la navegación del usuario que le muestra el recorrido de su ruta. Asimismo, el breadcrumb usa signos de escritura para la separación de sus categorías, generalmente un signo mayor que (>).

Es muy útil en blogs, ya que estos suelen tener muchos enlaces de contenidos diferentes, categorías, etiquetas y otros tipos de archivos. De esta forma, el usuario puede recorrer todas las páginas que quiera sin perderse del tema principal.

📌 Tipos de breadcrumbs

Las migas de pan se clasifican según la estructura del sitio web y se diferencian de la siguiente forma.

  • Basados en directorios: En este caso, cada miga se encuentra dentro de un directorio en el sistema de ficheros. Por ejemplo en el caso de WordPress estos ficheros serían las categorías de las entradas del blog, suele ser el método más utilizado.
  • Basados en el historial de navegación: En lugar de mostrar una estructura detallada, hace algunas referencias asociadas a las visitas anteriores de ese usuario, que se encuentran almacenadas en el caché de su historial de navegación.
  • Atributos del contenido: Se clasifican según las características de los productos, es más utilizado dentro de las tiendas online. Con ellas se puede jerarquizar el tipo de producto, categoría, marca, modelo, función, colores, entre otros.

📌 Ejemplo de breadcrumb

Como ya sabes, las migas de pan suele separarse entre sí utilizando un signo de mayor qué, normalmente, esta estructura suele estar posicionada en la cabecera de la página, justo debajo del menú principal. En esta imagen puedes observar cómo funciona dentro del sitio web de Nestlé, para la sección de Cooking With Kids o “cocinando con los niños” verás una ruta marcada como la siguiente, desde la página principal pasando por Nuestras Historias.

breadcrumb ejemplo

📌 Más información sobre breadcrumb

Pin It on Pinterest