Breadcrumbs en WordPress: todo lo que necesitas saber

Autor: | 2019-01-16T18:17:17+00:00 Fecha: 16/01/2019|Categorías: WordPress|Comentarios: Ningún comentario

Seguramente te habrás encontrado webs con unos enlaces en la parte superior izquierda del contenido que te indican en qué zona de la web estás. Son las famosas breadcrumbs o migas de pan.

Si quieres saber qué son, para qué sirven y cómo configurarlas, sigue leyendo este artículo.  Te lo voy a explicar con todo detalle 🙂 ¡Vamos allá!

 

Qué son las breadcrumbs de WordPress o migas de pan

Su nombre proviene de los cuentos infantiles en los que un personaje utilizaba un rastro de migas de pan para recordar el camino y no perderse. En el mundo web, el concepto es básicamente el mismo: una breadcrumb es una referencia para que el usuario sepa en todo momento en que página se encuentra y cómo ha llegado a ella. Le permite volver a las páginas superiores de manera rápida y en pocos clics.

En WordPress, las migas de pan son una funcionalidad que aporta un gran valor al usuario. No solo le permiten ubicarse dentro de la jerarquía del sitio web a través de enlaces, sino que además pueden ser beneficiosas para el SEO.

Para entender un poco mejor qué son las breadcrumbs, mira el siguiente ejemplo:

ejemplo-breadcrumbs-en-wordpress

En este caso, mediante las migas de pan puedes saber que estás en la sección de “Discos duros”, dentro de la categoría “Componentes”. “Componentes” a su vez,  está dentro de la “Home” o página de inicio de la web. Si ahora quisieras volver sobre tus pasos e ir de nuevo a la sección “Componentes” o a la página de Inicio, las tendrías a ambas a un solo clic de distancia.

Como ves, las breadcrumbs facilitan la navegación del usuario y, de este modo, mejoran la experiencia de usuario. Se suelen utilizar en ecommerce o en tiendas online donde los productos están organizados en categorías. También se suelen utilizar en blogs, foros, etc. En este caso, un sistema de navegación basado en breadcrumbs mejora considerablemente la usabilidad, lo que dentro de una tienda online se traduce en ventas. Más adelante te mostraré cómo configurar las migas de pan en WooCommerce.

Aunque su uso en ecommerce es frecuente, no tiene sentido utilizar las migas de pan en sitios web con un solo nivel de jerarquía. Mira el ejemplo de una web con la siguiente estructura:

Inicio – Quiénes somos – Trabajos – Contacto

En este caso, ya tendrías las 4 secciones presentes en el menú principal y por lo tanto accesibles. No sería necesario una navegación alternativa como la que aporta el insertar breadcrumbs.

Se pueden clasificar las migas de pan en 3 tipos:

  1. De exploración: muestran el recorrido que ha hecho el usuario hasta llegar a la página en la que se encuentra.
  2. De ubicación: te indican en qué nivel estamos dentro de la jerarquía de la web.
  3. De atributo: muy frecuentes en tiendas online, en las que accedemos a un producto a través de una selección de atributos.

Como puedes ver, la mejora en la experiencia de usuario es notable: la visita sabe donde está, de qué sección viene y que puede volver a ella en cualquier momento y de manera rápida.

 

Cómo afectan al SEO las breadcrumbs de WordPress

Otro de los beneficios de usar breadcrumbs o migas de pan en WordPress es la mejora que te proporcionan a nivel SEO. Teniendo en cuenta una serie de factores, puedes conseguir que tu web les guste más a motores de búsqueda como Google. Algunas de las ventajas de las breadcrumbs son:

✅ Ayudan a los motores de búsqueda a saber cómo está estructurada tu página web y a rastrearla.

✅ Mejoran la usabilidad web y por lo tanto la tasa de rebote y el tiempo de permanencia en tu página. Un usuario que acceda a la web mediante búsqueda orgánica tiene a mano enlaces a otras secciones de la web que pueden ser de su interés.

✅ Las migas de pan refuerzan el enlazado interno de tu web y distribuyen la autoridad de la página al resto del sitio.

✅ Te dan la posibilidad de crear unos “anchor text” relevantes en los enlaces de las breadcrumbs. Conviene no utilizar textos demasiado largos para no empeorar la experiencia de usuario. Es mejor utilizar textos cortos (pero naturales) que contengan alguna palabra clave que quieras posicionar.

✅ Generan más visibilidad en los resultados de búsqueda si utilizas datos estructurados. Las migas de pan estarían visibles en el resultado de búsqueda haciéndolo más atractivo para el usuario si creas un rich snippet para ello.

ejemplo-rich-snippet-con-breadcrumbs

Con esto, queda claro que una buena estrategia a la hora de implementar las breadcrumbs en WordPress puede ayudar a mejorar el posicionamiento de tu web.

 

Activar las migas de pan en WordPress sin plugins

Si eres de esas personas que prefiere evitar el uso de plugins en la medida de lo posible, estás en tu sección. Necesitas tener algo de soltura programando en PHP. Aquí te explico cómo activar las breadcrumbs de WordPress sin plugins.

Lo primero que debes hacer es crear un child theme o tema hijo, si no lo tienes ya. De lo contrario, recuerda que perderás tus cambios con las actualizaciones y eso sería un problema.

Una vez tengas creado y activado tu tema hijo, tienes que editar el archivo functions.php del child theme y añadir el siguiente código:

Ahora sustituye “[HOOK_DE_TU_THEME]»  por el que corresponda en tu plantilla. Por ejemplo: yo estoy usando GeneratePress en mi entorno de pruebas. GeneratePress tiene un hook que se activa justo después del header: generate_after_header(). En caso de utilizar otra plantilla deberás consultar su documentación para saber qué “hook” tienes que usar.

Si no estás familiarizado con este tema puedes ver este post sobre qué es un “hook” y para qué sirve.

Como tengo enganchada mi nueva función al hook, cuando se ejecute, WordPress va a comprobar si el usuario está en la página principal. Si no es así, mostrará en pantalla las migas de pan (no tiene sentido enseñarlas cuando la visita está en la página de inicio de la web). Para hacer esta verificación, WordPress comprueba con condicionales si está en una categoría, un post o una página y devuelve su nombre o título.

Dentro del código puedes modificar, si quieres, el texto del enlace para la página de inicio o el separador para las migas de pan.

Ya ves que es bastante sencillo activar las breadcrumbs en WordPress editando el functions.php. Pero si prefieres hacerlo mediante el uso de plugins, también es posible. A continuación te cuento cómo.

 

Activar breadcrumbs en WordPress con plugins

En el repositorio de WordPress existen varios plugins con los que puedes activar las breadcrumbs en tu página web. En este caso voy a hablarte de 2 de ellos: Yoast SEO y NavXT.

 

Activar y configurar breadcrumbs de WordPress con Yoast SEO

Probablemente la manera más sencilla de activar las migas de pan en WordPress es con un plugin como Yoast SEO.

Lo primero que tienes que hacer es instalar el plugin y activarlo. Una vez hecho esto, accede a través del menú de WordPress a: SEO > Apariencia en el buscador > Migas de pan.

Activa la opción “Activar las migas de pan” y verás algo como esto:

activar-breadcrumbs-con-yoast-seo

Configurar las breadcrumbs en Yoast SEO es bastante intuitivo, pero por si acaso repasa las opciones que te ofrece:

1. Separador de las migas de pan

Te permite elegir con qué elemento separar los enlaces de las breadcrumbs. Por defecto viene configurado con “»” pero puedes ponerle un guión (-), una barra (/), etc.

2. Texto del enlace para la página de inicio

Aquí puedes cambiar el texto por defecto para el enlace del primer nivel de tus breadcrumbs. Por ejemplo, si pones “Inicio”, las migas de pan se mostrarán así:

Inicio > Nivel 1 > Nivel 2

3. Prefijo de la ruta de las migas de pan

Puedes añadir un prefijo antes de la ruta de las migas de pan para que, por ejemplo, se muestren de la siguiente manera:

Estás en: Inicio > Nivel 1 > Nivel 2

4. Prefijo para los archivos de migas de pan

Te permite añadir un prefijo para la página de archivos del blog.

5. Prefijo para la página de búsqueda de las migas de pan

Es el prefijo que aparecerá en la ruta de las breadcrumbs  cuando el usuario realice una búsqueda en la web.

6. Migas de pan para la página 404

En este apartado puedes cambiar el texto que aparecerá en las breadcrumbs cuando el usuario llegue a una página que devuelva un error 404, es decir, que no existe.

7. Última página en negrita

Activando esta opción, el último elemento de la ruta de migas de pan se mostrará destacado en negrita.

8. Taxonomía a mostrar en las migas de pan para los tipos de contenido

Aquí puedes configurar la estructura de cómo está formada la ruta de migas de pan según el tipo de contenido. Por defecto, lo puedes configurar para las entradas o posts, pero si tienes instalado WooCommerce también puedes configurarlo para los productos. Te permite elegir entre “Categoría”, “Etiqueta” o “Formato”.

Hasta aquí, has visto cómo configurar la apariencia de las breadcrumbs en Yoast SEO, pero es posible que todavía no se muestren en tu página. Esto depende de la plantilla de WordPress que utilices. Hay themes que permiten activar las breadcrumbs de Yoast SEO a través de una opción e incluso hay maquetadores visuales como Elementor que también lo hacen.

¿Pero qué pasa si nuestra plantilla no trae una opción para activar las migas de pan de Yoast? No te preocupes: los creadores del plugin nos proporcionan un código PHP que puedes utilizar. Antes de nada, recuerda tener creado un tema hijo, como ya te comenté en el paso anterior.

El código que debes añadir tiene que estar en el functions.php de tu theme hijo:

No te olvides de reemplazar “[HOOK_DE_TU_THEME]» por el que corresponda en tu plantilla.

En el código anterior he creado una función “anadir_breadcrumbs” y la he enganchado al hook “generate_after_header” (propio de GeneratePress), que se ejecuta justo después del “header” de la página.

Esta función llama a un condicional: si la función “yoast_breadcrumb” existe y la página es distinta a la página principal del sitio, muestra en pantalla las migas de pan.

Con esto ya tendrías activadas tus breadcrumbs en WordPress con Yoast SEO.

 

Activar y configurar breadcrumbs de WordPress con NavXT

NavXT es otra buena opción si quieres activar las breadcrumbs en WordPress con un plugin.

Después de instalarlo y activarlo, puedes acceder a su configuración en el menú de WordPress en Ajustes > Breadcrumb NavXT.

activar-breadcrumbs-con-navxt

Las opciones de configuración se dividen en 4 bloques:

General

En este apartado puedes cambiar parámetros como el símbolo de separación entre las migas de pan, elegir si muestras o no el enlace a la página de inicio, modificar las plantillas de las rutas de navegación, etc.

Tipos de entradas

Aquí podemos modificar distintas opciones dependiendo del tipo de entrada (entradas, páginas, etc.).

Taxonomías

Dentro de este bloque configurarás los formatos de las migas de pan para las distintas taxonomías: categorías, etiquetas, etc.

Misceláneos

Otras opciones, como el texto a mostrar cuando el usuario realiza una búsqueda o llega a una página con error 404, se pueden modificar aquí.

Una vez hayas configurado todas las opciones a tu gusto, debes hacer que tu plantilla muestre las migas de pan de NavXT. Recuerda antes de nada crear un tema hijo si no lo tienes.

El código que tienes que usar para mostrar las breadcrumbs con NavXT debes incluirlo en el archivo functions.php de tu tema hijo. Es el siguiente:

Recuerda cambiar “[HOOK_DE_TU_THEME]” por el que corresponda en tu theme.

La función que he utilizado es muy similar a la que usé en el ejemplo de Yoast SEO. En este caso, compruebo si la función “bcn_display” existe y si estoy en la página principal. En caso de cumplirse ambas condiciones, se mostrarán en pantalla las migas de pan.

Ya ves que es muy sencillo activar las migas de pan en WordPress con un plugin. Obviamente, puedes aplicar estilos CSS para adaptar el diseño de las breadcrumbs al estilo de tu página web.

 

Cómo configurar las breadcrumbs WordPress para WooCommerce

En una tienda online, las migas de pan son una funcionalidad muy interesante para mejorar la usabilidad y la experiencia de usuario. WooCommerce integra por defecto las breadcrumbs, pero es posible que quieras modificar ciertas opciones o incluso desactivarlas por alguna razón.

En la propia documentación de WooCommerce hay una serie de snippets PHP que te permiten modificar las breadcrumbs. Si quieres saber cómo, sigue leyendo.

 

Cambiar el texto del enlace para la página de inicio

Tan solo tienes que cambiar el texto “Página de inicio” por el que quieras que aparezca en su lugar.

 

Cambiar el link del enlace de la página de inicio

 

Cambiar el separador de las migas de pan

Puedes sustituir el símbolo “»” por el que quieras. Por ejemplo, una barra o un guion.

 

Eliminar las migas de pan en WooCommerce

Con esta función quitamos las breadcrumbs para WooCommerce.

 

Incorporar varias funciones de breadcrumbs en una solo función para WooCommerce

Esta función te va a servir para cambiar varios parámetros:

    • ‘delimiter’: para cambiar el separador de las breadcrumbs.
    • ‘wrap_before’ y ‘wrap_after’: para englobar las migas de pan dentro de una etiqueta HTML.
    • ‘before’ y ‘after’: para añadir contenido antes y después de cada miga de pan.
    • ‘home’: para cambiar el texto del enlace de la página de inicio.

 

Configurar las migas de pan en WooCommerce con Yoast SEO

También tienes la posibilidad de configurar las breadcrumbs de WooCommerce con Yoast SEO (u otros plugins indicados para ello). En uno de los apartados anteriores de este artículo, ya te explico cómo activar y desactivar las breadcrumbs de WordPress con Yoast. En WooCommerce las opciones son casi las mismas, pero además tienes otras concretas para tu tienda online:

configurar-migas-de-pan-woocommerce-con-yoast

Ten en cuenta que WooCommerce ya añade sus propias breadcrumbs. Si decides usar un plugin como Yoast SEO para configurarlas, deberás primero desactivar las de WooCommerce.

 

Conclusión

Como ves, añadir breadcrumbs a WordPress es una tarea sencilla y que te puede aportar muchos beneficios, tanto a nivel usabilidad como a nivel SEO. Es una funcionalidad muy útil en webs estructuradas con varios niveles de jerarquía como, por ejemplo, las tiendas online.

¿Ya has añadido las breadcrumbs a tu web? ¿Usas algún otro plugin? ¿Tienes alguna duda? ¡Deja un comentario! 🙂

[Total: 15 Promedio: 4.9]
David Suárez
Trabajo en el departamento de marketing de Raiola Networks. Me apasiona el desarrollo web y en mis ratos libres me gusta ver anime, fútbol y jugar a videojuegos.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies