Si buscas una forma de hacer que tu sitio web de WordPress sea más fácil de navegar, te recomendamos agregar enlaces de "breadcrumb".
La navegación "breadcrumb" le dice a los usuarios dónde se encuentran en un sitio web en relación con la página de inicio. Este rastro de "breadcrumb" también se muestra en los resultados de búsqueda, lo que hace que tu sitio web destaque.
Usamos "breadcrumbs" en nuestros propios sitios web y hemos descubierto que esta función facilita a los lectores moverse entre diferentes páginas. Y en este artículo, te mostraremos cómo mostrar enlaces de navegación "breadcrumb" en WordPress.
¿Qué es la navegación "breadcrumb" y por qué la necesitas?
La navegación "breadcrumb" es un término que se usa para describir un menú de navegación jerárquico presentado como un rastro de enlaces. A menudo se utiliza como una navegación secundaria que permite a los usuarios subir en la jerarquía de páginas del sitio web.
Los enlaces de navegación "breadcrumb" son diferentes del sistema de menú de navegación predeterminado en WordPress.
La navegación "breadcrumb" ayuda a los usuarios a navegar por tu sitio web y ayuda a los motores de búsqueda a comprender la estructura y la jerarquía de los enlaces en una página web.
Si tus "breadcrumbs" están configurados de la manera correcta, los motores de búsqueda como Google los mostrarán junto con el título de la página en los resultados de búsqueda. Esto le da a tu sitio web más visibilidad en los resultados de búsqueda y aumenta tu tasa de clics.
Los métodos de esta guía te ayudarán a configurar correctamente las migas de pan utilizando marcado de esquema. El esquema es un código de marcado inteligente que ayuda a Google a identificar tus migas de pan para que se muestren en los resultados de búsqueda.
Dicho esto, veamos cómo agregar enlaces de navegación de migas de pan en WordPress. Te mostraremos dos métodos, y puedes elegir el que mejor te funcione:
- Method 1: Adding Breadcrumb Navigation in WordPress Using All in One SEO (Recommended)
- Método 2: Agregar navegación de migas de pan con Breadcrumb NavXT
- Tutorial en video
Método 1: Agregar navegación de migas de pan en WordPress usando All in One SEO (Recomendado)
Este método es más fácil y se recomienda para todos los usuarios de WordPress.
Para este método, utilizaremos All in One SEO para WordPress, que es el mejor plugin SEO de WordPress del mercado. Te ayuda a mejorar fácilmente tu SEO en WordPress sin necesidad de habilidades técnicas. También viene con una función de migas de pan fácil de usar.
Nota: También hay una versión gratuita de All in One SEO disponible con funciones limitadas, incluidas las migas de pan. Sin embargo, recomendamos actualizar al plugin de pago para acceder a funciones premium como un asistente de enlaces, sitemaps avanzados y más.
Tras la activación, serás dirigido al asistente de configuración del plugin. Puedes seguir las instrucciones en pantalla para configurar el plugin.
¿Necesitas ayuda con la configuración? Consulta nuestro tutorial paso a paso sobre cómo instalar y configurar All in One SEO.
A continuación, debes visitar la página Todo en Uno SEO » Configuración General y cambiar a la pestaña ‘Migas de pan’.
El marcado de esquema de migas de pan se agrega automáticamente por Todo en Uno SEO al código de tu sitio web para que los motores de búsqueda puedan encontrarlo.
Sin embargo, si también deseas mostrar enlaces de navegación de migas de pan en tu sitio web, entonces necesitas activar la opción ‘Habilitar migas de pan’.
Al cambiar el interruptor, puedes ver la configuración de visualización de migas de pan que puedes usar en tu sitio web de WordPress.
Hay cuatro formas que puedes usar para mostrar el rastro de navegación de migas de pan en tu sitio web de WordPress.
1. Agregar navegación de migas de pan usando el shortcode
El método del shortcode es fácil y te permite mostrar enlaces de navegación de migas de pan en tus publicaciones y páginas de WordPress o en las páginas de productos de tu tienda en línea.
Simplemente edita la publicación, página o producto y agrega el siguiente shortcode donde quieras mostrar la ruta de navegación de migas de pan:
[aioseo_breadcrumbs]
Si estás utilizando el editor de bloques predeterminado, el shortcode se convertirá automáticamente en el bloque Shortcode.
Ahora puedes guardar tu publicación o página y previsualizarla para ver el menú de navegación de migas de pan en acción.
Así es como se veía en nuestro sitio de prueba.
2. Agregar navegación de migas de pan usando el bloque Gutenberg
Ahora, si no quieres usar la opción de shortcode o no recuerdas el shortcode, puedes mostrar la navegación de migas de pan usando el bloque AIOSEO – Migas de pan.
Simplemente edita la publicación o página donde quieras mostrar la navegación de migas de pan y agrega el bloque AIOSEO – Migas de pan.
El plugin cargará una vista previa en vivo de tus enlaces de navegación de migas de pan y la mostrará en el área de contenido.
No olvides actualizar o publicar tus cambios.
3. Agregar navegación de migas de pan usando un widget
Los dos métodos anteriores requieren que agregues un shortcode o bloque en cada publicación o página donde quieras mostrar los enlaces de navegación de migas de pan.
¿Qué pasa si quisieras mostrar las migas de pan automáticamente para cada publicación o página?
El widget AIOSEO Migas de pan te permite hacer eso fácilmente.
Simplemente ve a la página Apariencia » Widgets y agrega el bloque de widget AIOSEO – Migas de pan. Puedes agregarlo a la barra lateral, pie de página o cualquier área de widgets de tu sitio.
Puedes proporcionar un título para el widget o dejarlo en blanco si lo prefieres.
No olvides hacer clic en el botón 'Actualizar' para guardar tu configuración.
Ahora puedes visitar tu sitio web y ver el menú de navegación de migas de pan en todas las publicaciones y páginas.
4. Agregar navegación de migas de pan usando código
Este método te permite mostrar los enlaces de navegación de migas de pan exactamente donde los quieres. Sin embargo, requiere que agregues código a los archivos de tu tema de WordPress.
Si no has hecho esto antes, no olvides ver nuestro artículo sobre cómo agregar fragmentos de código en WordPress.
Primero, necesitas decidir dónde mostrar los enlaces de migas de pan. El lugar más común es debajo del título de la publicación individual, página o producto.
Los temas de WordPress usan archivos de plantilla para mostrar diferentes secciones de tu sitio web. Por ejemplo, muchos temas usan un archivo llamado content-single.php ubicado dentro de la carpeta template-parts de tu tema.
Consulta nuestra hoja de referencia para encontrar qué archivos editar en un tema de WordPress.
Después de eso, necesitas editar el archivo de tu tema usando un cliente FTP. Consulta nuestra guía sobre cómo usar FTP para subir archivos a WordPress para obtener instrucciones.
Luego, coloca el siguiente código donde quieras mostrar los enlaces de navegación de migas de pan:
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
No olvides guardar tus cambios y subir el archivo de vuelta a tu sitio web.
Ahora puedes visitar tu sitio web para ver los enlaces de migas de pan en acción.
Cambiar cómo se muestran los enlaces de migas de pan en AIOSEO
Por defecto, All in One SEO usa una plantilla para mostrar tus enlaces de navegación de migas de pan. Contiene un enlace a tu inicio, categoría, página principal y el título de la publicación o página separados por el símbolo '» '.
Puedes cambiar eso visitando la página All in One SEO » Configuración General y dirigiéndote a la pestaña 'Migas de pan'. Luego, simplemente desplázate hacia abajo hasta la sección de Configuración de Migas de Pan.
Desde aquí, puedes cambiar el separador, mostrar u ocultar el enlace de inicio, agregar un prefijo y más.
Una vez que termines, no olvides guardar tu configuración.
Método 2: Agregar navegación de migas de pan con Breadcrumb NavXT
Este método se puede usar con cualquier otro plugin de SEO para WordPress. Es fácil de usar si tienes un tema compatible, pero si no, necesitarás editar los archivos de tu tema para mostrar los enlaces de navegación de migas de pan.
Lo primero que necesitas hacer es instalar y activar el plugin Breadcrumb NavXT. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitas visitar la página Configuración » Breadcrumb NavXT para configurar los ajustes del plugin.
La configuración predeterminada debería funcionar para la mayoría de los sitios web. Sin embargo, puedes personalizar la configuración según sea necesario.
La página de configuración está dividida en diferentes secciones. En la pestaña de configuración general, puedes cambiar el estilo y los ajustes de tus migas de pan.
También notarás que estas plantillas de enlaces usan marcado Schema.org en la etiqueta del enlace.
La pestaña de tipos de publicación bajo la configuración del plugin te permite configurar enlaces de migas de pan para publicaciones, páginas y cualquier tipo de publicación personalizado.
Puedes elegir cómo quieres mostrar la jerarquía de tus publicaciones. Por defecto, el plugin usará la jerarquía 'Título del sitio > Categoría > Título de la publicación'.
Puedes reemplazar categorías por etiquetas, fechas o el padre de la entrada y cambiar el separador.
Las pestañas Taxonomías y Misceláneos tienen plantillas similares para tus enlaces de navegación de migas de pan.
No olvides guardar tus cambios cuando termines.
Breadcrumb NavXT ofrece múltiples formas de mostrar enlaces de navegación de migas de pan en tu sitio web.
1. Mostrar navegación de migas de pan con soporte de tema
Algunos de los temas de WordPress más populares vienen con una opción integrada para mostrar la navegación de migas de pan eligiendo Breadcrumb NavXT o tu plugin de SEO de WordPress como fuente.
Por ejemplo, si estás usando el tema Sydney, puedes ir a la página Apariencia » Personalizar . A continuación, haz clic en el menú 'General' y luego en la opción 'Migas de pan'.
Desde allí, deberás elegir 'Breadcrumb NavXT' en el menú desplegable 'Generador de migas de pan'.
También puedes elegir dónde quieres que se muestren tus migas de pan seleccionando una opción de la lista desplegable 'Posición'.
Si estás viendo una sola entrada o página, verás una vista previa en vivo de tus enlaces de navegación de migas de pan.
No olvides hacer clic en el botón 'Publicar' para guardar tus cambios.
2. Mostrar enlaces de navegación con el bloque de rastro de migas de pan
También puedes mostrar los enlaces de navegación de migas de pan utilizando el bloque de rastro de migas de pan.
Simplemente dirígete a tu editor de contenido de WordPress y luego agrega el bloque Breadcrumb Trail donde desees mostrar los enlaces de navegación.
A continuación, puedes actualizar o publicar tu contenido.
Después de eso, visita tu sitio web para ver los enlaces de navegación en acción.
3. Agregar navegación de migas de pan usando un widget
El plugin también proporciona un widget que puedes usar para mostrar la navegación de migas de pan en la barra lateral o en cualquier área lista para widgets.
Primero, ve a la página Apariencia » Widgets y agrega el bloque de widget 'Breadcrumb Trail' al área de widgets de tu sitio, como la barra lateral o el pie de página.
La configuración predeterminada del widget funcionaría para la mayoría de los sitios web, pero puedes cambiarla si es necesario. Por ejemplo, es posible que desees ocultar el rastro en la página principal.
No olvides hacer clic en el botón 'Actualizar' para guardar la configuración de tu widget.
4. Agregar navegación de migas de pan usando código
El plugin también ofrece un método de código para mostrar enlaces de navegación de migas de pan para usuarios avanzados.
Primero, necesitas conectarte a tu sitio de WordPress usando un cliente FTP. Después de eso, navega a la carpeta de tu tema actual de WordPress ubicada dentro del directorio /wp-content/themes/.
Los temas de WordPress usan archivos de plantilla para mostrar diferentes secciones de tu sitio web. Por ejemplo, muchos temas usan un archivo llamado content-single.php ubicado dentro de la carpeta template-parts de tu tema.
Consulta nuestra hoja de referencia para encontrar qué archivos editar en un tema de WordPress.
Abre el archivo de plantilla para editarlo y luego coloca el siguiente código donde quieras mostrar la ruta de las migas de pan (breadcrumbs):
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
No olvides guardar tus cambios y subir el archivo de vuelta a tu sitio web.
Ahora puedes visitar tu sitio web para ver la ruta de los enlaces de migas de pan en acción.
Tutorial en video
Esperamos que este artículo te haya ayudado a aprender cómo mostrar enlaces de navegación de migas de pan en WordPress. También te puede interesar nuestra guía sobre cómo mostrar menús diferentes a usuarios registrados en WordPress o cómo agregar un mega menú en tu sitio de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
Mi tema tuvo un problema con la función de migas de pan, no me permitía hacer clic en el elemento de la miga de pan, solo mostraba la miga de pan.
No sé si fue codificado así o fue un error.
Pero como tenía AIOSEO, usé su función de migas de pan y me resultó fácil volver a la jerarquía del sitio.
AIOSEO resolvió mi problema.
Dayo Olobayo
Gracias por este artículo informativo. Agregué el widget de migas de pan de aioseo y automáticamente muestra las migas de pan para mis publicaciones de blog. Sin embargo, noto que las muestra en la página de inicio, lo cual no me gusta. ¿Hay alguna manera de arreglar eso, por favor?
Además, noto en la captura de pantalla anterior que tus breadcrumbs se ven atractivos en comparación con los que tengo en mi blog. ¿Hay alguna forma de personalizarlos?
PD: Uso el plugin aioseo lite.
Soporte de WPBeginner
Dependería del método que hayas utilizado para agregar breadcrumbs a tu sitio para saber cómo eliminarlos específicamente de la página de inicio. Para nuestros breadcrumbs, actualmente son algo que hemos estilizado específicamente con nuestro tema.
Administrador
Dayo Olobayo
Sobre los breadcrumbs que aparecen en mi página de inicio, contacté al soporte de aioseo y me proporcionaron un código CSS que solucionó el problema. Gracias por tu respuesta.
Steven Jæger
He probado diferentes variantes de breadcrumbs, ahora también el NavXT. Los breadcrumbs aparecen y todo se ve bien.
Mi menú principal se basa en páginas. Mis artículos se hacen como posts, los agrego en categorías. Es cuando visito un artículo e intento usar un enlace en el breadcrumb para retroceder un paso que sale mal.
Soporte de WPBeginner
Es posible que desees volver a guardar tus permalinks para asegurarte de que no hubo ningún inconveniente allí, de lo contrario, deberías comunicarte con el soporte del plugin que estás utilizando actualmente para que el soporte lo revise.
Administrador
Surjeet Kumar Verma
Gracias por compartir contenido valioso sobre breadcrumbs en WordPress. Realmente me gusta.
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Rintesh Roy
El plugin no está documentado en absoluto. Al menos, no pude encontrar nada.
Soporte de WPBeginner
The documentation for the plugin is linked on the plugin’s page
Administrador
Elizabeth Morgan
Estoy usando el plugin Breadcrumb NavXT y agregué el código que sugeriste a mi archivo header.php y me dio este error:
Tus cambios de código PHP fueron revertidos debido a un error en la línea 68 del archivo wp-content/themes/generatepress/header.php. Por favor, corrígelo e intenta guardar de nuevo.
error de sintaxis, se esperaba el final del archivo, se encontró '<'
¿Qué hago con esto?
Soporte de WPBeginner
Hay algunas razones posibles, quizás quieras echar un vistazo a nuestro artículo aquí: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Administrador
Varun
Gracias, finalmente el problema está resuelto
Soporte de WPBeginner
Glad our recommendations could help
Administrador
Hammad Rashid
¡El plugin es increíble... Gracias!
Soporte de WPBeginner
Glad we could recommend it
Administrador
Andres
Hola WPBeginner,
Publicación increíble.
Me pregunto lo siguiente.
¿Cómo haces que la miga de pan "inicio" (en tu caso WPBEGINNER) aparezca en blogs y publicaciones, pero no en tu página de INICIO?
Es decir, cuando vas a "inicio" no veo la miga de pan, pero cuando hago clic en otra página sí la veo.
Muchas gracias por tu tiempo.
Personal editorial
En nuestro tema, lo hemos configurado para agregar migas de pan solo en páginas individuales y no en la plantilla de la página de inicio.
Administrador
Manish Ransubhe
Hola, no estoy usando ningún plugin y nunca he habilitado las migas de pan.
¿Por qué mi resultado de búsqueda muestra migas de pan? Ayúdame a deshabilitar esto.
Gracias
Ravi Singh
Me pasó el mismo problema. Así que revisé el panel de mi tema y mi tema tenía habilitadas las migas de pan. También puedes revisar el panel de tu tema para obtener más información al respecto. Y estaba usando el tema Newspaper. Así que si tú también estás usando este tema, es el que te está causando dificultades. Desactívalo desde allí.
Dua Centre
He usado el plugin Yoast SEO. Las migas de pan se muestran en mis páginas web, pero no en los resultados de búsqueda de Google. ¿Cuándo comenzarán a mostrarse también en los resultados de búsqueda de Google?
Walter
¡Hola! ¿Sabes si es posible insertar las migas de pan dentro del menú? Tengo que diseñar un sitio web con un menú lateral vertical, y el cliente quiere tener las migas de pan en la parte inferior del menú.
DUy
¿Es posible cambiar el tamaño y el color de la fuente de Breadcrumb?
gracias
Sameer
Hola,
Estoy usando migas de pan usando el método Yoast SEO, pero solo se muestra en la página de inicio y no se muestra en la búsqueda de Google.
Por ejemplo: la estructura ideal debería ser Dominio.com>Categoría, pero se muestra como Dominio.com/Categoría. ¿Puedes decirme cómo implementar esto?
Joshua
Hola... Estoy usando breadcrumb navxt y su widget está funcionando. Inserté el código para header.php usando el plugin "insert header and footer", pero no veo ningún cambio en mi sitio, incluso después de guardar y actualizar.
Por favor, ayúdame, porque el área de widgets funciona, pero no se muestran migas de pan en el encabezado de mi sitio.
juan luis
Hola. Tengo miedo de manipular códigos. En caso de que algo salga mal, ¿puedo simplemente eliminar el código insertado sin consecuencias?
Soporte de WPBeginner
Hola Juan,
Si no quieres usar el método de código, entonces puedes probar el método del plugin. De esta manera podrás deshacer los cambios simplemente desactivando el plugin.
Administrador
Nate Balcom
Por cierto, estoy usando el código de Yoast que tienes arriba y no muestra la jerarquía correcta. Omite un enlace para categorías, proyectos, galerías. Básicamente, todo lo que no es una publicación se maneja de la misma manera. Está cerca, pero no es correcto.
Nate Balcom
Gracias por publicar esto. He estado buscando una manera de mostrar correctamente mi rastro de migas de pan para los rastreadores. Se vuelve un poco complicado con categorías, proyectos, galerías y similares. He estado codificando las mías manualmente, pero el php maneja la jerarquía en el orden incorrecto. Esto es de gran ayuda.
Anna
Mi tema secundario (GeneratePress, de su propia descarga de tema secundario) no tiene un archivo header.php.
Agregué el código en el header.php del tema principal de GP y las migas de pan ahora funcionan. Pero cuando actualizo GP...?
subhan
Simplemente copia el header.php a la carpeta del tema secundario de Generate Press.
Sunil
¡Gracias por la excelente publicación! ¡Saludos!
Raymond Chukwuman
Muchas gracias. Realmente está funcionando en mi sitio web. Dios te bendiga.
Abiodun
Seguí los pasos, pero en realidad no me funcionó con las publicaciones. Solo vi las 'Migas de pan de inicio' en mi página de inicio. ¿Cómo hago para que aparezcan en mis publicaciones, por favor? Estoy usando Yoast SEO.
Soporte de WPBeginner
Las rutas de navegación (breadcrumbs) deberían aparecer automáticamente. Si no lo hacen, por favor contacta al soporte de tu tema.
Administrador
Abiodun
Funcionó... pero la categoría no aparece antes de mis publicaciones, solo obtengo Inicio>>título de la publicación. ¿Cómo hago que las categorías aparezcan antes de las publicaciones?
Michelle
¡Hola! Tienes que establecer una página principal para la página que estás publicando. La mía solo mostraba Inicio > página actual hasta que establecí la página actual como 'hija' de la página de artículos, y la página de artículos como 'hija' de la página de inicio. Puedes hacerlo en el editor de páginas.
ALEGRÍA
Great! This is really useful! Thanks a lot!
malek
gracias, muy útil