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.
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.
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:
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
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)
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.
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.
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.
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:
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 😉
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
No se han encontrado artículos relacionados.
Your email address will not be published. Required fields are marked *
Δ