¿Qué son los Breadcrumbs?

En el mundo del diseño web nos encontramos con muchos términos misteriosos como los “breadcrumbs”. ¿Sabes qué significa esta particular palabra que da hambre solo de oírla? ¡Son mucho más que migas de pan!

Es uno de esos elementos que pasan totalmente desapercibidos hasta que los necesitamos: Se sitúan normalmente en la misma parte de la página web: Parte superior, justo debajo de la cabecera y te suele hacer falta cuando has navegado por varias páginas del sitio web, queremos consultar páginas de niveles superiores, etc…

 

Significado de Breadcrumbs o migas de pan

Las migas de pan, más conocidas como breadcrumbs, se refieren al hecho de poner en todas las pantallas los títulos del menú, marcando una especie de ruta. Es algo así como mostrar Inicio > Categorías > X categoría.

Es de gran importancia debido a que estamos ante uno de los requerimientos del W3C para conseguir el nivel A de accesibilidad web. Es decir, facilitar a los usuarios la navegabilidad de manera más intuitiva por la web. También está muy relacionado con la usabilidad, la experiencia de uso y la jerarquía de una web.

breadcrumbs zara jpg
Ejemplo de Breadcrumbs en los SERP’s mediante fragmentos enriquecidos «rich snippets».

 

Con el paso de los años, las páginas web son cada vez más complejas. De ahí a que haya surgido este sistema, para que se pueda guiar a los usuarios y ayudarles a que no se pierdan mientras navegan. 

Una página poco intuitiva que no invierta en migas de pan, es más probable que sea abandonada por no encontrar la información que se está buscando. Y esto es algo que se debe analizar para que no pase.

Los motores de búsqueda como puede ser en el caso de Google, tienden a premiar su uso, ya que están ofreciéndole a los usuarios una mejor experiencia de navegación. Su uso, por tanto, favorece al Pagerank y ayuda al posicionamiento de las páginas que los incorporan, por lo que es muy recomendable.

 

¿Para qué sirven las migas de pan en diseño web?

Como ya te adelantamos, los breadcrumbs permiten determinar el rastro que se ha seguido dentro de una página web. De tal forma que el navegante pueda saber, en todo momento, en donde se encuentra y cómo volver atrás o ir hacia adelante si lo desea. Es decir, es una especie de ayuda para navegar sin problemas ¡y sin perdernos por el sitio web que estemos visitando! 

Es una marca que denota calidad en el diseño web y, dado que genera buen impacto a ojos de Google, siempre es mejor utilizarlo que prescindir de ello. Por este motivo necesitas conocerlo bien (¡para algo hacemos esta guía!).

Ventajas de las Breadcrumbs

Como ya habrás deducido, la implementación de migas de pan no afecta solo a la navegación web, son bastante relevantes también para el posicionamiento orgánico (SEO) y la experiencia de usuario (UX):

✅  Reducen la tasa de rebote y aumentan el tiempo de permanencia en la página: Gracias a que las breadcrumbs sirven de guía para saber donde nos encontramos dentro de una web, dándonos la opción de navegar directamente a otras categorías o páginas de nivel superior, por ejemplo.

✅  Mejoran la experiencia de usuario: Al contar con esa especie de guía, es más fácil que el usuario la estructura en su cabeza, lo que facilita la navegación y el acceso a todos los niveles de la página.

✅  Ofrecen información a los buscadores, favoreciendo el SEO: Los rastreadores lo tienen más fácil para evaluar, estructurar y jerarquizar las páginas gracias a los breadcrumbs de enlaces y textos-ancla de tu elección (naturales y relevantes). Además, no olvides que en la actualidad los algoritmos de búsqueda le dan una importancia fundamental a la experiencia de usuario. Además, también refuerzan el enlazado interno, ditribuyendo la autoridad de la página.

✅  Aumenta el control en la navegación por el sitio: Si tanto los menús como las migas de pan están bien implementadas, los usuarios contarán con dos herramientas para guiarse por el sitio.

breadcrumbs 650x377 jpg

¿Cómo se añaden migas de pan en WordPress?

Si tienes una página web en WordPress, puedes añadir los breadcrumbs muy fácilmente por medio de plugins. Tenemos algunos muy buenos como Yoast SEO y Breadcrumb NavXT, más dirigido a sitios web grandes o páginas de comercio electrónico. El primero es completamente imprescindible para mejorar el posicionamiento SEO, configurar títulos, meta descripciones y muchos más parámetros de una manera muy sencilla. Por eso te recomendamos que lo tengas siempre instalado.

Tras instalar Yoast SEO para WordPress, deberás activar y configurar los breadcrumbs. Para ello, tendrás que ir a SEO > Apariencia en el buscador > Migas de pan. Desde ahí simplemente hacer clic en “Activar las migas de pan” y listo. 

Luego solo queda que lo configures en base a tus necesidades, a cómo quieres mostrarlo. También puedes dejarlo prácticamente por defecto. Y si prefieres, recuerda que desde Ensalza podemos echarte una mano para activar los breadcrumbs en tu página web y darle más calidad a tu sitio.

#ConsejoEnsalza: Lo ideal es que sea cual sea el plugin que utilices para favorecer la accesibilidad a tu página web, sea totalmente compatible con el tema, de forma que no tengas ni que insertar código PHP en los ficheros de los sitios web. Si no tienes todo esto muy claro, siempre puedes contactar con nuestra área de desarrollo web a medida y te ayudaremos a configurar todos estos elementos en tu WordPress.

¿Te apuntas a nuestra newsletter?

* Para cumplir con la nueva Ley de Protección de Datos y que tus datos estén seguros con nosotros, debes leer y aceptar nuestra política de privacidad. Tus datos serán gestionados por nosotros, Ensalza S.L y almacenados en Mailchimp, nuestro proveedor de mailing. No tenemos intención de ceder tus datos a terceros salvo mandato legal y siempre podrás ejercer tus derechos sobre ellos. Puedes informarte sobre nuestra política de privacidad al pie de esta página.

#ensalzamola

#ensalzamola

Somos un grupo de gente maja que trabajamos codo con codo para que tus proyectos e ideas tomen forma.

Diseñamos, programamos y marketeamos. Conoce más sobre nuestro trabajo en ensalza.com.

¿Necesitas una web profesional?