{"id":31253,"date":"2024-11-12T12:39:33","date_gmt":"2024-11-12T12:39:33","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31253"},"modified":"2025-03-18T14:06:43","modified_gmt":"2025-03-18T14:06:43","slug":"Breadcrumbs","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/Breadcrumbs","title":{"rendered":"Breadcrumbs"},"content":{"rendered":"

\u00bfQu\u00e9 son los breadcrumbs o navegaci\u00f3n con migas de pan?<\/span><\/h2>\n
\n
\"Navegaci\u00f3n<\/a> <\/p>\n
Imagen:<\/b> Naveg. breacrumb – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Los breadcrumbs o migas de pan en espa\u00f1ol, son un m\u00e9todo de navegaci\u00f3n web secundaria que permite saltar f\u00e1cilmente entre diferentes secciones de un contenido online. Adem\u00e1s, facilita a la audiencia ubicarse espacialmente dentro de un sitio web.\n<\/p>\n

El t\u00e9rmino proviene del cuento de hadas \u201cHansel y Gretel\u201d, en el que los ni\u00f1os van dejando un rastro de migas de pan para encontrar el camino de regreso a casa a trav\u00e9s de un bosque.\n<\/p>\n

De igual forma, la navegaci\u00f3n con breadcrumbs ayuda a las usuarias\/os a navegar por el sitio web y a regresar a las p\u00e1ginas anteriores con facilidad. Se podr\u00eda decir, de forma m\u00e1s po\u00e9tica, que los breadcrumbs tambi\u00e9n van dejando un rastro para que las visitas se ubiquen dentro de una web y sepan c\u00f3mo han llegado hasta all\u00ed as\u00ed como qu\u00e9 otras p\u00e1ginas o contenidos componen el resto del sitio o la secci\u00f3n.\n<\/p>\n

Cabe mencionar que el uso de breadcrumbs es recomendado como soporte para la navegaci\u00f3n y resulta sumamente \u00fatil para navegar en aplicaciones y sitios web de gran tama\u00f1o o con m\u00faltiples subp\u00e1ginas, categor\u00edas, etc.\n<\/p>\n

Tipos de navegaci\u00f3n con breadcrumbs<\/span><\/h2>\n

Aun cuando es muy recomendable implementar alg\u00fan tipo de navegaci\u00f3n con migas de pan, hay diferentes tipos de breadcrumbs y elegir el m\u00e1s adecuado para un website depender\u00e1 del uso que se le quiera dar dentro del sitio y de c\u00f3mo se podr\u00eda adaptar mejor.\n<\/p>\n

As\u00ed pues, los breadcrumbs se dividen en 3 tipos: ubicaci\u00f3n, atributo y ruta.\n<\/p>\n

Ubicaci\u00f3n<\/span><\/h3>\n

La ubicaci\u00f3n por breadcrumbs es ampliamente utilizada en la web y ayuda a la audiencia a saber en qu\u00e9 p\u00e1gina se encuentran y c\u00f3mo esta se relaciona con el resto del sitio web.\n<\/p>\n

Este tipo de migas de pan funciona mejor en websites con una estructura de contenido jer\u00e1rquica, aunque en cualquier caso, depende en gran medida de la propia estructura del sitio.
\nPor ejemplo, un e-commerce puede dividir sus productos en categor\u00edas y etiquetarlas con breadcrumbs de ubicaci\u00f3n. De este modo, al navegar hacia la p\u00e1gina de un producto se genera un rastro entre la categor\u00eda, la p\u00e1gina de producto (que puede tener varias capas de profundidad) y el \u00edndice del sitio web.\n<\/p>\n

En este ejemplo, cada elemento representa una p\u00e1gina que est\u00e1 un nivel por encima de la p\u00e1gina a su derecha.\n<\/p>\n

Inicio > P\u00e1gina 1 > Subp\u00e1gina > Posici\u00f3n actual\r\n<\/pre>\n
Atributo<\/span><\/h3>\n
La navegaci\u00f3n breadcrumb basada en atributos desglosa las p\u00e1ginas en funci\u00f3n de sus respectivos atributos o cualidades clave en lugar de la ubicaci\u00f3n en relaci\u00f3n con el resto del sitio web. Aunque este tipo de breadcrumbs son menos comunes que las de ubicaci\u00f3n, tambi\u00e9n se las suele implementar en e-commerces.\n<\/p>\n
Por ejemplo, una tienda online que ofrece productos mobiliarios como mesas, sillas o camas fabricadas con diversos materiales y que, en lugar de desglosarlos por categor\u00edas, los categoriza seg\u00fan sea su atributo principal, es decir, el material del que est\u00e1n hechos: madera, acero, etc.\n<\/p>\n
Esto puede ayudar a las personas que suelen comprar m\u00e1s de un art\u00edculo online y prefieren navegar por los productos seg\u00fan sus materiales de fabricaci\u00f3n, en lugar de hacerlo por las categor\u00edas de productos.\n<\/p>\n
Un ejemplo de migas de pan seg\u00fan un atributo podr\u00eda ser:\n<\/p>\n
Inicio > Bicicletas > Bicicletas de monta\u00f1a > Hombres > Acero\r\n<\/pre>\n
Como en el ejemplo anterior, el sitio Asos utiliza este tipo de navegaci\u00f3n secundaria:\n<\/p>\n
\"Navegaci\u00f3n\n<\/p>\n
Captura de pantalla que muestra la navegaci\u00f3n con migas de pan de asos.com<\/a>\n<\/p>\n
Ruta<\/span><\/h3>\n
Los breadcrumbs aplicados a las rutas proporcionan un rastro de los pasos que una usuaria da para llegar a una p\u00e1gina espec\u00edfica. Se puede considerar como el historial de las p\u00e1ginas por las que las y los visitantes navegan para llegar a la p\u00e1gina actual.\n<\/p>\n
Este tipo de navegaci\u00f3n se suele aplicar, por ejemplo, a las p\u00e1ginas de pago de los e-commerces. Es decir, cuando el proceso de compra se divide en varios pasos como: inicio de sesi\u00f3n, detalles personales, modo de pago y la confirmaci\u00f3n del pedido, las migas de pan de ruta permiten a la o el cliente volver f\u00e1cilmente al paso anterior.\n<\/p>\n
Esta ruta de navegaci\u00f3n se ver\u00eda de la siguiente manera:\n<\/p>\n
Inicio > P\u00e1gina 1 > P\u00e1gina 2 > Inicio > P\u00e1gina 3 > Carrito de compra\r\n<\/pre>\n
Ventajas de la navegaci\u00f3n con migas de pan<\/span><\/h2>\n
Los breadcrumbs se han convertido en una herramienta de navegaci\u00f3n habitual en los sitios web y con raz\u00f3n. De hecho, la mayor\u00eda de los gestores de contenidos<\/a> ofrecen opciones de navegaci\u00f3n por migas de pan incorporadas a sus sistemas.\n<\/p>\n
Con el uso de la navegaci\u00f3n con migas de pan se puede visitar un sitio con un recorrido l\u00f3gico o brindar una herramienta que facilita la navegaci\u00f3n y gu\u00eda a las personas a trav\u00e9s de una p\u00e1gina web.\n<\/p>\n
Por otro lado, algunos sitios web utilizan los breadcrumbs para dividir contenidos en varias p\u00e1ginas, lo cual puede generar m\u00e1s visitas y potencialmente m\u00e1s ingresos por publicidad.\n<\/p>\n
Asimismo, la navegaci\u00f3n con migas de pan puede lograr que las personas permanezcan en el sitio web durante m\u00e1s tiempo y de este modo reducir la tasa de rebote<\/a>, sobre todo cuando se emplean en sitios grandes que incluyen men\u00fas muy extensos. Por ejemplo, los websites con pies de p\u00e1gina densos o men\u00fas de cabecera desplegables suelen utilizar este modo de navegaci\u00f3n secundaria para facilitar y aclarar el recorrido por el sitio.\n<\/p>\n
Los breadcrumbs tambi\u00e9n son \u00fatiles para la optimizaci\u00f3n SEO, ya que buscadores como Google hacen uso de elementos de navegaci\u00f3n secundarios para entender mejor la estructura de un sitio web y mostrar informaci\u00f3n m\u00e1s relevante y precisa en sus resultados. Adem\u00e1s, al funcionar como enlaces internos, proporcionan a Google m\u00e1s informaci\u00f3n respecto a una p\u00e1gina y las subp\u00e1ginas a las que se enlaza.\n<\/p>\n
De hecho, Google muestra los breadcrumbs de los sitios web en sus resultados de b\u00fasqueda como se puede ver en la siguiente imagen, logrando que la informaci\u00f3n sea m\u00e1s interesante para sus internautas y generando un efecto positivo en el CTR (tasa de clics)<\/a> y en el tr\u00e1fico<\/a> de un sitio web.\n<\/p>\n
\"Navegaci\u00f3n\n<\/p>\n
Captura de pantalla con migas de pan en las SERPs de google.com<\/a>\n<\/p>\n
\u00bfQu\u00e9 hay que tener en cuenta para implementar los breadcrumbs?<\/span><\/h2>\n
La navegaci\u00f3n con migas de pan no debe utilizarse como sustituto de un men\u00fa, sino como un complemento de la navegaci\u00f3n general de un sitio web.\n<\/p>\n
Cabe destacar que el \u00faltimo elemento de una ruta de migas de pan, es decir, la p\u00e1gina actual en la que se encuentra la persona, no debe estar enlazada, puesto que puede provocar confusi\u00f3n.\n<\/p>\n
Asimismo, para brindar mayor claridad, es importante que las migas de pan individuales est\u00e9n separadas por caracteres o s\u00edmbolos como: \u00bb > \u00ab, \u00bb \/ \u00bb o \u00bb | \u00ab, por mencionar algunos de los m\u00e1s usados. Adem\u00e1s, tambi\u00e9n es importante tener en cuenta el tama\u00f1o de la fuente as\u00ed como el espacio entre los elementos, que no debe ser ni demasiado grande ni peque\u00f1o.\n<\/p>\n
Por \u00faltimo, como existen varios tipos de navegaci\u00f3n con migas de pan, es recomendable considerar qu\u00e9 tipo de navegaci\u00f3n se adapta mejor a las y los visitantes de un sitio web, lo que va a depender de la estructura del sitio, las necesidades del p\u00fablico objetivo y el contenido o la informaci\u00f3n que ser\u00eda m\u00e1s \u00fatil para sus internautas.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n