Sergio Koller
Dic 13, 2019 | 19 min de lectura

Las breadcrumbs (también conocidas como migas de pan) son un elemento de la navegación web. El término proviene del clásico cuento de los Hermanos Grimm en el que los niños esparcían migas de pan en el bosque para encontrar el camino de regreso a casa. En un sitio web, las breadcrumbs tienen el mismo propósito: ayudan a los usuarios a comprender dónde están y, si es necesario, los ayudan a volver a la sección anterior.

En este artículo, hablaremos sobre los tipos de breadcrumbs que existen, si vuestro sitio realmente los necesita y cómo configurarlas correctamente.

Tipos y estructura de las breadcrumbs

Normalmente, os encontrarás con las breadcrumbs y su ruta de navegación en la parte superior de la página, justo debajo del menú del encabezado. Las breadcrumbs se componen de varios elementos, cada uno de los cuales enlaza a una categoría del sitio web o a la página de inicio. Dependiendo de los elementos incluidos en dicha ruta, podemos distinguir varios tipos de v.

Las breadcrumbs basadas en la jerarquía son las más comunes. Muestran a los usuarios el camino hasta la página de inicio, lo que les permite navegar fácilmente hacia las páginas de categoría uno o varios niveles en la jerarquía del sitio web. Entonces, la ruta de las breadcrumbs generalmente se verá así: Página de inicio> Categoría> Subcategoría> Página.

Sin embargo, las breadcrumbs en los sitios de e-commerce generalmente no tienen el elemento de la página de inicio y, como resultado, comienzan con la categoría por la que el usuario está navegando. Estas breadcrumbs se ven más ordenadas, pero los usuarios se ven obligados a usar la navegación o menú principal para ir hacia otras categorías del sitio.

Ambos ejemplos son variaciones de breadcrumbs basadas en la jerarquía, ya que la ruta siempre comienza con la categoría de nivel superior y guía a los usuarios por la estructura del sitio web. Son estáticas, lo que significa que las breadcrumbs tienen el mismo aspecto para todos los usuarios, sin importar cómo lleguen a una determinada página. Pero esta no es la única opción posible.

Las breadcrumbs dinámicas o basadas en los atributos se forman dinámicamente en función de la ruta que ha seguido el usuario. Pueden mostrar el lugar de la página dentro de la estructura del sitio web o mostrar los atributos del producto.

En el siguiente ejemplo, si los usuarios acceden a la página del producto desde la categoría de aspiradoras, verán este tipo de breadcrumbs.

Mientras tanto, si los usuarios comenzaron la búsqueda desde la categoría de marca iRobot, la ruta de las breadcrumbs se verá totalmente diferente.

Al igual que las breadcrumbs basadas en la jerarquía, las breadcrumbs dinámicas también pueden tener diferentes variaciones. La ruta puede comenzar en la página de inicio o en una categoría, se pueden agregar elementos adicionales a la ruta o incluso se pueden omitir algunos elementos sobrantes. Todo depende de la ruta que tome el usuario para llegar a una página determinada.

Breadcrumbs en un menú desplegable. Si el sitio web es realmente grande y queréis añadir más de unos cuantos elementos adicionales a la ruta, el menú desplegable de navegación sería vuestra mejor opción. Funciona tanto para breadcrumbs basadas en la jerarquía como para breadcrumbs dinámicas, pero tomemos las dinámicas como ejemplo.

En el sitio web de TripAdvisor, los usuarios pueden ver la lista completa de artículos que pertenecen a la categoría Marbella, así como todas las páginas relacionadas gracias al menú desplegable de navegación.

Breadcrumbs de Tripadvisor

Si elegís la categoría Alquileres de Vacaciones en Marbella de la lista desplegable, la ruta de las breadcrumbs se transformará y comenzará con la categoría Alquileres de Vacaciones, mientras que el elemento «Marbella» desaparecerá.

Historial de breadcrumbs

Finalmente, el último tipo de breadcrumbs son las que están basadas en el historial. Esto sucede cuando la ruta consiste en las páginas actuales que visitó un usuario, por lo que la ruta se ve algo así: Inicio> Página anterior> Página anterior> Página actual. Estas breadcrumbs rara vez se usan, ya que el botón Atrás del navegador hace el mismo trabajo. Además, no son de utilidad para los visitantes que vinieron de Google u otras fuentes externas.

Al mismo tiempo, las breadcrumbs basadas en el historial a menudo se combinan con otros tipos de breadcrumbs para permitir a los usuarios volver fácilmente a la página anterior.

Así que, como veréis, las breadcrumbs vienen en todas las formas y tamaños para satisfacer las necesidades de cada sitio web. La pregunta es si vosotros en realidad necesitáis incluirlas en vuestra web.

Qué sitios web no pueden prescindir de las breadcrumbs

De acuerdo a los ejemplos anteriores, podéis pensar que solo las grandes tiendas en línea con estructuras web complicadas y muchas categorías necesitan breadcrumbs. Pero, ese no es el caso. Podemos encontrar un gran uso para las breadcrumbs en sitios web de medios, foros, catálogos de negocios, blogs, etc.  No depende del tipo de sitio web sino de cuán complicada es su estructura.

Si vuestro sitio web tiene una estructura lineal con no más de dos niveles de páginas, podéis vivir tranquilamente sin las dichosas breadcrumbs. Los sitios web que alojan páginas de destino separadas y no relacionadas tampoco necesitan breadcrumbs.

En todos los demás casos, tenéis que considerar seriamente añadir las breadcrumbs a vuestro sitio web. Hay varias razones para hacerlo, ya que los beneficios que las breadcrumbs pueden aportar a vuestra web van más allá de una mejor usabilidad.

Tres razones para adorar las breadcrumbs

No os resultará nada difícil implementar las breadcrumbs en vuestra web. Una vez que lo hayáis hecho, habréis mejorado tres cosas: usabilidad del sitio web, estructura de enlaces internos y CTR.

Mejor experiencia de usuario

Las breadcrumbs facilitan a los usuarios navegar por vuestro sitio web. Los usuarios siempre saben dónde están y pueden volver a la página anterior o ir a una categoría diferente sin grandes problemas. Las breadcrumbs son especialmente útiles para los usuarios que provienen de los resultados de búsqueda y no tienen idea de cuál es la estructura de vuestro sitio web.

Voy a daros un ejemplo. Supongamos que estáis buscando un sofá. Habéis hecho clic en un fragmento de Google y queréis ver qué otras opciones ofrece la tienda. Gracias a las breadcrumbs, podéis acceder a todo el catálogo de sofás o consultar otros productos de la misma marca con solo un clic.

Las breadcrumbs también son útiles cuando comenzáis la búsqueda de productos desde la página de categorías del sitio web y establecéis filtros como el color o el tamaño. Luego, si vosotros queréis regresar a las categorías desde la página del producto usando las breadcrumbs, no perderéis los filtros que aplicasteis y podréis continuar desde donde estabais. Si usáis el botón Atrás del navegador, es muy posible que los filtros desaparezcan.

Mejor estructura de enlaces internos

Junto con el menú del encabezado y el pie de página, las breadcrumbs ayudan a distribuir la equidad de enlaces en vuestro sitio web. Cuanto más alta se coloque la página dentro de la jerarquía de vuestra web, más páginas deberían apuntar hacia ella haciendo hincapié en su importancia. Esto significa que, las categorías deben enlazar a la página principal, las subcategorías deben enlazar a categorías y las páginas de productos deben enlazar a las subcategorías.

La herramienta de Auditoría Web de SE Ranking puede ayudaros a ajustar la estructura de enlaces de vuestro sitio web de manera que el «link juice» sea distribuido a la página correcta. Seguid esta guía (en inglés) sobre enlaces internos para aprender a usar correctamente todos los tipos de enlaces internos, incluyendo las breadcrumbs.

Fragmentos de búsqueda irresistibles

Podréis incluir el marcado de vuestra ruta de navegación a los fragmentos de Google, siempre y cuando sea clara y llamativa. 

De hecho, cada resultado de búsqueda ahora presenta una ruta de navegación, ya que Google está reemplazando las URL con breadcrumbs en la búsqueda de escritorio. Pero, si actualmente no usáis las breadcrumbs, o si no le decís a Google que las tenéis en un idioma que entienda, Google creará su propia versión de breadcrumbs basada en vuestra URL. Así es como se verán las breadcrumbs si no incluís la categoría de la página dentro de la URL:

Para que Google muestre vuestras breadcrumbs en el fragmento, y no la URL modificada, usad el schema markup. La parte interesante aquí es que Google decidirá por sí mismo cuáles de las categorías de vuestra web incluir en la ruta, dependiendo de la relevancia que tengan para la consulta de búsqueda.

Para comprobar cómo se ven los fragmentos de vuestras páginas, podéis buscar en Google las páginas de vuestro interés una por una. O mejor podéis usar SE Ranking y verificar todo dentro de una sola pestaña. Después de crear un proyecto, podréis comprobar los fragmentos de cada palabra clave que estáis rastreando en la sección Analíticas y Tráfico.

La herramienta almacena los datos durante 30 días, por lo que podréis elegir cualquier fecha o período dentro de este rango y comprobar cómo se ven vuestros fragmentos en los resultados de búsqueda.

Las breadcrumbs en los fragmentos de Google permiten a los usuarios comprender de un solo vistazo a qué categoría pertenece la página y qué productos o información relacionada pueden encontrar en el sitio web. Por lo tanto, las breadcrumbs adecuadas son otro factor que hace que los usuarios quieran elegir vuestro sitio web en lugar de otros.

En resumen, las breadcrumbs os ayudarán a enviar mejores señales de comportamiento a Google y a distribuir adecuadamente el «link juice» en vuestro sitio web. Ambas, son señales positivas de posicionamiento, lo que significa que la implementación de las breadcrumbs también puede ayudar a que vuestra web se posicione más alto. Dicho esto, quiero compartiros algunos consejos sobre cómo incluir las breadcrumbs a vuestro sitio web utilizando los Sistemas de Gestión de Contenidos (CMS) más populares.

Cómo añadir correctamente las breadcrumbs a vuestro sitio web

Hay algunas cosas que debéis considerar antes de incluir las breadcrumbs. Vamos a enumerarlas rápidamente.

  • No enlacéis la página actual en las breadcrumbs. Tener una página enlazada a sí mismo es malo para el SEO. Podéis incluir la página actual en la ruta de navegación sin problema, pero simplemente no la enlacéis. Por la misma razón, no se recomienda añadir breadcrumbs a la página de inicio, ya que en este caso, la ruta consistirá en un solo elemento que se enlaza a sí mismo.
  • Ubicad las breadcrumbs en la parte superior de la página justo por debajo de la navegación principal. Esta es una práctica común y los usuarios intuitivamente esperan encontrar allí las breadcrumbs. Sin embargo, algunos sitios web colocan las breadcrumbs en la parte inferior de la página, así es como Apple las ubica en su sitio.

Magas de pan en Apple España

La razón de todo esto es porque que sus páginas de productos vienen con descripciones bastante largas, por lo que los usuarios tendrían dificultades para volver hacia la parte de arriba. Y por esta misma razón, los sitios web con páginas en las que hay que deslizar como si no tuviesen fin, también pueden beneficiarse al tener la ruta de navegación al final de la página. Otra salida sería usar dos rutas de navegación, una en la parte superior de la página y otra en la parte inferior.

  • Aseguraos de añadir el schema markup al código de vuestro sitio web antes de habilitar las breadcrumbs. El schema markup es un vocabulario semántico de etiquetas que se agregan al código HTML. Ayuda a Google a comprender vuestro contenido y, en particular, le dice al motor de búsqueda que la lista de enlaces en la parte superior de vuestra página son para las breadcrumbs.

Cómo implementar el schema markup de las breadcrumbs en los fragmentos enriquecidos

Al añadir el vocabulario de Schema.org a vuestros microdatos HTML, permitiréis que Google muestre vuestras breadcrumbs actuales y no la versión adaptada de la URL de la página en el fragmento enriquecido.

Así es como se ve el código de breadcrumbs sin el schema markup.

Fuente: Schema.org

Y aquí está el código de la ruta de las breadcrumbs con el schema markup.

Fuente: Schema.org

Se recomienda el uso de dos tipos de schema markup, específicamente, Microdata y RDFa. Para obtener instrucciones detalladas sobre cómo implementar correctamente el marcado en vuestra web, podéis revisar las guías de Google.

Una vez que hayáis terminado, no olvidéis comprobar si todo está bien con la ayuda de la Herramienta de Prueba de Datos Estructurados de Google. No deben existir ningún error.

Herramienta de prueba de datos estructurados de Google

Ahora que sabéis por qué es importante el schema markup y cuáles son las mejores prácticas a seguir al momento de añadir las rutas de navegación, finalmente vamos a hablar acerca de los plugins para los CMS más populares que os ayudarán a implementar las breadcrumbs.

Añadiendo breadcrumbs en WordPress

Si vuestro sitio web se ejecuta en WordPress, podéis usar algún plugin especial para añadir breadcrumbs (Breadcrumb NavXT, SEO by Yoast) o escribir todo el código por vuestra cuenta.

USANDO UN PLUGIN ESPECIALIZADO

Echemos un vistazo más profundo al plugin BreadcrumbNavXT como ejemplo, ya que es una de las soluciones más populares en el mercado.

El plugin está disponible de forma gratuita. Es compatible con versiones de WordPress 3.0. y superiores, y vuestro host debería admitir la versión PHP 5.5 o más actualizadas.

Una vez que hayáis instalado y activado el plugin, id a Ajustes> Breadcrumb NavXT para configurarlo. La configuración estándar debería funcionar bien para la mayoría de los sitios web, pero también podéis personalizar todo según vuestras necesidades.

Fuente: wordpress.org

En la pestaña de Ajustes generales, podéis establecer el tipo de separador de las breadcrumbs, también elegir si queréis que la página de inicio se incluya en la ruta de ruta de exploración, etc.

En la pestaña Tipos de publicación, podéis configurar los enlaces de las breadcrumbs para diferentes tipos de página, como publicaciones, páginas o cualquier tipo de publicación personalizada.

Cuando terminéis con la configuración, las breadcrumbs no aparecerán inmediatamente en vuestro sitio web. Para hacerlas aparecer, deberéis añadir algunas líneas de código a vuestro tema o al archivo header.php de vuestro tema secundario.

div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”http://schema.org/”> 
<?php if(function_exists(‘bcn_display’)) 
{ 
bcn_display();
}?> 
</div>

Eso es todo. Ahora las breadcrumbs deberían ser visibles en vuestra web.

PROGRAMANDO VUESTRO PROPIO CÓDIGO DE BREADCRUMBS

El código de WordPress es simple y limpio, por lo que no os resultará difícil programar vuestra propia línea de breadcrumbs. Aquí está una muestra, pero, normalmente, podréis decidir qué variables incluir en el código de acuerdo con vuestra configuración de WordPress.

function the_breadcrumb() {
     echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';
     if ( is_category() || is_single() ) { 
        $cats = get_the_category(); 
        $cat = $cats[0]; 
        echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>'; 
    } 

    if(is_single()){ 
        echo '<li>'; 
        the_title(); 
        echo '</li>'; 
    } 

    if(is_page()){ 
        echo '<li>'; 
        the_title(); 
        echo '</li>'; 
    } 
    echo '</ul><div class="clear"></div></div>'; 
}

El código debe ser añadido a vuestro archivo functions.php, y aquí la regla principal es no poner esta función dentro de otra función diferente para que no exista interferencia entre las dos.

Para que vuestro sitio web muestre las breadcrumbs, activad la función colocando la siguiente línea de código donde deben aparecer las breadcrumbs:

<?php the_breadcrumb(); ?>

Prácticamente eso es todo. Para que vuestras breadcrumbs se vean mejor, podéis jugar con su diseño editando el archivo style.css en la parte id = «breadcrumbs».

Si programáis las breadcrumbs por vuestra cuenta, tendréis mucho espacio para su personalización. Además, vuestro sitio web definitivamente se cargará más rápido, ya que los plugins tienden a hacerlo más lento.

Añadiendo breadcrumbs en Joomla

Joomla viene con un módulo de breadcrumbs desde el primer momento, el mismo que podéis añadir desde vuestro panel de control yendo a Extensiones> Módulos. Aquí podéis elegir fácilmente qué elementos de breadcrumbs incluir en la ruta (inicio, página actual, eliminar el elemento «Estás aquí» que Joomla ofrece de forma predeterminada), seleccionar un separador de breadcrumbs personalizado, elegir dónde queréis colocar las breadcrumbs. En la pestaña Avanzadas, podéis definir una clase CSS personalizada para las breadcrumbs.

Fuente: docs.joomla.org

Los CMS más populares tienen plugins/módulos especiales que pueden ayudaros a implementar breadcrumbs en vuestra web, una prueba más de que este elemento de navegación realmente marca la diferencia.

Si ninguna de las soluciones que os he brindado para WordPress y Joomla funciona para vosotros, podéis añadir las breadcrumbs manualmente usando etiquetas HTML normales:

<ul class="breadcrumb"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">Category</a></li> 
  <li><a href="#">Subcategory</a></li> 
  <li>Page</li> </ul>

El único inconveniente de hacerlo así es que deberéis añadir manualmente las breadcrumbs a cada página del sitio web donde queréis que aparezcan.

No hay lugar para dudas

Las breadcrumbs son uno de los elementos de navegación más esenciales y, gracias a la abundancia de plugins y módulos, también son fáciles de implementar. Por lo tanto, si vuestro sitio web tiene más de veinte páginas y una estructura con varios niveles, no hay excusa para que no incorporéis las breadcrumbs. Esta ruta de navegación será de gran ayuda para vuestros usuarios tanto en vuestra web como en los resultados de búsqueda.

Y vosotros, ¿Tenéis breadcrumbs en vuestro sitio? ¿Qué tipo de navegación os va mejor? Compartid vuestra experiencia en la sección de comentarios.

Post Views: 201
Deja un comentario

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

MÁS ARTÍCULOS
INSIGHTS DE SEO
5 pasos para pasar tu web a HTTPS
May 29, 2020 20 min de lectura

HTTPS es un protocolo seguro de transferencia que cada sitio web necesita para proteger los datos de los usuarios. Descubre por qué debes cambiar a HTTPS sin más demoras, por qué necesitas un certificado SSL y dónde obtenerlo. También compartiremos algunas ideas sobre cómo configurar tu sitio web y Google Search Console después de pasar a HTTPS que to ayudarán a mantener tus rankings y tráfico.

Sergio Koller
INSIGHTS DE SEO
Entendiendo las palabras clave de cola larga o "Long Tail" para mejorar el SEO
May 19, 2020 28 min de lectura

Las palabras clave de cola larga tienen más de lo que parece. Consisten en frases de 3-5 palabras, tienen un bajo volumen de búsqueda, un bajo nivel de competencia y una alta tasa de conversión. Pero, ¿cuál es la mejor manera de encontrarlas y usarlas en tu sitio web para obtener una ventaja SEO? Descúbrelo leyendo esta publicación.

Sergio Koller
INSIGHTS DE SEO
Cómo mantener tu SEO durante el rediseño del sitio web
May 08, 2020 22 min de lectura

El rediseño del sitio web es un proceso complejo que transforma un sitio web tanto por fuera como por dentro. Muchas cosas pueden salir mal con respecto al SEO a medida que hagas pruebas A/B, modifiques el diseño de las páginas del sitio web, renueves la estructura del sitio web y modifiques el contenido. Aprende a manejar todos los cambios que realices para pasar por el rediseño perdidas.

Sergio Koller