Cómo mejoran los breadcrumbs el UX y lo SEO de tu sitio web

Seguro que has oído hablar de los breadcrumbs (migas de pan) en el marketing digital. Estos elementos mejoran la experiencia de usuario (UX) en tu sitio web y también son claves para mejorar el SEO. En esta guía, te explicaremos qué son, cómo funcionan y cómo implementarlos correctamente.

¿Qué son los breadcrumbs y para qué sirven?

Un breadcrumb es un elemento de navegación que muestra el camino que ha seguido el usuario dentro de la estructura de un sitio web.

Normalmente se muestran en la parte superior de la página e indican la jerarquía del contenido. Por ejemplo:

Desde la perspectiva de la experiencia de usuario (UX), el objetivo de los breadcrumbs es facilitar la navegación dentro del sitio web. Permiten a los usuarios saber en qué punto del sitio se encuentran y volver fácilmente a secciones superiores sin necesidad de utilizar el botón atrás del navegador (un botón que si piensas en él no existe en muchos de los dispositivos que usamos a día de hoy).

Sin embargo, desde el punto de vista SEO, los breadcrumbs también tienen una función muy importante. Ayudan a los motores de búsqueda a comprender la estructura del sitio web, a identificar la relación entre las diferentes páginas y a mejorar el rastreo y la indexación del contenido.

Además, cuando están correctamente implementados con datos estructurados, Google puede mostrar los breadcrumbs directamente a los resultados de búsqueda, lo que mejora la visibilidad y puede incrementar el CTR. Para que Google muestre tus breadcrumbs en el fragmento, y no en la URL modificada, utiliza el schema markup correspondiente.

Cómo implementar los breadcrumbs

Implementación de Schema Markup

Con el fin de maximizar los beneficios SEO, añade los datos estructurados con schema.org para breadcrumbs. Esto ayuda a Google a identificar y mostrar la ruta correctamente a los resultados de búsqueda. Puedes utilizar JSON-LD para garantizar que Google entienda correctamente la jerarquía de tu sitio web. 

Haz que cada parte sea un enlace

Los breadcrumbs no deben ser sólo indicativos, sino también clicables, excepto el último elemento (la plana donde estamos). Este enlace debe ser rastreable, href de toda la vida, nada de cosas raras con JS. Esto permite a los usuarios volver a cualquier sección anterior sin perderse en el camino, y al bote de Google.

Hacerlos visualmente claros

Utiliza separadores claros como el símbolo ">" para separar los diferentes niveles de la jerarquía y así mejorar la legibilidad de las breadcrumbs. Nuestra recomendación general es que los coloquios donde han estado siempre, por una cuestión de usabilidad y costumbres, arriba a la izquierda. En el tema mobile hay más debate y a veces puede ser contraproducente colocarlo allí, puedes buscar otras opciones. Ahora bien: ten presente que si colocas el hilo de Ariadna en PC pero lo escondes en mobile, a ojos de Google este enlace no existe. No lo hagas.

¿Dónde colocar los breadcrumbs?

Los breadcrumbs deberían estar en un lugar visible, generalmente en la parte superior de la página, para facilitar la navegación. En páginas de servicio, categoría de servicio, fichas de producto, o posts de blog, se pueden utilizar para mejorar la accesibilidad. Además, si utilizas un diseño responsivo, asegúrate de que los breadcrumbs sean accesibles tanto en dispositivos de sobremesa como en móviles.