Breadcrumbs: Tipos, Ventajas y Buenas Prácticas

Semrush Team

ago 22, 20238 min de lectura
Breadcrumbs
Compartir

TABLA DE CONTENIDOS

¿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:

Ejemplo de breadcrumbs de Nordstrom.

La navegación por breadcrumbs (o migas de pan) es un elemento importante en tu web por dos razones:

  1. Afecta a la experiencia del usuario. Las migas de pan o breadcrumbs hacen que navegar por tu web sea más fácil.
  2. 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:

Infografía sobre las arquitecturas web.

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: 

Breadcrumbs jerárquicas en la web 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:

Ejemplo de breadcrumbs basadas en atributos.

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: 

Ejemplo de breadcrumbs basadas en ruta.

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:

Ejemplo de breadcrumbs en los resultados de búsqueda.

Compara este resultado con otra web:

Ejemplo de una web sin breadcrumbs.

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".

Ver detalles del marcado con Semrush.

La herramienta te mostrará si ha detectado datos estructurados de breadcrumbs en tu web.

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. 

Analiza los elementos no válidos del marcado de tu web con Semrush.

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".

La herramienta también ofrece consejos sobre cómo solucionar aquellos elementos que no sean válidos.

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.

Paginga de Wait But Why.

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.

Ejemplo de breadcrumbs de Dell.

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.

Walmart utiliza la barra oblicua para separar artículos.

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á.

El último elemento del rastro de breadcrumbs muestra la ubicación actual del usuario.

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:

Utiliza un diseño sencillo en tus breadcrumbs.

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".

Plugins en WordPress.

Busca "Yoast" y haz clic en "Instalar ahora". Y luego pulsa el botón "Activar" que aparece una vez completada la instalación.

Instala Yoast SEO.

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.

Edita la apariencia del archivo de temas.

En el editor de temas, pega el código que has copiado en la sección del archivo header.php de tu tema. 

Editor de apariencia en WordPress.

A continuación, haz clic en "Actualizar archivo" para guardar los cambios.

Guarda los cambios que hayas realizado.

Después, ve a "Yoast SEO" > "Configuración" en la barra lateral.

Navegación de la configuración de Yoast SEO.

A continuación, desplázate por los ajustes disponibles para el plugin Yoast y haz clic en "Avanzado" > "Breadcrumbs".

Navega hasta las Breadcrumbs.

Verás un formulario para configurar tus breadcrumbs en función de cómo quieras que aparezcan en tu web.

Formulario de breadcrumbs.

Por último, activa la opción "Habilitar breadcrumbs para tu tema" que se encuentra debajo del formulario.

Habilita breadcrumbs para tu tema.

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.

Compartir
Author Photo
From this account we share helpful ways to use the Semrush toolkit to achieve your SEO goals!
Más sobre esto