HOME || Internet || Crear migas de pan breadcrumb
Creado el: 8 abril, 2019 - Actualizado el: 11 abril, 2019 - Autor: lornal
AMP Versión AMP: Crear migas de pan breadcrumb (Versión AMP)

Crear migas de pan breadcrumb

Crear migas de pan breadcrumb

Qué son y cómo crear migas de pan en nuestra página con enlace a Home, categoría y título del post. Los breadcrumb son esas líneas de enlaces con la ruta o camino del post que se está leyendo.

Indice de contenido

Las migas de pan (breadcrumb). Qué son?

Vamos a ver que son los enlaces de migas de pan o breadcrumb, como se las conoce en el mundo webmaster. También veremos que importancia tienen para el posicionamiento y su destaque en los resultados de búsqueda de Google. Por último veremos de que manera podemos indicarle a Google mediante datos estructurados la miga de pan de nuestra página.

Seguramente alguna vez viste una línea de enlaces que por lo general va desde la HOME hasta el título del post o página, pasando por la categoría de la misma si es que la tiene. Y si te dijera que a eso se le llama Miga de pan o breadcrumb, pues sí! Parece el cuento de handsel y gretel y es que el concepto tiene cierta similitud.

La miga de pan o línea de enlaces con las rutas indicativas del camino del post que se está leyendo es un dato que no debería faltar en tu sitio. Ayuda al usuario y a los buscadores como Google a relacionar el contenido de tu página y a no perderse dentro de él.

Si utilizas un CMS como WordPress te resultará fácil implementarlo ya que existen muchos plugins (ver Crear migas de pan con plugin Breadcrumb NavXT) que lo hacen de manera automática. Si eres de esos que no quiere instalar demasiados complementos, prefiriendo hacerlo a mano, deberás modificar la plantilla de tu tema directamente por código PHP.

Si todo tu sitio está gestionado por tu propio cerebro también podrás agregar un simple código a cada una de tus páginas y otro para indicarle a los rastreadores e indexadotes de páginas las migas de pan a seguir en el post desde la HOME hasta el artículo mismo.

Por si todavía no te ha quedado claro que son las migas de pan o breadcrumb te muestro un ejemplo:

HOMEWordPressCrear migas de pan breadcrumb

Cada una de esas palabras o frases representa el camino a seguir que, generalmente y es muy recomendable que así lo hagas, va desde la HOME (página principal del sitio) hasta el artículo mismo. En este ejemplo el artículo está enlazado a una categoría la cual se especifica claramente en el camino. Es muy importante escribir un texto bien descriptivo en cada enlace de miga de pan, utilizar el título de la página es lo ideal.

La miga de pan no representa la URL del artículo. No confundas miga de pan con URL del artículo. Si te fijas bien la URL del artículo que estás leyendo no representa a la miga de pan ya que para acceder a él no se debe escribir el nombre de la categoría. Es por eso la importancia de relacionar nuestras páginas con este sistema.

Tipos de Migas de pan

Hay varios tipos de Migas de pan y su implementación dependerá del tipo de sitio web y contenido ofrecido.

  • Breadcrumb Estructurado: Los enlaces creados siguiendo la estructura de localización de una página dentro del sitio es el sistema más utilizado por los webmasters. Marca claramente donde estamos parados y el camino a seguir desde la página principal hasta el post mismo. Por lo general es representado por una línea de enlaces horizontal, donde el anchor de cada enlace representa el contenido descriptivamente vinculado.
  • Breadcrumb de navegación: En sitios donde la estructura se basa en un contenido netamente dinámico es aconsejable utilizar este tipo de migas de pan. De la misma manera que el contenido los breadcrumb se irán creando dinámicamente a medida que el usuario visita el sitio y recorre el contenido.

Tips para crear tus Migas de pan

  • En cualquiera de los casos y más allá del tipo de miga de pan que utilices nunca debes reemplazar el sistema de navegación principal de tu sitio por éste.
  • Utiliza un texto corto y descriptivo en el enlace. Debes priorizar siempre la usabilidad en tu sitio.
  • Trata de que sea un estructura horizontal. Nunca vertical ni de lista.
  • Utiliza el atributo TITLE en los enlaces de migas de pan para describir el contenido vinculado.
  • Diferencia con colores o resaltado de texto los distintos niveles de jerarquía. Ayudará al usuario a distinguir claramente en un vistazo la estructura del sitio.

Como ya dije las migas de pan son muy importantes para un correcto SEO en tu sitio web. Los motores de búsqueda podrán comprender más claramente la relación de la página analizada con respecto a todo tu sitio.

De la misma manera que un humano cuando ve una línea de enlaces se da cuenta que corresponde a un camino o ruta del post dentro de la estructura del sitio, los motores de búsqueda como Google, Yahoo o Bing también utilizarán esta información estructurada para entender un poco más lo que se quiere comunicar en el artículo. El solo hecho de crear una línea de enlaces o migas de pan bastaría para brindar la ayuda necesaria a estos motores de búsqueda pero ya hace un tiempo que los más grandes como Google están utilizando una manera más personal, por decirlo de alguna manera, en como el webmaster debe estructurar y comunicar los datos en una página web.

Para eso es necesario crear una serie de etiquetas de datos estructurados. Hay muchas maneras de hacerlo y según la plataforma que utilices para crear tu sitio necesitarás utilizar una  u otra. A veces es difícil entender el concepto de como crear datos estructurados, pero no te asustes que no es difícil. Para entenderlo mejor te aconsejo que hagas una página de ejemplo y la analices con el Análisis de datos estructurado de Google.

En este análisis podrás ver de que manera el buscador lee la información estructurada de tu página mediante todo un código especial que a simple vista solo los buscadores entienden, pues estos datos no están visible para el usuario ya que es un marcado por código que generalmente va en entre las etiquetas HEAD.

Según Google es aconsejable utilizar el marcado JSON-LD para indicar la estructura de las migas de pan de la página. A continuación vamos a ver cómo realizar esto modificando la plantilla PHP de nuestro tema si es que utilizamos WordPress.

Como crear migas de pan por código HTML y PHP

Voy a darte un ejemplo de cómo agregar el código necesario (marcado estructurado JSON-LD) para crear los datos de migas de pan mediante código PHP si es que utilizas WordPress como gestor de contenido. El código deberás insertarlo en la plantilla PHP correspondiente a tu tema activo. Si quieres que el código se inserte automáticamente en todas las entradas lo mejor sería que edites el archivo content-single.php de tu tema.

<?php
if (!is_home()) {
   foreach((get_the_category()) as $category) {
   }
?>
<script type=application/ld+json>{
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "<?php echo esc_url( home_url( '/' ) ); ?>",
                "name": "Home"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "<?php echo esc_url( home_url( '/' ) ); ?>cotegory/<?php echo $category->slug; ?>/",
                "name": "<?php echo $category->cat_name; ?>"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "<?php echo get_permalink(); ?>",
                "name": "<?php echo get_the_title(); ?>"
            }
        }
    ]
}</script>
<?php
}
?>

Este código te servirá si tienes tu sitio creado con una estructura de categorías única no jerarquizada. Si dispones de sub-categorías te aconsejo usar el plugin Breadcrumb NavXT de WordPress.

El dato estructurado que será leido por los motores de búsqueda indica como primer ítem o punto de arranque la Home, indicando la URL y la relación que tiene con respecto a las páginas que le siguen. Luego agrega la categoría y sigue con el artículo.

Para crear la línea de enlaces utiliza éste código en el lugar que quieras:

<div class="breadcrumb">
   <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Página Principal">HOME</a> || 
<?php 
foreach((get_the_category()) as $category) {
      $MigaPan = '<a href="' . esc_url( home_url( '/' ) ) . '/category/' . $category->slug . '/" title="Categoría ' . $category->cat_name . '">' . $category->cat_name . '</a> || ';
}
   echo $MigaPan;
?>
<a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php echo get_the_title(); ?></a>
<br>
</div>

Al crear un marcado estructurado por JSON-LD no es necesario etiquetar por HTML con marcado RDFa.

Utilizando estos dos códigos tendrás creadas tus migas de pan en cada post o entrada de WordPress. El código pasa por alto la creación de breadcrumb en la página HOME ya que no es necesario hacerlo.

Te fue útil el artículo? Califícalo

Votos: - Promedio: