2 formas sencillas de añadir migas de pan a su sitio web WordPress

Adding breadcrumbs to WP featured image

Hay algo tentador en las cosas aparentemente relacionadas con la comida, incluso cuando sabes que no tienen nada que ver con ella. Las migas de pan de WordPress no son una excepción.

La pregunta es si las migas de pan realmente marcan la diferencia. Si es así, ¿cómo puedes añadirlas a tu sitio web? Este post le mostrará, no una, sino dos maneras diferentes de hacerlo (paso a paso).

En este artículo, hablaremos sobre por qué son útiles las migas de pan, evaluaremos los beneficios de usar migas de pan con respecto al SEO y luego le mostraremos cómo añadir migas de pan a su sitio web de WordPress, superando los desafíos comunes en el camino.

¿Qué son las migas de pan?

En cierto sentido, las migas de pan son como los menús de un sitio web: se encuentran cerca de la parte superior y te indican dónde ir. Pero a diferencia de los menús, también te muestran dónde estás en un sitio web en relación con otras páginas.

En pocas palabras, las migas de pan son un sistema de navegación secundario que muestra la ubicación de un usuario en relación con la página de inicio de un sitio o aplicación web.

He aquí un ejemplo sencillo de ruta de navegación con migas de pan de nuestro sitio de documentación:

An example of WordPress breadcrumbs from the Astra Documentation page

Si un usuario decide que necesita leer sobre otros ajustes del personalizador, puede hacer clic fácilmente en ese enlace de las migas de pan. O puede navegar a la página de inicio, en este caso, Docs, haciendo clic en ese enlace.

¿Por qué son importantes las migas de pan?

1. Ayude a los motores de búsqueda a ayudarle

Dado que los motores de búsqueda son capaces de leer las migas de pan, pueden comprender mejor la estructura y el contenido de su sitio.

Cuando esto sucede, los motores de búsqueda como Google ven cómo una página de su sitio web se relaciona con otra, lo que resulta en una mejor optimización de motores de búsqueda (SEO) y un mejor rendimiento en las páginas de resultados de motores de búsqueda (SERPs).

Las migas de pan son una forma estupenda de ayudar a tu público objetivo a encontrar lo que busca, es decir, a ti y lo que ofreces. Y ayudar a los usuarios a encontrar cosas enlaza perfectamente con el segundo punto sobre la importancia de las migas de pan.

2. Mejorar la experiencia del usuario y reducir las tasas de rebote

¿Qué son las tasas de rebote?

A rebote es cuando alguien visita sólo una página de su sitio web y luego lo abandona ( qué vergüenza, ¿verdad? ). A porcentaje de rebotes es el porcentaje de visitantes que entran en un sitio y luego lo abandonan en lugar de seguir viendo otras páginas del mismo sitio.

Ni que decir tiene que hay que mantener un porcentaje de rebote bajo, pero hasta qué punto es bajo es una cuestión muy controvertida. 

Lo que no se discute, sin embargo, es que las migas de pan pueden ayudarle a reducir las tasas de rebote al ofrecer a los usuarios más opciones en caso de que no encuentren lo que buscan en la primera página que abren.

Al añadir más opciones de navegación a su sitio web, los usuarios pueden desplazarse más rápidamente, ¡eso suena a mejora de la experiencia del usuario, 100%!

Uso de las migas de pan integradas en el tema Astra

Dado que no hay necesidad de instalar ningún plugin o jugar con el código, esto es, con mucho, la forma más fácil de añadir migas de pan a su sitio web WordPress.

Lo que queríamos era ofrecer a los usuarios de WordPress una forma fácil y rápida de añadir migas de pan a sus sitios web. Y eso es exactamente lo que hemos hecho.

Con Astra, puedes colocar la navegación por migas de pan donde quieras sin tocar ningún archivo de plantilla o código y sin necesidad de instalar ningún plugin.

Como ya se ha dicho, las migas de pan tienen más sentido como ayuda a la navegación cuando aparecen cerca de la parte superior.

Sin embargo, esto no significa que no puedas decidir en qué parte de la parte superior aparecen. La configuración de Astra Breadcrumb te permite elegir entre:

  • Cabecera interior
  • Antes de la cabecera y
  • Después del título
Location of breadcrumbs in the theme customizer

Después de elegir dónde quieres tener las migas de pan, también tienes la opción de elegir dónde no las quieres. La configuración te permite desactivar las migas de pan en determinadas páginas de tu sitio.

Incluso puedes configurar las fuentes utilizadas por las migas de pan en la sección Tipografía. Es increíble, porque no hay muchos temas o plugins que te permitan ser tan específico.

Dicho esto, entendemos que algunas personas ya están bastante cómodos con su tema actual, por lo que nos gustaría mostrar otra buena opción para añadir migas de pan de WordPress, uno que no requiere un cambio de tema.

¡Añadir migas de pan con Yoast SEO! (Paso a Paso)

¿Cómo va tu codificación? Tranquilo, te daremos el código que necesitas añadir. Pero aún así, si sólo con mirar código te pican los ojos, mejor quédate con la opción 1, te hará la vida más fácil. 

El uso de Yoast para WordPress breadcrumbs implica la adición de unas pocas líneas de código a cada página de su sitio web. Esto normalmente significa añadir esas pocas líneas a los archivos de plantilla de tu tema.

En efecto, estos cambios pueden perderse tras una actualización. Así que para empezar, sugerimos utilizar un tema hijo al implementar las migas de pan de Yoast SEO.

Hay varias formas de crear un tema hijo. Si utilizas Astra, puedes crear un tema hijo personalizado con un solo clic utilizando el botón Generador de temas infantiles Astra.

Si tienes otro tema activado puedes crear un tema hijo instalando un generador de temas hijo desde el directorio de plugins.

Mientras esté allí, considere la posibilidad de llevar a cabo el primero de los pasos que se indican a continuación.

Paso 1. Instalar y activar Instalar y activar Yoast SEO

En el panel de control de WordPress, vaya a Plugins > Añadir nuevo. Tipo "Yoast" en la barra de búsqueda. Cuando aparezcan los resultados, haga clic en Instalar ahora y luego Activar.

Paso 2. Añadir código a header.php

A estas alturas deberías tener un tema hijo y Yoast SEO activados. Si aún no has activado el tema hijo, te recomendamos que lo hagas antes de continuar.

Si tienes un tema hijo creado, querrás hacer una copia del header.php y ponerlo en ese tema hijo.

Ahora abra la copia de header.php que está en su tema hijo, y añada el siguiente código hacia el final del archivo.

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Alternativamente, este código se puede añadir dentro de su single.php y page.php archivos justo por encima del título de la página. Realmente depende de tu tema y de lo que quieras conseguir.

También vale la pena señalar que en algunos temas puede que no necesite la primera (<?php) y el último bit (?>) de este código. Su desarrollador web o los creadores del tema pueden ayudarle a decidir, lo mejor es consultar la documentación de su tema sobre esto.

Paso 3. Abra la configuración de apariencia de búsqueda de Yoast

En el menú del panel de control de WordPress, busque SEO. Pasa el ratón por encima de ese enlace y verás un submenú. Haga clic en "Buscar Aspecto".

Yoast Search Appearance setting

Paso 4. Abra la pestaña Migas de pan

Ahora debería estar en la página de configuración de la apariencia de búsqueda. 

En esta página hay una pestaña de navegación en la parte superior, verás que estás en la pestaña General en este momento. Haz clic en la pestaña Migas de pan para abrir su configuración.

Yoast Breadcrumbs

Paso 5. Haga clic en el conmutador de migas de pan

Por defecto, las migas de pan están desactivadas en Yoast. Después de haber realizado los pasos 1 a 4, puede activar el interruptor de migas de pan. Haga clic en "Activado" para activar las migas de pan.

Breadcrumbs Setting Enable - Yoast SEO

Paso 6. Configuración de las migas de pan

Una vez habilitadas las Migas de pan, puede editar su configuración. En concreto, algunas de las opciones que tendrá incluyen:

  • Separador entre migas de pan
  • Anchor text para la página de inicio
  • Migas de pan para la página 404
  • Mostrar página del blog
  • Negrita la última página
Yoast Breadcrumbs settings

Paso 7. Guardar los cambios

Si estás satisfecho con la configuración, pulsa Guardar cambios.

¡Y así es como se añaden migas de pan con Yoast!

Establecer las expectativas adecuadas

¿Qué puede esperar después de implementar las migas de pan de WordPress? 

Si utilizas un plugin o un enfoque de código puedes esperar tener que lidiar con colocaciones incómodas de vez en cuando (después de las actualizaciones). Puede solucionarlo poniéndose en contacto con su desarrollador web o con los desarrolladores del plugin/tema. Así podrá colocar las migas de pan en la mejor ubicación posible.

Después de añadir las migas de pan, es probable que vea mejoras en el rendimiento de los motores de búsqueda. 

Si aún no lo ha hecho, ahora es probablemente el mejor momento para utilizar Google Analytics. Muchas empresas llevan a cabo estudios controlados para demostrar si ciertos cambios tienen un impacto positivo en los rankings de páginas concretas dentro del sitio web utilizando Google Analytics.

Si desea obtener más información sobre cómo añadir Google Analytics a su sitio web de WordPress, tiene a su disposición una guía completa.

Conclusión

Las migas de pan son extremadamente útiles. Pueden ayudar a darle un impulso SEO muy necesario y proporcionar una experiencia mejorada para los visitantes del sitio web. 

Hay varias formas de añadir migas de pan en WordPress. Este post cubre dos maneras de añadir migas de pan, mostrando paso a paso cómo implementar cada uno.

Astra es diferente a la mayoría de los temas en más de un sentido. Astra es ligero, SEO amigable y se ve muy bien en varios tamaños de pantalla, y usted no tiene que juguetear con el código sólo para añadir esas migas de pan tan necesarios.

En busca de un Tema optimizado para SEO? No busque más. Echa un vistazo Astra.

Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.

2 comentarios
  1. Thelma Okoro Profile Pic

    Tengo que confiar en el comentario para ponerme en contacto con usted. Facilita el contacto a los compradores potenciales, ¡puedes limitarlo a clientes pro potenciales como yo!

    No puedo localizar fácilmente su sitio de demostración para pro, ¡debería ser TAN FÁCIL! Otros temas como Shoptimizer hecho esto fácilmente disponible desde la página principal.

    Necesito ver demo y hacer preguntas fácilmente antes de comprar, interesado en pro SOLAMENTE.

    Gracias

    1. Team Astra Profile Pic

      Hola Thelma,

      Claro, tenemos una sección dedicada en nuestro Portal de Soporte para Preventa preguntas.

      Y también, se dará cuenta de la sección Starter Templates en la cabecera, enumeramos todas nuestras demostraciones de sitios web allí. Puede consultar las siguientes documento para ayudarle con las preguntas básicas relacionadas con el Starter Templates.

      Estaremos encantados de ayudarle con cualquiera de sus consultas. Póngase en contacto con nosotros a través de nuestro portal de asistencia.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

La descarga está a un solo clic

Download Checklist

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio