Como agregar migas de pan en Blogger Breadcrumbs JSON-LD Seo para Google

Demo en Codepen

Las migas de pan es uno de los requerimientos de W3C para llegar al nivel "A" de accesibilidad web, ya que facilitan información a los usuarios para saber en qué parte se encuentran y qué camino recorrió. Además, combinado con datos estructurados JSON-LD, Google mostrará nuestros breadcrumbs en los resultados de búsqueda.


He desarrollado breadcrumbs especialmente para Blogger, que ademas incluyen datos estructurados BreadcrumbList en formato JSON-LD, necesarios para que sean visibles desde los resultados de búsqueda de Google.


Contenido


Instalar

Nos vamos a dirigir a Temas Personalizar opciones avanzadas Agregar CSS y en esta opción pegaremos el siguiente código:


/*!
 * Breadcrumbs v2.0
 * Copyright 2020 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (No modificar) {{*/
.breadcrumb-item,
.breadcrumb-link,
.breadcrumbs {
   display: -ms-flexbox;
   display: flex;
}
.breadcrumb-link {
   -ms-flex-align: center;
       align-items: center;
   transition: color .3s, background .3s;
   height: 38px;
}
.breadcrumb-link.isfirst,
.breadcrumb-link:hover {
   background: var(--breadcrumb-color);
}
.breadcrumbs {
   padding: 0;
   margin: 0;
}
.breadcrumbs,
.breadcrumb-item {list-style: none;}
.breadcrumb-link {position: relative;}
.breadcrumb-link svg {display: block;}
.breadcrumb-link::after,
.breadcrumb-link:not(.isfirst)::before {
   content: "";
   border-top: 19px solid;
   border-bottom: 19px solid;
   border-left: 10px solid;
   position: absolute;
   transition: border .3s;
}
.breadcrumb-link::after,
.breadcrumb-link:not(.isfirst)::before {
   border-color: var(--breadcrumb-bg);
}
.breadcrumb-link {
   background: var(--breadcrumb-bg);
}
.breadcrumbs .breadcrumb-link::after {
   right: -10px;
   border-top-color: transparent;
   border-bottom-color: transparent;
}
.breadcrumbs .breadcrumb-link:not(.isfirst)::before {
   left: -10px;
   border-left-color: transparent;
}
.breadcrumb-link.isfirst::after,
.breadcrumb-link:hover:after {
   border-left-color: var(--breadcrumb-color)
}
.breadcrumb-link:not(.isfirst):hover:before {
   border-top-color: var(--breadcrumb-color);
   border-bottom-color: var(--breadcrumb-color);
}
/*}} Fin del core {{*/

/*! Personalización */
/* Estructura
-----------------------------------------*/
.breadcrumbs {
   --breadcrumb-color: #8dc26e; /* color principal */
   --breadcrumb-bg: #f2f2f2; /* color de fondo  */
    margin-top: 0px; /* separacion superior */
    margin-bottom: 14px; /* separacion inferior */
}
/* Icono
-----------------------------------------*/
.breadcrumb-link svg {
   width: 18px; /* tamaño */
   fill: #fff; /* color */
}
.breadcrumb-link.isfirst {
   border-radius: 5px 0 0 5px; /* borde redondo */
}
/* Migas
-----------------------------------------*/
.breadcrumb-item {
   margin-right: 13px; /* separacion derecha */
}
.breadcrumb-link {
   color: #757575; /* color */
   padding: 0 12px; /* relleno */
   font-size: 14px; /* tamaño de texto */
   font-weight: 400; /* densidad del texto */
}
.breadcrumb-link:hover {
   color: #fff; /* color (hover) */
}

Presionamos "Aplicar" para guardar los cambios y ahora vamos a Tema Editar HTML y buscamos <b:includable id='status-message'> y arriba de eso pegamos el siguiente código:


<b:includable id='postBreadcrumbs'>
  <!-- limite de migas -->
  <b:with value='data:post.labels limit 3' var='breadcrumbs'>
  <!-- Migas de pan -->
  <ol class='breadcrumbs'>
    <!-- Inicio -->
    <li class='breadcrumb-item'>
      <a class='breadcrumb-link isfirst' expr:href='data:blog.homepageUrl'>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
          <path fill="none" d="M0 0h24v24H0z"/>
        </svg>
      </a>
    </li>
    <!-- Etiquetas -->
    <b:loop values='data:breadcrumbs' var='i'>
    <li class='breadcrumb-item'>
      <a class='breadcrumb-link' expr:href='data:i.url'><data:i.name/></a>
    </li>
    </b:loop>
  </ol>
  <!-- JSON-LD -->
  <script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "<data:blog.title/>",
      "item": "<data:blog.homepageUrl.canonical/>"
    }<b:loop index='e' values='data:breadcrumbs' var='i'>,{
      "@type": "ListItem",
      "position": <b:eval expr='data:e + 2'/>,
      "name": "<data:i.name/>",
      "item": "<data:i.url/>"
    }</b:loop>]
  }</script>
  </b:with>
</b:includable>

Por último necesitamos incluir la etiqueta <b:include> en donde queramos mostrar los breadcrumbs. Esta es quizás la parte más complicada ya que varía dependiendo de la plantilla:


<!-- Breadcrumbs -->
<b:include cond='data:view.isPost and data:post.labels' name='postBreadcrumbs'/>

Una buena forma de encontrar el sitio adecuado es buscando <data:post.title/>, e intentando encontrar la zona que corresponda a los títulos de los artículos, luego simplemente hacemos espacio arriba de eso y pegamos el código.


Datos estructurados

He diseñado el código con los datos estructurados del tipo JSON-LD ya incluidos y puedes validar los datos utilizando la herramienta de prueba de datos estructurados google para comprobar como se comporta el código.


No hay ninguna garantía de que Google vaya a tomar tus datos de forma inmediata o a largo plazo. Si los datos son procesados por Google entonces serán mostrados en los resultados de búsqueda.


Más ayuda

Se que es muy complicado encontrar el lugar correcto en la plantilla desde la edición html, sobre todo para las personas que no reconocen el código de Blogger o HTML, así que si tienes problemas para implementar las migas de pagan, déjame un comentario y yo te guiaré de forma personalizada.


Espero que este articulo les haya resultado útil para implementar esta característica en Blogger. Si te ha servido no olvides compartir para ayudar a más personas, además es algo que siempre agradezco ya que me ayuda mucho.