Algo que siempre vamos a querer en nuestros blogs, o cualquier sitio web que tengamos, es que la navegación dentro de este sea lo más sencilla posible, tanto para el usuario como para los bots de Google y otros buscadores. Un elemento que nos puede ayudar con esta tarea son las migas de pan o breadcrumbs de las cuales vamos a hablar en este post.
Si bien es cierto que en webs pequeñas o con pocos niveles de jerarquía no son necesarias, ten en cuenta que si tu proyecto online puede (y debería) ir creciendo hasta llegar a un punto en el que las migan ya puedan aportar, principalmente de cara al SEO.
Es por ello por lo que vamos a ver en este post qué son las migas de pan, qué tipos hay, qué relevancia tienen para un sitio web y cómo podemos agregarlas en WordPress.
Las migas de pan son enlaces internos que muestran la estructura de una web, marcando de esta manera la ruta desde la home hasta la página en la que te encuentres.
Son como un rastro de migajas que vas dejando a medida que navegas por un sitio web. De hecho, su nombre proviene del popular cuento de Hansel y Gretel, los niños que dejaban un rastro de migajas para encontrar el camino de regreso a casa.
Miremos un par de ejemplos de migas de pan:
Otro ejemplo:
Como podemos observar en ambas imágenes, hay una serie de enlaces internos que se suceden uno tras otro.
En el primer ejemplo tenemos una web de un almacén de cadena, en el que se puede ver como el rastro de migas de pan comienza con la página home, continúa con la página de categoría del producto, luego una página de una subcategoría del producto y finalmente, en la página con el producto.
Por su parte, en el segundo ejemplo tenemos un medio de comunicación con una estructura más sencilla de breadcrumbs. Home > Deportes (Categoría) > Fútbol Mundial (subcategoría).
En ambos casos puedes ver que lo que hacen las migas de pan es marcar el recorrido que ha hecho el usuario dentro de la web.
Las breadcrumbs podemos clasificarlas en dos tipos principalmente: las jerárquicas y las dinámicas.
Como te mencioné al principio del post, las breadcrumbs son elementos que pueden mejorar la navegabilidad dentro de una web, tanto para el usuario como para los buscadores.
Estos beneficios los podemos explicar en términos de experiencia de usuario (UX) y SEO.
Por el lado de la UX las migas de pan nos ayudan a:
En cuanto a los beneficios en SEO tenemos:
Al momento de emplear las migas de pan hay errores que debes evitar, ya que estos pueden entorpecer los beneficios que estas dan sobre todo a nivel de SEO.
Muy bien, ya que tenemos claro qué son las migas de pan, qué tipos hay y los beneficios que ofrecen. Vamos a ver ahora cómo agregarlas en un sitio web hecho con WordPress.
Hay varias formas de agregar breadcrumbs a una web diseñada con WordPress. La más sencilla, como te imaginaras, es con un plugin. Otra alternativa es directamente con el tema que estés utilizando, siempre que este tenga la opción para crear migas de pan claro está.
En todo caso, aquí te explicaré la manera más común de hacerlas que es a través de un plugin, concretamente con el Yoast SEO.
El primer paso es instalar y activar el plugin de Yoast, en caso de no tenerlo, ir a la barra lateral izquierda, seleccionar Yoast SEO > Apariencia de búsqueda y luego hacer clic en la pestaña de Breadcrumbs.
Una vez que estés dentro de la pestaña de Breadcrumbs vas a encontrar varias secciones.
La primera son las opciones de configuración de las migas de pan. Tipo de separador que quieres que tengan, el anchor text de la página de inicio, el prefijo de la ruta de breadcrumbs, el prefijo para los archivos, el prefijo para la página de búsqueda y la opción para las páginas 404.
La segunda son las opciones para activar las migas de pan en la página de blog, es decir, la página dónde se mostrará el listado de tus entradas, y de marcar en negrita la última página, la cual vendría siendo en la que el usuario se encuentre navegando en ese momento.
En la tercera sección encontrarás un menú desplegable para seleccionar la taxonomía para mostrar en las breadcrumbs para los tipos de contenido. Puedes escoger entre cuatro opciones: Ninguno, Categoría, Etiqueta y Formato.
Ahora en la cuarta sección están las opciones para seleccionar el archivo de tipo de contenido para mostrar en las breadcrumbs para taxonomías. Aquí verás tres opciones con menús desplegables: Categoría, Etiqueta y Formato.
Todas estas configuraciones que te acabo de mencionar puedes dejarlas tal como el plugin las tiene. No pasa nada si no las cambias.
Por último, tenemos la sección para activar las migas de pan en el tema que estemos utilizando. Este paso es muy importante debido a que es el que hará que las breadcrumbs puedan visibilizarse en el sitio web, el cual voy a detallarte a continuación.
Para empezar, copia el siguiente código PHP:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Ahora regresa al escritorio de WordPress y sigue la ruta Apariencia > Editor de archivos de tema. Una vez estando ahí, debes asegurarte de que esté seleccionado el tema que estás utilizando. Para esto, fíjate en el menú desplegable de la parte superior izquierda. Donde dice Elegir tema a editar.
A continuación, selecciona el encabezado del tema (header.php). Ve hasta el final del archivo, pega el código de Yoast y das clic en Actualizar archivo.
Cabe aclarar que este proceso podrá variar de acuerdo con el tema que estés utilizando. Hay algunos que ya incluyen la función de agregar las migas de pan por lo que no sería necesario que utilices Yoast SEO o cualquier otro plugin.
En mi caso yo utilizo el tema Astra el cual me da la opción de activar las breadcrumbs en mi web, sin necesidad de utilizar plugins adicionales. Este tema tiene una versión básica la cual es gratis, pero si te interesa adquirir las versiones premium, aquí debajo de te dejó un botón para que puedas adquirirla.
Bueno y con esto termino este post sobre migas de pan. Espero que te sea de mucha ayuda la información que leíste aquí y por supuesto, la puedas aplicar en tus proyectos web si así lo consideras.
Hasta pronto y nos vemos en el próximo post.
En un post que publiqué hace ya un tiempo sobre cómo hacer una copia de…
Uno de los aspectos más importantes que debes tener en cuenta en tu proyecto online…
Cuando hablamos de las mejores plataformas para crear un blog gratis, con seguridad se te…
Hola, hello, bonjour, hallo. Hoy vengo con espíritu poliglota y es porque en este post…
El editor de Gutenberg significó un cambio radical para los que utilizamos WordPress, gracias a…
Uno de los mayores objetivos que se tiene al tener un sitio web o blog…