Tabla de contenidos:<\/p>
- \u00bfQu\u00e9 son las breadcrumbs?<\/a><\/li>
- \u00bfPor qu\u00e9 se llaman breadcrumbs o migas de pan?<\/a><\/li>
- Tipos de breadcrumbs m\u00e1s utilizadas<\/a>
- 1. Breadcrumbs jer\u00e1rquicas<\/a><\/li>
- 2. Breadcrumbs de historial de navegaci\u00f3n<\/a><\/li>
- 3. Breadcrumbs por atributos<\/a><\/li><\/ul><\/li>
- Ventajas de usar migas de pan en una web<\/a><\/li>
- C\u00f3mo configurar breadcrumbs en WordPress<\/a>
- C\u00f3mo a\u00f1adir breadcrumbs sin plugins<\/a>
- Paso 1: Crear la funci\u00f3n para los breadcrumbs<\/a><\/li>
- Paso 2: A\u00f1adir la funci\u00f3n a las plantillas del tema<\/a><\/li>
- Paso 3: Marca el estilo de tus migas de pan con CSS<\/a><\/li><\/ul><\/li>
- C\u00f3mo a\u00f1adir breadcrumbs con plugins<\/a>
- 1. A\u00f1adir las breadcrumbs a los archivos de la plantilla<\/a><\/li>
- 2. A\u00f1adir las breadcrumbs con un shortcode<\/a><\/li>
- 3. A\u00f1adir breadcrumbs en Elementor PRO<\/a><\/li><\/ul><\/li><\/ul><\/li>
- Otros plugins para a\u00f1adir migas de pan f\u00e1cilmente<\/a>
- Yoast SEO<\/a><\/li>
- Breadcrumb NavXT<\/a><\/li><\/ul><\/li>
- Mejores pr\u00e1cticas para implementar breadcrumbs (seg\u00fan Google)<\/a><\/li>
- Resumen final sobre las migas de pan<\/a><\/li><\/ul><\/div>\n\n
\u00bfQu\u00e9 son las breadcrumbs?<\/span><\/h2>\n
Te lo explico con un ejemplo.<\/p>\n
Seguro que m\u00e1s de una vez has navegado por una tienda online de tecnolog\u00eda. Entras en la p\u00e1gina principal, vas a la secci\u00f3n de \u201cPort\u00e1tiles\u201d, filtras por \u201cPort\u00e1tiles gaming\u201d y haces clic en un modelo concreto. \u00bfY ahora, si quieres volver atr\u00e1s para ver de nuevo la p\u00e1gina con todos los port\u00e1tiles gaming, tienes que usar el bot\u00f3n de \u00abIr a la p\u00e1gina anterior\u00bb? Pues, si esa tienda tiene breadcrumbs o migas de pan, no.<\/p>\n
Y lo mismo si haces una pausa para sacar al perro y cuando vuelvas no te acuerdas exactamente de d\u00f3nde estabas dentro de la tienda. Solo tienes que mirar las breadcrumbs para volver a situarte. Al final, las breadcrumbs o migas de pan funcionan como si fueran las huellas de tus pisadas y te muestran el camino que has seguido dentro de una web. En el ejemplo que te estaba poniendo, tus breadcrumbs ser\u00e1n algo as\u00ed:<\/p>\n
Inicio > Port\u00e1tiles > Port\u00e1tiles para gaming > Modelo X<\/strong><\/p>\n
Cada uno de estos t\u00e9rminos va a funcionar a modo de enlace, para que puedas hacer clic cuando quieras volver atr\u00e1s sin perderte. Y, ojo, que las breadcrumbs no son solo \u00fatiles para ti como usuario, sino que tambi\u00e9n est\u00e1n recomendadas si quieres mejorar el SEO<\/a><\/strong>. De hecho, Google recomienda su uso porque mejora la experiencia de navegaci\u00f3n y ayuda a entender mejor la estructura de la web. Despu\u00e9s veremos m\u00e1s ventajas, pero tambi\u00e9n hay estudios que demuestran que implementar breadcrumbs puede reducir la tasa de rebote y aumentar el tiempo de permanencia en la web.<\/p>\n
Y lo mejor es que no solo sirven para tiendas online. Tambi\u00e9n puedes a\u00f1adir breadcrumbs en tu blog, en un foro y en pr\u00e1cticamente cualquier otro tipo de web que tenga una estructura jer\u00e1rquica.<\/p>\n
\u00bfPor qu\u00e9 se llaman breadcrumbs o migas de pan?<\/span><\/h2>\n
Si te preguntas esto, tienes que repasar tus cuentos de la infancia. El nombre de \u00abbreadcrumbs\u00bb o \u00abmigas de pan\u00bb se le ha puesto a este sistema de ayuda a la navegaci\u00f3n a ra\u00edz de la historia de Hansel y Gretel. \u00bfTe acuerdas? Son dos hermanos cuya madre abandona en el bosque y ellos (que se huelen la tostada) deciden dejar un rastro de migas de pan para poder despu\u00e9s encontrar el camino de vuelta a casa (aunque luego los p\u00e1jaros se las comen y se pierden, pero eso es otra historia).<\/p>\n
\u00a1Entonces!<\/p>\n
En Internet, las migas de pan cumplen un prop\u00f3sito parecido a las del cuento: te ayudan a saber d\u00f3nde est\u00e1s dentro de una web y, adem\u00e1s, a volver con facilidad a un punto anterior de tu recorrido. As\u00ed, aunque la web en la que est\u00e1s tenga muchas categor\u00edas o p\u00e1ginas, evitas perderte (y, en este caso, el truco s\u00ed funciona porque no hay p\u00e1jaros que se coman tus migas).<\/p>\n
Tipos de breadcrumbs m\u00e1s utilizadas<\/span><\/h2>\n
Ahora ya sabes lo que son las breadcrumbs, as\u00ed que vamos a ver los distintos tipos de migas de pan que existen para que sepas si alguno de ellos se puede ajustar a tu web. Para que esta secci\u00f3n te sea m\u00e1s \u00fatil, adem\u00e1s de explicarte en qu\u00e9 consiste cada tipo de breadcrumb, te explicar\u00e9 tambi\u00e9n en qu\u00e9 casos es recomendable usarlo.<\/p>\n
Veamos.<\/p>\n
1. Breadcrumbs jer\u00e1rquicas<\/span><\/h3>\n
Las breadcrumbs jer\u00e1rquicas o de ubicaci\u00f3n son las m\u00e1s comunes. Sirven para indicarte en qu\u00e9 parte de un sitio web est\u00e1s en relaci\u00f3n con su estructura. B\u00e1sicamente, muestran el camino que va desde la p\u00e1gina de inicio hasta la secci\u00f3n en la que est\u00e1s. Gracias a ellas, puedes volver atr\u00e1s f\u00e1cilmente sin necesidad de usar el bot\u00f3n de \u00abAnterior\u00bb del navegador o de buscar en el men\u00fa la secci\u00f3n correcta.<\/p>\n
Por ejemplo, imagina que entras a una tienda online de ropa. Primero llegas a la p\u00e1gina de inicio, luego seleccionas la categor\u00eda \u00abZapatos\u00bb y despu\u00e9s eliges \u00abZapatillas de deporte\u00bb. En la parte superior de la p\u00e1gina ver\u00e1s algo como: Inicio > Zapatos > Zapatillas de deporte. Cada uno de esos elementos funcionar\u00e1 como un enlace, as\u00ed que si en alg\u00fan momento quieres volver a la secci\u00f3n de \u00abZapatos\u00bb sin empezar de cero, solo tienes que hacer clic ah\u00ed.<\/p>\n
Este tipo de breadcrumb es recomendable para cualquier sitio con una jerarqu\u00eda bien establecida, como tiendas online con m\u00faltiples categor\u00edas de productos, blogs organizados por temas o sitios corporativos con diferentes secciones. Facilitan mucho la navegaci\u00f3n porque te dan contexto sobre d\u00f3nde est\u00e1s y c\u00f3mo llegaste ah\u00ed. Adem\u00e1s, ayudan con el SEO, ya que los motores de b\u00fasqueda como Google las usan para entender mejor la estructura del sitio y, en algunos casos, los muestran directamente en los resultados de b\u00fasqueda.<\/p>\n
En definitiva, gracias a las breadcrumbs jer\u00e1rquicas la navegaci\u00f3n es m\u00e1s intuitiva y el contenido es m\u00e1s accesible, se reduce la tasa de abandono y resulta m\u00e1s f\u00e1cil explorar tu sitio sin perderse. Aqu\u00ed te dejo un ejemplo de breadcrumbs jer\u00e1rquicas de la web de PC Componentes:
![\"Ejemplo](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2025\/03\/Ejemplo-de-breadcrumbs-jerarquicas.png\" "\\"\\"")
<\/p>\n2. Breadcrumbs de historial de navegaci\u00f3n<\/span><\/h3>\n
Las breadcrumbs basadas en el historial de navegaci\u00f3n del usuario funcionan de manera un poco diferente a las breadcrumbs jer\u00e1rquicas. En lugar de mostrar en qu\u00e9 parte de la estructura del sitio est\u00e1s, te muestran el camino que has recorrido dentro de esa web, sin importar si este ha sido lineal o no. Es decir, se comportan m\u00e1s como el bot\u00f3n de \u00abAnterior\u00bb del navegador, pero con una ruta visual que puedes usar para retroceder cuando lo necesites.<\/p>\n
Por ejemplo, imagina que visitas una tienda online buscando un producto. Primero entras a la secci\u00f3n de ofertas, luego revisas una categor\u00eda de electr\u00f3nica, despu\u00e9s te interesa un televisor espec\u00edfico y, m\u00e1s tarde, decides ver otro tipo de productos pero sin seguir un orden jer\u00e1rquico. En ese caso, tus breadcrumbs podr\u00edan ser: Inicio > Ofertas > Electr\u00f3nica > Televisores > Modelo \u00abx\u00bb > Auriculares > Accesorios.<\/p>\n
Cada uno de estos enlaces representa un paso en tu recorrido dentro del sitio, pero no se sigue una estructura fija. Es un sistema de navegaci\u00f3n que yo no encuentro demasiado \u00fatil, ya que b\u00e1sicamente podr\u00edas darle a \u00abAtr\u00e1s\u00bb en el navegador y tener el mismo resultado. Adem\u00e1s, creo que pueden resultar confusas para el usuario cuando su historial de navegaci\u00f3n es demasiado amplio o ca\u00f3tico. De hecho, no se usan demasiado (son mucho m\u00e1s habituales las breadcrumbs jer\u00e1rquicas) y no he conseguido encontrar un ejemplo para ense\u00f1\u00e1rtelas.<\/p>\n
3. Breadcrumbs por atributos<\/span><\/h3>\n
Las breadcrumbs que funcionan por atributos son un poco diferentes a las jer\u00e1rquicas o las que van en funci\u00f3n del historial de navegaci\u00f3n. En lugar de mostrarte d\u00f3nde est\u00e1s dentro de la estructura del sitio o qu\u00e9 camino seguiste para llegar a ese punto, reflejan los filtros o caracter\u00edsticas que has seleccionado mientras navegas. Son muy comunes en tiendas online, donde los productos pueden tener distintas caracter\u00edsticas: talla, color, marca, rango de precios…<\/p>\n
Pongamos por caso que est\u00e1s buscando unas zapatillas en una tienda online. Aplicas filtros porque quieres que sean de color verde y de la talla 40. Si el ecommerce utiliza este tipo de breadcrumbs, no te va ense\u00f1ar una ruta jer\u00e1rquica (aunque puede que combinen ambos tipos), sino algo como: Color: Verde > Talla: 40. Y te permitir\u00e1n eliminar f\u00e1cilmente cada uno de esos atributos para recargar la selecci\u00f3n de producto sin ese filtro.<\/p>\n
No s\u00e9 si me he explicado, as\u00ed que te pongo un ejemplo de una tienda real:<\/p>\n
![\"Breadcrumbs](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2025\/03\/Ejemplo-de-breadcrumbs-por-atributos.png\" "\\"\\"")
\nSi te fijas bien, ver\u00e1s que la tienda online de Vans utiliza dos tipos de breadcrumbs. Las breadcrumbs jer\u00e1rquicas est\u00e1n en la parte de arriba (\u00abVans \/ Outlet\u00bb), pero en la columna izquierda se pueden elegir diferentes atributos, que pasar\u00e1n a tomar forma de breadcrumbs tambi\u00e9n. Son los que he marcado en rojo en la imagen y, como ves, se pueden eliminar con facilidad si cambias de idea sobre cualquiera de ellos.<\/p>\n\u00bfY para qu\u00e9 sirve esto?<\/p>\n
Pues para no tener que empezar la b\u00fasqueda desde cero. Por ejemplo, si decides que ya no quieres zapatillas verdes, puedes hacer clic en \u00abColor: Verde\u00bb para quitar ese filtro y ver todas las opciones disponibles en otros colores.<\/p>\n
Como te imaginar\u00e1s, este tipo de breadcrumbs resulta \u00fatil sobre todo en tiendas online y marketplaces con muchas opciones de personalizaci\u00f3n, donde los usuarios pueden refinar su b\u00fasqueda de acuerdo con el producto exacto que desean. \u00a1Son muy c\u00f3modas!<\/p>\n
Ventajas de usar migas de pan en una web<\/span><\/h2>\n
Ya te las he ido presentando a lo largo del post, pero quiero dejar las ventajas de las breadcrumbs resumidas en esta secci\u00f3n, para recapitular como es debido. Para hacer un resumen, lo dejar\u00e9 en que usar breadcrumbs en una web tiene un mont\u00f3n de beneficios, sobre todo si tu sitio tiene varias secciones o mucha informaci\u00f3n organizada en distintos niveles.<\/p>\n
Vamos por partes.<\/p>\n
1. Hacen que la navegaci\u00f3n sea m\u00e1s f\u00e1cil<\/strong>: Los usuarios siempre saben en qu\u00e9 parte del sitio est\u00e1n y pueden moverse entre secciones sin perderse. En vez de estar buscando c\u00f3mo volver atr\u00e1s, con un simple clic en la miga de pan que corresponda pueden volver al punto que quieran.<\/p>\n
2. Ahorran tiempo y reducen clics innecesarios:<\/strong> Lo que te dec\u00eda, en lugar de dar varios pasos atr\u00e1s para volver a una categor\u00eda, las breadcrumbs permiten hacerlo con un solo clic. Es una forma r\u00e1pida y directa de moverse por la web sin tener que usar el bot\u00f3n de \u00abatr\u00e1s\u00bb o abrir el men\u00fa una y otra vez.<\/p>\n
3. Ayudan al SEO:<\/strong> A Google, todo lo que sea entender con facilidad c\u00f3mo est\u00e1 estructurado un sitio le parece una maravilla. Adem\u00e1s, como te explicar\u00e9 m\u00e1s abajo, puedes utilizar datos estructurados (Schema) para ayudar a Google a mostrar tus breadcrumbs en sus resultados de b\u00fasqueda mediante fragmentos enriquecidos (rich snippets).<\/p>\n
4.<\/strong> Las breadcrumbs no ocupan casi espacio<\/strong>: Para lo pr\u00e1cticas que son, ten en cuenta que suponen solamente una l\u00ednea de texto con enlaces, as\u00ed que no saturan la pantalla ni complican el dise\u00f1o. A diferencia de un men\u00fa grande o un sistema de navegaci\u00f3n m\u00e1s complejo, las breadcrumbs son muy sencillitas y no estorban. Si el usuario no quiere usarlas, no le suponen ning\u00fan problema.<\/p>\n
5. Mejoran la experiencia de usuario<\/strong>: Para personas que no est\u00e1n tan familiarizadas con la web o que navegan desde el m\u00f3vil, las breadcrumbs hacen que moverse dentro de tu web resulte un proceso mucho m\u00e1s intuitivo.<\/p>\n
\u00bfM\u00e1s convencido? Pues vamos a ver lo que tienes que hacer para a\u00f1adir breadcrumbs a tu web.<\/p>\n
C\u00f3mo configurar breadcrumbs en WordPress<\/span><\/h2>\n
Lo mejor de todo es que a\u00f1adir breadcrumbs a tu web no es tan complicado como parece. En WordPress, puedes hacerlo de dos maneras: usando un plugin o agreg\u00e1ndolos manualmente con c\u00f3digo. En las siguientes secciones, te explico ambas opciones para que elijas la que mejor se adapte a lo que necesitas.<\/p>\n
C\u00f3mo a\u00f1adir breadcrumbs sin plugins<\/span><\/h3>\n
Si prefieres no depender de plugins y te gusta tener m\u00e1s control sobre el dise\u00f1o y la funcionalidad de tu web, puedes a\u00f1adir breadcrumbs manualmente a tu WordPress con un poco de c\u00f3digo. No es tan dif\u00edcil como parece, pero voy a darte instrucciones paso a paso que creo que te ser\u00e1n \u00fatiles.<\/p>\n
Paso 1: Crear la funci\u00f3n para los breadcrumbs<\/span><\/h4>\n
- Breadcrumb NavXT<\/a><\/li><\/ul><\/li>
- 2. A\u00f1adir las breadcrumbs con un shortcode<\/a><\/li>
- Paso 2: A\u00f1adir la funci\u00f3n a las plantillas del tema<\/a><\/li>
- Paso 1: Crear la funci\u00f3n para los breadcrumbs<\/a><\/li>
- 2. Breadcrumbs de historial de navegaci\u00f3n<\/a><\/li>
- \u00bfPor qu\u00e9 se llaman breadcrumbs o migas de pan?<\/a><\/li>
![\"Migas](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2025\/03\/Migas-de-pan-con-RankMath-300x181.png\" "\\"\\"")
<\/p>\n