¿Qué es la Navegación Breadcrumbs?
La navegación por breadcrumbs es un rastro de enlaces de texto (breadcrumbs) que indican a los usuarios dónde se encuentran en una web y cómo han llegado hasta allí.
Suelen aparecer en la parte superior de la página.
Aquí tienes un ejemplo:
La navegación por breadcrumbs (o migas de pan) es un elemento importante en tu web por dos razones:
- Afecta a la experiencia del usuario. Las migas de pan o breadcrumbs hacen que navegar por tu web sea más fácil.
- Beneficia al SEO. Google recompensa a las webs que dan prioridad a la experiencia de usuario con un mejor posicionamiento.
Además, las breadcrumbs ayudan a Google a comprender la jerarquía de tu web y a distribuir el PageRank por toda tu web, posicionándola mejor.
En este post, te contaremos los distintos tipos de breadcrumbs y las ventajas de utilizarlas. También te ofrecemos consejos e ideas sobre cómo puedes implementarlas en WordPress.
Pero antes, aclaremos una cosa:
¿Cuándo Debes Utilizar las Breadcrumbs?
Las breadcrumbs no son para todos. Solo son beneficiosas para tu web cuando tiene una arquitectura profunda.
Es decir, cuando múltiples categorías se dividen en subcategorías y a su vez estas subcategorías apuntan a páginas individuales.
Las webs ecommerce son un ejemplo perfecto de arquitectura profunda.
Suelen ofrecer distintos productos agrupados en varios niveles de categorías.
De esta forma:
Evita utilizar breadcrumbs si tienes una arquitectura web plana de un solo nivel. Es decir, si las páginas de tu web están a un solo clic de la home.
En este caso, las breadcrumbs son innecesarias, porque no añaden ningún valor a la navegación de los usuarios.
¿Cuáles son los Distintos Tipos de Breadcrumbs?
Hay varios tipos de breadcrumbs.
1. Breadcrumbs Jerárquicas
Las breadcrumbs basadas en la jerarquía siguen la arquitectura (o "jerarquía") de tu web.
Echa un vistazo a este ejemplo de Target:
En este caso, el camino que recorre el usuario comienza con la categoría de nivel superior, es decir toda la web de Target.
A continuación, el usuario avanza por subcategorías cada vez más específicas antes de llegar a la página en la que se encuentra.
Este tipo de breadcrumbs son especialmente útiles para los usuarios que llegan a tu web desde los resultados de búsqueda de Google.
Les permite volver rápidamente hacia arriba en la jerarquía web para seleccionar más opciones si lo desean.
2. Breadcrumbs Basadas en Atributos
Las breadcrumbs basadas en atributos generan un rastro dinámico basado en los diferentes filtros que los usuarios pueden aplicar en una página.
Se utilizan sobre todo en webs ecommerce, donde suelen ir de la mano de las breadcrumbs basadas en jerarquías.
Por ejemplo:
En una web ecommerce, esta navegación de breadcrumbs es útil cuando los usuarios quieren ver todos los productos que comparten los mismos atributos.
3. Breadcrumbs Basadas en Ruta
Las breadcrumbs basadas en ruta muestran el camino único que siguieron los usuarios para llegar a una página concreta.
En lugar de enumerar toda la ruta, este tipo de navegación se implementa normalmente con un botón de "volver", que ayuda a los usuarios a volver a la página anterior.
Aquí tienes un ejemplo de Adidas:
Este tipo de breadcrumbs no son de utilidad en algunos casos, ya que, simplemente, hacen el mismo papel que el botón "atrás" de tu navegador.
Por eso, no son la opción más popular entre los diseñadores de experiencia de usuario (UX).
¿Cuáles son las Ventajas de Utilizar Breadcrumbs?
Utilizar breadcrumbs tiene muchas ventajas.
1. Fomentan la Navegación y Reducen la Tasa de Rebote
Gracias a las migas de pan o breadcrumbs, los usuarios pueden navegar por tu web de forma más sencilla, lo que ayuda a que visiten más páginas.
Por ejemplo, en una web ecommerce, los usuarios pueden llegar a una página de producto directamente desde Google.
Si el producto no es lo que buscan, las breadcrumbs pueden ayudarles a navegar rápidamente para ver productos de la misma categoría.
Lo que también reduce la tasa de rebote.
2. Son Buenas para la UX
Las breadcrumbs reducen el número de pasos que deben dar los usuarios para explorar la arquitectura de la web.
En una web que no cuenta con breadcrumbs, el usuario deberá hacer clic varias veces en el botón "Atrás" si no encuentra lo que busca.
Con las migas de pan, puede hacerlo con un solo clic e incluso retroceder a categorías más generales.
3. Mejoran la Estructura de Enlaces Internos y la Rastreabilidad
Las breadcrumbs mejoran la rastreabilidad de tu web gracias a la existencia de enlaces internos entre páginas y categorías.
Proporcionan a los buscadores una forma de entender la estructura de tu web, descubrir páginas más profundas e indexar todas las páginas.
Esto es importante utilizarlas si quieres que tus páginas aparezcan en los resultados de las búsquedas y atraigan tráfico a tu web.
4. Aparecer en los Resultados de Búsqueda
Además, las breadcrumbs son importantes porque aparecen en los resultados de Google, justo por encima de la etiqueta del título y de la meta descripción.
Las páginas con breadcrumbs SEO aparecen así en los resultados de búsqueda:
Compara este resultado con otra web:
La página con breadcrumbs deja claro a los usuarios a dónde llegarán cuando hagan clic.
Como consecuencia, una página con breadcrumbs puede conseguir más clics que una página sin migas de pan.
Nota: no olvides implementar el marcado de datos estructurados de las breadcrumbs para asegurarte de que Google las entiende perfectamente y las muestra adecuadamente en los resultados de búsqueda.
Una vez que añadas el marcado, puedes utilizar la herramienta Auditoría del sitio de Semrush para comprobar si tu implementación tiene algún error.
Empieza por crear un nuevo proyecto en la herramienta y ejecuta un rastreo completo de tu web.
Una vez completado, ve a "Marcado" y haz clic en "Ver detalles".
La herramienta te mostrará si ha detectado datos estructurados de breadcrumbs en tu web.
Además, te indica si hay algún elemento no válido.
La herramienta también ofrece consejos sobre cómo solucionar aquellos elementos que no sean válidos. Solo tienes que hacer clic en el número de la columna "No válido". Y luego haz clic en el botón "Por qué y cómo solucionarlo".
Utilizando este informe, puedes identificar y solucionar problemas de marcado de breadcrumbs en tu web.
Buenas Prácticas de Navegación por Breadcrumbs
Cuando diseñes la navegación por breadcrumbs para tu web, sigue las prácticas recomendadas que se indican a continuación.
1. Utiliza Breadcrumbs solo si tiene Sentido para tu Web
Merece la pena volver a mencionarlo:
Utilizar breadcrumbs solo tiene sentido si la estructura de tu web tiene varios niveles más profundos.
Si tienes una estructura de sitio de un solo nivel, en la que todo está a un solo clic de la página de inicio, es probable que las breadcrumbs no aporten mucho valor.
Por ejemplo, en Wait But Why, no tiene sentido implementar breadcrumbs. Esta web no tiene una estructura profunda: solo muestra entradas individuales que están a un clic de la página de inicio.
2. Utiliza Breadcrumbs como Apoyo a la Navegación Principal
Las breadcrumbs son una forma de navegación adicional. Por tanto, no deben sustituir a tu menú de navegación principal.
Piensa en las breadcrumbs como una forma alternativa de que los usuarios naveguen por tu web.
En el ejemplo siguiente, Dell utiliza las breadcrumbs para apoyar su navegación principal.
3. Utilizar Separadores entre Niveles Individuales
El rastro de breadcrumbs es más intuitivo cuando se separa con símbolos especiales.
El signo "mayor que" (>) es el más utilizado.
Pero también puedes utilizar una flecha (→) o una barra oblicua (/).
Walmart, por ejemplo, utiliza una barra oblicua (/) para separar los artículos en su rastro de breadcrumbs.
4. No Enlaces a la Página Actual en la Ruta de Breadcrumbs
El último elemento del rastro de breadcrumbs muestra la ubicación actual del usuario.
Como los usuarios ya están en la página, añadir un enlace a la página actual no tiene sentido.
Es poco probable que los usuarios hagan clic y no sirve para nada.
En el ejemplo siguiente, podemos ver que el último elemento del rastro de breadcrumbs no incluye un enlace. Así, se indica al usuario en la página en la que está.
5. Utiliza un Diseño Sencillo
El diseño de las breadcrumbs debe ser lo más sencillo posible, para que sea útil sin distraer al lector del contenido real de la página.
Aquí tienes un ejemplo de Slack:
Como puedes ver, aparecen en la parte superior, en la esquina superior derecha de la web, en una fuente pequeña pero legible y coherente con el resto de la web.
Incluso los separadores entre las categorías son sencillos.
Son unas breadcrumbs fáciles de localizar y comprender. Pero no llaman la atención más de lo estrictamente necesario.
Cómo Añadir Breadcrumbs a WordPress
Puesto que WordPress es el CMS más popular del mundo, vamos a ver a continuación cómo puedes añadir breadcrumbs en WordPress.
Algunos temas de WordPress admiten breadcrumbs desde el principio.
Si tu tema no admite este tipo de navegación por migas de pan, puedes utilizar un plugin como Yoast SEO.
Ve a "Plugins" > "Añadir nuevo".
Busca "Yoast" y haz clic en "Instalar ahora". Y luego pulsa el botón "Activar" que aparece una vez completada la instalación.
Antes de poder utilizar Yoast para añadir breadcrumbs, tienes que añadir un pequeño fragmento de código a la sección header.php de tu tema.
Nota importante: ten cuidado al editar el archivo de tu tema. Si no tienes conocimientos técnicos, te recomendamos que pidas ayuda a un desarrollador. Cambiar el archivo de tu tema puede acarrear grandes problemas para tu web si cometes errores.
Si te sientes cómodo, copia el código que aparece a continuación.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>Ve a "Apariencia" > "Editor de archivos de temas" desde la barra lateral.
En el editor de temas, pega el código que has copiado en la sección del archivo header.php de tu tema.
A continuación, haz clic en "Actualizar archivo" para guardar los cambios.
Después, ve a "Yoast SEO" > "Configuración" en la barra lateral.
A continuación, desplázate por los ajustes disponibles para el plugin Yoast y haz clic en "Avanzado" > "Breadcrumbs".
Verás un formulario para configurar tus breadcrumbs en función de cómo quieras que aparezcan en tu web.
Por último, activa la opción "Habilitar breadcrumbs para tu tema" que se encuentra debajo del formulario.
Monitoriza tus Migas de Pan con Semrush
Las breadcrumbs son un elemento de experiencia de usuario esencial. No las pases por alto.
Facilitan la navegación de tu web y benefician a tus esfuerzos SEO.
La herramienta Auditoría del sitio de Semrush puede ayudarte a identificar y solucionar problemas relacionados con tus breadcrumbs, y que sigan apareciendo en los resultados de búsqueda.