Josep Deulofeu
Las estructuras de las tiendas online suelen presentar las arquitecturas más complejas sobre las tipologías de páginas que existen. Si lo sumamos a la complejidad sobre la indexación de páginas nuevas por parte de Google, es de vital importancia facilitar a los buscadores la comprensión de nuestras tiendas online.
Por esta razón es fundamental crear una estructura que sea intuitiva para el usuario y que facilite la navegación y la compra.
Y es aquí donde los breadcrumbs pueden ser de gran ayuda en este sentido.
En este artículo aprenderás qué son los breadcrumbs, cómo funcionan y cómo pueden mejorar el SEO facilitando al robot de Google entender y rastrear tu página web através de un caso real.
Índice
- ¿Qué son los breadcrumbs o migas de pan de una web?
- ¿Para qué sirven los breadcrumbs?
- Cómo mejorar el SEO con los breadcrumbs
- Tips sobre uso de breadcrumbs
- Cómo integrar los breadcrumbs en un sitio web
- Ejemplo de breadcrumbs en Html y CSS
¿Qué son los breadcrumbs?
Los breadcrumbs, también conocidos como «migas de pan», son una herramienta de navegación que muestra la ubicación del usuario 📌 en un sitio web.
Así de fácil.
Aquí te dejo una captura de un proyecto real donde estamos ejecutando el SEO:
Como ves, consiste en una serie de enlaces de texto que muestran la jerarquía de las páginas que el usuario ha visitado para llegar a la página actual o cómo la tienda online ha jerarquizado el catálogo de productos.
¿Para qué sirven los breadcrumbs?
Los breadcrumbs sirven principalmente para ayudar a los usuarios a orientarse en un sitio web y facilitar la navegación. Al mostrar la ubicación del usuario, los breadcrumbs proporcionan una referencia visual clara de la jerarquía de las páginas y permiten que los usuarios comprendan cómo está organizado el sitio. Muy parecido al campo de la señalética trasladado al mundo online.
En concreto:
- Los breadcrumbs también pueden ser útiles para que los usuarios regresen a una página anterior de manera rápida y sencilla.
- Además pueden mejorar la experiencia del usuario, ya que reducen la cantidad de clics necesarios para navegar a través de un sitio web.
- Además nos ayudarán a que Google rastree e, indexe y entienda mejor nuestra página web 👇
Cómo mejorar el SEO con los breadcrumbs
Al proporcionar una estructura clara y coherente a Google, este podrá comprender la jerarquía de las páginas y el contenido del sitio mediante el enlazado interno que estos proporcionan.
En el ejemplo anterior (juegoyjardin.com), es un eCommerce focalizado en el mobiliario recreativo para niños. Nuestro objetivo es que Google entienda que a través de nuestra arquitectura web somos especialistas para cada una de las Familias que ofrecemos en nuestro catálogo de producto.
Por ejemplo, este proyecto lo empezamos con el foco en los parques infantiles, con lo que para dar a entender a Google que somos especialistas sobre este segmento hemos atacado todas las intenciones de búsqueda y cómo consecuencia las necesidades del sector, como puedes ver a través del mega menú que hemos ejecutado 👇
Por esta razón, una vez tenemos la arquitectura establecida sobre un vertical, los breadcrumbs bien implementados facilitaran la comprensión entre la relación de las categorías por parte de Google. Este sería un ejemplo sencillo de familias y subfamilias relacionadas en un mismo segmento:
Home > Parques infantiles de exterior
Home › Parques infantiles › Parques infantiles para uso público
Tips sobre uso de breadcrumbs
Jerarquía de navegación clara y coherente
Los breadcrumbs deben reflejar la estructura jerárquica del sitio web, desde la página de inicio hasta la página actual. Esto significa que la navegación del sitio web debe estar organizada de manera clara y coherente, con una jerarquía de categorías y subcategorías que reflejen la relación entre las páginas. (Cómo hemos visto con el caso anterior)
Palabras clave relevantes
Incluye palabras clave (anchor text) relevantes en los enlaces de los breadcrumbs, especialmente en los términos de categoría y subcategoría. Esto puede ayudar a los motores de búsqueda a comprender el contenido de las páginas y a mejorar la relevancia del sitio web para búsquedas específicas.
Por ejemplo con la URL: https://juegoyjardin.com/collections/parques-infantiles-de-exterior queremos posicionar para la palabras clave: “Parques infantiles”:
Por esta razón en las subcategorías utilizamos el anchor text concreto:
De esta forma mediante el enlazado interno, facilitamos la prominencia de palabra clave a Google.
Marcado de schema.org
El uso del marcado de schema.org puede ayudar a los motores de búsqueda a comprender la estructura de los breadcrumbs y mejorar la apariencia de los resultados de búsqueda. En este caso será fundamental aplicar los datos estructurados de ruta de exploración (breadcrumbList ), mediante la herramienta de datos estructurados podrás validar si tu tienda online, dispone de este marcado.
En el caso de juegoyjardin, hemos aplicado los breadcrumbs pero nos faltará añadir los datos estructurados de ruta de exploración.
En mi blog personal están implementados, así que en caso que lo tengas debería salir un resultado parecido al siguiente:
Si quieres saber más sobre este tema aquí tienes una guía completa sobre datos estructurados.
Breadcrumbs en todas las páginas
Asegúrate de incluir breadcrumbs en todas las páginas del sitio web, no solo en las páginas de categoría, es decir en las fichas de producto y artículos de blog también deberían estar.
Esto ayuda a los usuarios a navegar a través del sitio web y mejora la coherencia y la estructura del sitio para los motores de búsqueda.
Cómo integrar los breadcrumbs en un sitio web
Integrar los breadcrumbs en un sitio web es relativamente sencillo, ya que se pueden crear utilizando código HTML y CSS o incluso mediante los propios CMS disponen de themes o apps para implementarlos.
Aquí hay algunos pasos para integrar los breadcrumbs que serán transversales a todas las casuísticas:
- Decide dónde colocar los breadcrumbs: Los breadcrumbs generalmente se colocan en la parte superior de la página, debajo del encabezado o la barra de navegación. Asegúrate de que la ubicación sea visible y accesible para los usuarios.
- Crea la estructura de los breadcrumbs: Crea una estructura jerárquica de categorías y subcategorías que refleje la arquitectura del eCommerce
- Utiliza código HTML y CSS: Utiliza código HTML y CSS para crear los enlaces y dar formato a los breadcrumbs. Por ejemplo, puedes utilizar la etiqueta <nav> para crear una navegación por migas de pan y estilos CSS para dar formato a los enlaces.
Ejemplo de breadcrumbs en Html y CSS
Aquí hay un ejemplo de cómo crear breadcrumbs utilizando HTML y CSS:
<nav class=»breadcrumbs»> <ul> <li><a href=»/»>Inicio</a></li> <li><a href=»/categorias/»>Categorías</a></li> <li><a href=»/categorias/ropa/»>Ropa</a></li> <li>Camisetas</li> </ul> </nav>
En este ejemplo, los breadcrumbs se crean utilizando una lista no ordenada (<ul>) y una serie de elementos de lista (<li>). Cada elemento de la lista contiene un enlace de texto que refleja la ubicación del usuario en el sitio web. La clase «breadcrumbs» se utiliza para aplicar estilos CSS específicos a los breadcrumbs, como la fuente, el tamaño y el color del texto.
Puedes agregar más estilos CSS para personalizar los breadcrumbs según las necesidades que tengas 😉
Conclusión sobre los breadcrumbs
En conclusión, los breadcrumbs son una herramienta útil para mejorar la experiencia del usuario y el SEO. Proporcionan una forma sencilla y clara de indicar la ubicación del usuario en el sitio web, facilitando la navegación y reduciendo la tasa de rebote. Asegúrate de crear una estructura jerárquica clara y coherente y de utilizar el marcado de schema.org para mejorar la funcionalidad y la apariencia de los breadcrumbs.
Cómo siempre espero que sea de utilidad 🤝 y cualquier duda sobre breadcrumbs soy todo oídos.
Nos vemos en el próximo artículo. ¡Un abrazo!
Imagen: Depositphotos
Mantente informado de las noticias más relevantes en nuestro canal de Telegram