Las migas de pan (Breadcrumb) en Bootstrap 4

Descubre como agregar las migas de pan o Breadcrumbs en tus páginas web usando la tecnología Bootstrap. Diseño atractivo y minimalista.

¿Qué son las migas de pan y para que sirven?

Las migas de pan se utilizan para darle sentido a una página web y sirven para orientar el camino recorrido al usuario que navega por la misma.

Se trata de una navegación secundaria dentro de una página web que ofrece a los usuarios la opción, en forma de enlaces internos, de regresar rápidamente a la página principal o a otro nivel de la página web.

Gracias a este tipo de navegaciones, el usuario puede reconstruir qué páginas ha visitado anteriormente.

Esta navegación secundaria suele construirse jerárquicamente según la web y muestra la ruta lógica desde la página principal hasta la posición actual.

La navegación con migas de pan se puede encontrar comúnmente en la parte superior de un sitio web, y por lo general no es demasiado notable como elemento de diseño.

Ventajas de tener una navegación con Breadcrumb o migas de pan

Las migas de pan permiten mejorar la usabilidad de un sitio web y además son un elemento importante a la hora de mejorar el posicionamiento.

Se dice que la navegación con migas de pan o Breadcrumb ayuda enormemente a los usuarios a navegar.

Por lo tanto, desde el punto de vista de la usabilidad, el Breadcrumb o migas de pan son indispensables.

Desde una perspectiva de optimización SEO es importante implementar los Breadcrumbs de forma correcta. Conviene usar los rich snippets (microformatos) en las etiquetas HTML de los Breadcrumbs para que también aparezcan en los resultados de búsqueda de las SERPs.

En definitiva, los Breadcrumbs ayudan a los motores de búsqueda a rastrear y resumir los sitios web. A través de este tipo de navegaciones se potencia la vinculación interna.

Si tienes una página web estructurada, comúnmente mediante categorías o algo similar, las migas de pan o Breadcrumbs no pueden faltar.

Migas de pan con Bootstrap

Es muy sencillo agregar las migas de pan o Breadcrumb en tu sitio web utilizando Bootstrap.

Fíjate en el siguiente código que puedes agregar con sentido en cada página de tu sitio web:

Source code

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Inicio</a></li>
        <li class="breadcrumb-item"><a href="#">Categoría</a></li>
        <li class="breadcrumb-item active">Página actual</li>
    </ol>
</nav>

El código HTML es una navegación con una lista ordenada dentro.

Si has instalado Bootstrap 4 de forma correcta en tu sitio web, el resultado sería algo como lo siguiente:

Migas de pan optimizadas para el SEO

En este caso debes agregar algunas etiquetas en el código HTML para disponer de los microformatos.

Continuando con el ejemplo anterior, lo dejaríamos así:

Source code

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

Ver demo Descargar

Ver más información sobre los Breadcrumbs en Bootstrap 4