Cómo crear breadcrumbs para SEO y UX

Beneficios UX de los breadcrumbs

El objetivo principal de los breadcrumbs o migas de pan, es ayudar al usuario a ubicarse dentro de la web, a saber exactamente dónde se encuentra. La ruta que defina el Breadcrumb le ayudará a saber dónde está, y la estructura de los contenidos jerarquizados por encima de éste. El Breadcrumb además, permite al usuario acceder a todos estos niveles anteriores a través de un enlace.

La utilización de este elemento reduce la tasa de rebote de las páginas, pues si el usuario no llega donde esperaba, tiene una salida a mano para seguir navegando por donde cree que estará su contenido. Por otro lado, también ofrecen la posibilidad de llegar a su página objetivo más rápidamente y realizar la tarea que han venido a hacer. Es una guía para la consecución de sus objetivos dentro del site.En definitiva los breadcrumbs:

  • Ayudan al usuarios a saber dónde se encuentra.
  • También a acceder a través de enlaces directos a contenidos relacionados y organizados jerárquicamente.
  • Reducen la tasa de rebote.
  • Facilita el llegar a donde se quiere y completar el objetivo.

La decisión de utilizar o no breadcrumbs, es propia, sin embargo, es importante saber que el hecho de utilizarlos no suele generar problemas a los usuarios. O bien los utilizan correctamente o los ignoran, por lo que su utilización no supone un riesgo alto y además, prácticamente no ocupan espacio. Además, el funcionamiento de los mismos es fácil de entender prácticamente por todos los usuarios.

  • No suelen dar problemas
  • Ocupan muy poco espacio
  • Son sencillos de entender

Beneficios SEO de los breadcrumbs

Los Breadcrumbs son importantes en SEO por varias razones. En primer lugar, cuando realizamos una estrategia SEO, el objetivo es atraer tráfico de calidad, es decir, usuarios que se queden en la página y realicen el objetivo que hemos definido para ellos. Por esta razón, todas los comentarios que hemos hecho con respecto a las facilidades UX de las migas de pan, aplican en SEO.
Por otro lado, los breadcrumbs están hechos de enlaces internos, que en general deberían ser dofollow. Estos enlaces ayudan no solo a los usuarios a navegar sino que también ayudan a los bots, como Google, a rastrear el site correctamente. Los enlaces que se crean de una página a otra establecen una relación entre ellas de modo que si en una tienda de libros enlazamos la sección “Terror” con la landing del autor “Stephen King”, y/o viceversa, Google y otros buscadores entenderán que estas páginas están relacionadas. O lo que es lo mismo:

  • Que Stephen King escribe terror
  • Que un escritor de terror es Stephen King

Además, los breadcrumbs, aumentan la densidad de palabras clave relevantes o relacionadas con la página en cuestión, por lo que el contenido de la misma se vuelve más rica.

Finalmente, Google ha hablado en varias ocasiones de la importancia de la utilización de los breadcrumbs por lo que, si a él le gustan, no está de mal utilizarlos. De hecho, los breadcrumbs marcados correctamente pueden aparecer en los snippets resultados de búsqueda.

Buenas prácticas para la utilización de los breadcrumbs

Estas son algunas de las recomendaciones a la hora de incluir las migas de pan:

  • Deben organizarse de forma jerárquica, es decir, no debemos mostrar elementos que están al mismo nivel.
  • Tampoco debemos confundir la jerarquía con la navegación. Lo que mostramos no es el path que ha realizado el usuario hasta llegar hasta ahí, sino el orden de los elementos según cómo estar categorizados.
  • Deben colocarse en la parte superior de la página, donde sean visibles.
  • No deben utilizarse como sustitutivo del menú de navegación principal.
  • Utilizamos separadores entre elementos, preferiblemente, un único símbolo, como “ > “ o “ | “, etc.

Todos los elementos deben llevar enlace do follow, a excepción del último, que muestra la sección en la que nos encontramos y que no debe llevar enlace de ningún tipo.

[ALGUNAS FUENTES]

[MAS INFO]

  • http://www.baekdal.com/insights/breadcrumbguidelines
  • https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
  • https://www.nngroup.com/articles/breadcrumb-navigation-useful/

Deja un comentario

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