Buscar
Cerrar este cuadro de búsqueda.

Breadcrumb navigation

 

La navegación de migas de pan (breadcrumb navigation) es un tipo de herramienta de navegación en sitios web.

Que muestra una serie de enlaces que indican la ruta que el usuario ha seguido para llegar a la página actual.

Esta herramienta es esencial para mejorar la experiencia del usuario al proporcionar una forma clara y fácil de entender la estructura jerárquica del sitio.

Permitiendo una navegación eficiente.

 

Características de la Breadcrumb Navigation

 

Jerárquica

Muestra la estructura del sitio de manera jerárquica, generalmente desde la página principal hasta la página actual.

Permitiendo a los usuarios ver y acceder a niveles superiores del sitio fácilmente.

 

Enlaces Internos

Cada «miga» en la navegación es un enlace que lleva a una página específica dentro de la estructura del sitio, facilitando la navegación entre diferentes niveles de contenido.

 

Posición Visible

Suele ubicarse en la parte superior de la página, generalmente debajo del encabezado principal o la barra de navegación, para que sea fácilmente visible y accesible.

 

Tipos de Breadcrumb Navigation

 

Breadcrumbs de Ubicación

Indican la posición actual del usuario dentro de la estructura del sitio.

Ejemplo: Inicio > Categoría > Subcategoría > Página Actual.

 

Breadcrumbs de Atributo

Utilizados en sitios de comercio electrónico para mostrar las características o filtros aplicados.

Ejemplo: Inicio > Ropa > Hombre > Camisas > Tallas > L.

 

Breadcrumbs de Historial

Basados en el historial de navegación del usuario.

Ejemplo: Inicio > Página A > Página B > Página C.

 

Beneficios de la Breadcrumb Navigation

 

Mejora de la Experiencia del Usuario (UX)

Facilita la navegación, permitiendo a los usuarios moverse hacia atrás en la jerarquía del sitio de manera intuitiva y rápida.

 

Reducción de la Tasa de Rebote

Ayuda a los usuarios a encontrar fácilmente el contenido que buscan, lo que puede reducir la probabilidad de que abandonen el sitio.

 

Aumento del Tiempo en el Sitio

Proporciona una navegación más eficiente, lo que puede aumentar el tiempo que los usuarios pasan en el sitio explorando más contenido.

 

SEO Mejorado

Los motores de búsqueda utilizan breadcrumbs para entender la estructura y jerarquía del sitio, lo que puede mejorar la indexación y el ranking en los resultados de búsqueda.

 

Implementación de Breadcrumb Navigation

 

HTML y CSS

Utiliza listas desordenadas (<ul>) y elementos de lista (<li>) para estructurar los breadcrumbs y aplica estilos CSS para un diseño adecuado.

<nav aria-label=»breadcrumb»>
<ol class=»breadcrumb»>
<li class=»breadcrumb-item»><a href=»/home»>Inicio</a></li>
<li class=»breadcrumb-item»><a href=»/categoria»>Categoría</a></li>
<li class=»breadcrumb-item active» aria-current=»page»>Página Actual</li>
</ol>
</nav>

 

Microdatos de Schema.org

Implementa el marcado de datos estructurados de Schema.org para ayudar a los motores de búsqueda a entender la estructura de los breadcrumbs.

<nav aria-label=»breadcrumb»>
<ol class=»breadcrumb» itemscope itemtype=»http://schema.org/BreadcrumbList»>
<li class=»breadcrumb-item» itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>
<a href=»/home» itemprop=»item»><span itemprop=»name»>Inicio</span></a>
<meta itemprop=»position» content=»1″ />
</li>
<li class=»breadcrumb-item» itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>
<a href=»/categoria» itemprop=»item»><span itemprop=»name»>Categoría</span></a>
<meta itemprop=»position» content=»2″ />
</li>
<li class=»breadcrumb-item active» aria-current=»page» itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»>
<span itemprop=»name»>Página Actual</span>
<meta itemprop=»position» content=»3″ />
</li>
</ol>
</nav>

 

Plataformas CMS

La mayoría de los sistemas de gestión de contenidos (CMS) como WordPress, Joomla, y Drupal, tienen plugins o módulos que facilitan la implementación de breadcrumbs sin necesidad de codificación manual.

 

Mejores Prácticas para Breadcrumb Navigation

 

Consistencia

Mantén una estructura de breadcrumbs consistente en todo el sitio para evitar confusión entre los usuarios.

 

Inicio en la Página Principal

Comienza los breadcrumbs con un enlace a la página de inicio para proporcionar un punto de referencia claro.

 

Enlaces Claros y Descriptivos

Utiliza enlaces claros y descriptivos que indiquen claramente la sección o página a la que se refieren.

 

Diseño Limpio y Simple

Asegúrate de que los breadcrumbs sean visualmente discretos pero fácilmente accesibles, no compitiendo con el contenido principal por la atención del usuario.

 

Soporte de Dispositivos Móviles

Optimiza los breadcrumbs para dispositivos móviles, asegurando que sean fáciles de tocar y navegar en pantallas más pequeñas.

 

Herramientas y Recursos

 

Plugins y Extensiones

Utiliza plugins como Yoast SEO (para WordPress) que incluyen funcionalidades de breadcrumbs fáciles de implementar.

 

Herramientas de Diseño y Desarrollo

Herramientas como Bootstrap y Foundation ofrecen componentes pre-construidos para breadcrumbs que se pueden personalizar fácilmente.

 

Guías y Documentación

Referencias como la documentación de Schema.org y tutoriales de desarrollo web pueden proporcionar ejemplos y mejores prácticas para la implementación de breadcrumbs.

 

La navegación de migas de pan es una herramienta poderosa para mejorar la usabilidad y la navegación de un sitio web.

Facilita a los usuarios entender la estructura del sitio y moverse fácilmente entre diferentes niveles de contenido.

Lo que a su vez puede reducir la tasa de rebote y aumentar el tiempo de permanencia en el sitio.

 

Implementar breadcrumbs correctamente, siguiendo las mejores prácticas y utilizando herramientas adecuadas.

Puede proporcionar una experiencia de usuario más eficiente y mejorar el rendimiento general del sitio en términos de SEO y satisfacción del usuario.

 

 

Te puede interesar;

Herramientas de Link Building y Análisis de Enlaces

Plataformas de Linkbuilding para Crear Enlaces

Google Core Updates: Actualizaciones del Algoritmo de Google

Herramientas SEO Profesionales

Motores de Búsqueda Alternativos a Google

 

Manu Duque Soy Yo

¡Hola google! hay un pequeño problema de naming, nombre de marca ó marca personal, llámalo como quieras. Resulta que para el nombre de marca: «Manu Duque», aparecen resultados en las SERPs que no corresponden exactamente

Leer más »