Breadcrumbs en Divi con Yoast SEO (migas de pan)

Yoast SEO trae por defecto la configuración necesaria para generar las migas de pan. Lo que vamos a hacer es habilitarlas en Yoast y luego integrarlas en Divi para que aparezcan en las plantillas que quieras, normalmente encima del título de las entradas y páginas. Es uno de esos ajustes que toma cinco minutos, no requiere tocar ni una línea de código complicada y deja tu sitio con una capa de navegación que tanto Google como tus visitantes agradecen.

¿Qué son exactamente las migas de pan y de dónde viene el nombre?

El nombre viene del cuento de Hansel y Gretel, donde los protagonistas dejaban migas de pan para regresar a casa. En diseño web la idea es la misma: son un rastro que le permite al usuario saber por qué nivel del sitio ha pasado para llegar a donde está, y volver atrás con un clic si lo necesita. Se ubican casi siempre encima del título y muestran la jerarquía desde la página de inicio hasta la página actual.

La miga que generan Yoast y la mayoría de los plugins SEO se basa en la jerarquía del sitio: refleja la estructura real de tu WordPress, como la categoría a la que pertenece una entrada o la página padre de una subpágina. Esa coherencia entre la estructura del sitio y lo que ve el usuario es lo que hace valiosas a las migas, y es también lo que Google interpreta cuando rastrea tu sitio.

¿Por qué usar migas de pan en tu sitio?

Las migas de pan aportan en tres frentes. Para el usuario, le muestran dónde está y le permiten subir de nivel con un clic. Para el SEO, Google las usa y a veces las muestra en los resultados de búsqueda, lo que mejora la apariencia de tu enlace. Y para la estructura, refuerzan la jerarquía de tu sitio con enlazado interno coherente. Son especialmente útiles en sitios con muchas categorías o niveles. Si quieres dominar el SEO de tu sitio, esto se complementa con el Curso de SEO para WordPress.

Vale la pena detenerse en esos frentes porque el beneficio no es solo cosmético. En experiencia de usuario, las migas reducen la "carga de navegación": el esfuerzo mental para orientarse dentro de un sitio. Cuando alguien llega a un artículo desde Google sin saber qué más ofreces, una línea de migas le dice de inmediato a qué sección pertenece ese contenido y le abre la puerta a explorar la categoría completa. Eso se traduce en más páginas vistas por sesión y visitantes que se quedan más tiempo.

En SEO, el beneficio es doble. Por un lado, las migas crean enlaces internos contextuales hacia tus categorías y páginas padre, lo que ayuda a Google a entender cómo se relaciona tu contenido. Por otro, cuando Yoast genera las migas también incluye el marcado de datos estructurados (Schema BreadcrumbList), y eso permite que Google muestre la ruta directamente en los resultados de búsqueda en lugar de la URL cruda. Ese cambio visual mejora la tasa de clics porque el resultado se ve más limpio y profesional.

Consejo: las migas de pan rinden más en sitios con jerarquía clara. Si tu blog tiene categorías bien definidas y tus páginas siguen una estructura padre-hijo lógica, las migas serán útiles de verdad. Si tu sitio es plano (todo cuelga de la raíz sin niveles), invierte primero en ordenar esa estructura — las migas reflejarán esa mejora automáticamente.

Paso 1: Habilita las migas de pan en Yoast SEO

Lo primero es activar la función en Yoast. Ve a Yoast SEO → Apariencia en el buscador → Migas de pan (Breadcrumbs). Ahí activa la opción de habilitar las migas de pan. En esa misma pantalla puedes configurar varios detalles: el separador entre niveles (›, /, »), el texto del enlace de inicio ("Inicio", "Home"), el prefijo de la ruta, y cómo se muestran las taxonomías. Configura estos detalles según el estilo de tu sitio.

Tómate un momento para revisar cada opción de esa pantalla porque definen cómo se leerá la ruta. El separador es puramente estético, pero importa para la coherencia visual: el carácter "›" es el más usado por su sobriedad. El prefijo de la ruta es un texto opcional que aparece antes de la primera miga, algo como "Estás aquí:" — yo prefiero dejarlo vacío para que la línea quede más limpia, aunque en sitios corporativos puede tener sentido incluirlo. La parte de taxonomías define qué categoría o término se muestra cuando una entrada pertenece a varias; aquí conviene elegir la taxonomía que mejor represente la organización principal de tu blog.

Consejo: elige un separador y un texto de inicio coherentes con el idioma y el tono de tu sitio. Para un sitio en español, "Inicio" como punto de partida y "›" como separador es una combinación limpia y reconocible. Mantén la consistencia con el resto de tu navegación.

Paso 2: Integra las migas de pan en Divi

Habilitar las migas en Yoast no las hace aparecer solas; hay que insertarlas en tu plantilla. La forma más limpia en Divi es usar el Theme Builder: editas la plantilla de entrada (o de página, o de archivo) y, donde quieras que aparezcan las migas, insertas un módulo de Código con la etiqueta de las migas de pan de Yoast. Yoast provee una función PHP que renderiza las migas; al colocarla en la plantilla del Theme Builder, las migas aparecen en todas las entradas o páginas a las que aplique esa plantilla.

El Theme Builder de Divi es la pieza clave de este método. En lugar de pegar el código de las migas en cada entrada una por una (algo inviable si tienes decenas o cientos de artículos), creas una plantilla global para "Todas las entradas" y, en el área del cuerpo, colocas el módulo de Código justo encima del módulo que muestra el título dinámico. A partir de ahí, cada entrada que use esa plantilla mostrará sus migas automáticamente, con la ruta correcta según su categoría. Es la diferencia entre configurar algo una vez y mantenerlo a mano para siempre.

Aprovecha además que el Theme Builder te deja crear plantillas distintas para distintos tipos de contenido: una para las entradas del blog, otra para las páginas, otra para los archivos de categoría, cada una con la ubicación de migas que mejor le quede. Y si quieres quitar o cambiar las migas, lo haces desde un único lugar y el cambio se propaga a todo el sitio. Esa centralización es justo lo que hace mantenible un sitio que crece con el tiempo.

🎓 ¿Quieres posicionar tu sitio en Google de verdad?
En uxdivi.com/cursos tenemos el Curso de SEO para WordPress donde cubrimos la optimización completa: estructura, contenido, técnico y todo lo necesario para rankear. Accede como suscriptor y domina el SEO.

Paso 3: Da estilo a las migas de pan

Una vez que las migas aparecen, dales estilo para que combinen con tu diseño. Con CSS puedes ajustar el tamaño de la fuente, el color de los enlaces y del separador, el espaciado, y la alineación. La idea es que las migas se vean discretas pero legibles — son un apoyo a la navegación, no el protagonista de la página. Ubícalas normalmente encima del título de la entrada, donde el usuario las espera. Si trabajas el SEO global de tu sitio Divi, te conviene también el tutorial de cómo hacer SEO en Divi con AIOSEO como alternativa de plugin SEO.

A la hora de darles estilo, mi recomendación es que las migas tengan un tamaño de fuente ligeramente menor que el del texto del cuerpo, un color de enlace que contraste pero sin gritar, y un estado hover que indique con claridad que cada nivel es clicable. El separador suele quedar mejor en un gris más tenue que los enlaces, para que la vista distinga sin esfuerzo entre los segmentos navegables y los caracteres divisorios. Y cuida el espaciado superior e inferior: un pequeño margen separa las migas del título sin que parezcan pegadas ni flotando sueltas.

No olvides revisar cómo se ven las migas en móvil. En pantallas pequeñas, una ruta muy larga puede partirse en dos líneas o desbordar el contenedor. Lo ideal es que las migas se mantengan en una sola línea siempre que sea posible y, si la ruta es muy profunda, que el diseño las maneje con elegancia en lugar de romper el layout. Probar el resultado en escritorio, tablet y móvil antes de dar por terminada la implementación es lo que separa un detalle bien resuelto de uno que se ve descuidado en la mitad de los dispositivos.

Preguntas frecuentes sobre breadcrumbs en Divi con Yoast

¿Necesito la versión premium de Yoast?

No. La función de migas de pan está disponible en la versión gratuita de Yoast SEO. Solo hay que habilitarla e integrarla en la plantilla.

¿Las migas de pan ayudan al SEO?

Sí. Mejoran la estructura de enlazado interno y Google puede mostrarlas en los resultados de búsqueda, lo que aporta contexto y mejora la apariencia de tu enlace. Son una buena práctica de SEO on-page.

¿Puedo poner las migas solo en las entradas y no en las páginas?

Sí. Como las integras vía el Theme Builder de Divi, controlas en qué plantillas aparecen. Puedes ponerlas solo en las entradas del blog, solo en las páginas, en los archivos, o donde decidas.

¿Funciona si uso otro plugin de SEO en lugar de Yoast?

Otros plugins de SEO como Rank Math o AIOSEO también ofrecen migas de pan con su propia función. El concepto es el mismo: habilitar la función en el plugin e integrar su etiqueta en la plantilla de Divi. La función PHP cambia según el plugin.

¿Las migas afectan la velocidad de carga del sitio?

No de forma apreciable. Las migas de pan son texto y enlaces ligeros que Yoast genera del lado del servidor. Su impacto en el rendimiento es prácticamente nulo, así que no tienes que preocuparte por sacrificar velocidad a cambio de mejor navegación.

Conclusión

Las migas de pan son una mejora sencilla con triple beneficio: mejor navegación para el usuario, mejor SEO, y una estructura de sitio más clara. Con Yoast SEO ya tienes la función incluida; solo hay que habilitarla, integrarla en la plantilla de Divi mediante el Theme Builder, y darle estilo para que combine con tu diseño. Es uno de esos detalles que distinguen un sitio bien construido de uno improvisado.

Si recién empiezas a ordenar tu sitio, este es un buen primer paso porque te obliga a pensar en la jerarquía de tu contenido, y esa misma claridad estructural beneficia todo lo demás que hagas en SEO. Habilita las migas, pruébalas en distintos tipos de contenido, ajústalas a tu diseño y deja que hagan su trabajo silencioso de guiar al visitante y de hablarle a Google en su propio idioma. ¿Tienes dudas con algún paso o quieres compartir cómo te quedaron las migas en tu sitio? Déjame un comentario aquí abajo y con gusto te ayudo.

🎓 ¿Quieres que tu sitio rankee y atraiga tráfico orgánico?
En uxdivi.com/cursos tienes el Curso de SEO para WordPress donde aprendes optimización on-page, técnica y de contenido para posicionar tu sitio en Google. Accede como suscriptor y haz crecer tu tráfico.