Migas de pan para Blogger: Breadcrumbs

El pequeño resumen que Google muestra sobre los distintos resultados de una búsqueda, es sin duda uno de los principales factores que ayuda a los usuarios a decidir si la página que el buscador les ofrece, contiene lo que están buscando o no.

Ese fragmento se genera mediante algoritmos internos de Google, pero podemos ayudar un poco a que en ese resumen aparezca adicionalmente algo significativo que nosotros elegimos. Serían las llamadas breadcrums o migas de pan. Esto se logra con microdatos estructurados (metadatos) o marcas RDFa.


Lo de que Google pone en el resumen lo que quiere, lo podéis comprobar fácilmente poniendo en su buscador algunas palabras clave del titulo de alguna entrada vuestra (que no sean muy comunes) y añadiendo alternativamente alguna palabra adicional que aparezca en ese mismo post.

Al igual que en el Pulgarcito de Perraut, el protagonista pretendía volver a su casa marcando el camino con migas de pan que dejaba caer, las breadcrums son como sendas de navegacion que indican dónde estamos y por dónde se llega allí. Un ejemplo para una entrada podría ser este:

Home > Trucos > Metadatos con schema.org para botón +1

Pues aparte de que el usuario tenga esa información a mano, lo que pretendemos con la instalación de un sistema de breadcrumbs, es que Google incluya esa información cuando nos muestre como resultado de búsqueda. El día que el santo buscador quiera, este saldría bajo el titulo:

Y aparecerán en Google si se han añadido y marcado como tales, pero sin garantía de que Google las incorpore. Lo que si está claro es que si no las incluimos, seguro que nunca saldrán, así que nosotros vamos a hacer lo necesario para que estos datos aparezcan bien marcados.


Para ello vamos a crear una serie de condiciones de manera que en cada tipo de página (entradas, home, navegación, archivo...) aparezcan los datos que nos interesan. Los únicos que marcaremos serán los de las entradas, pero para que los usuarios también se beneficien de estos caminos, haremos una estructura congruente en el resto de casos.


Tenemos que insertar dos trozos de código nuevos en nuestra plantilla, que serán por un lado la rutina o includable que es el que hace realmente el trabajo y un include o llamada al anterior. Este último lo pondremos dónde queremos que aparezca nuestro camino de migas.

Para ambos necesitamos marcar Expandir plantillas de artilugios y para el segundo, buscar <b:include data='top' name='status-message'/>. Suele haber dos líneas como esa en la plantilla. Como la primera es para la versión móvil, la que nos interesa es la segunda. Justo ANTES de ella insertamos la llamada:

<!-- Breadcrumb -->
<b:include data='posts' name='breadcrumb'/>

Y ahora la parte larga, el includable. Para saber el sitio dónde ubicar este, buscamos <b:includable id='main' var='top'>. Al igual que antes, puede que encontremos dos, pero si es así, nos quedamos con el segundo. También justo ANTES de esa línea, incorporamos esto otro:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <!-- Página estática -->
    <div class='breadcrumbs'>
      <span>Estás en <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span>
    </div>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- Entradas -->
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
          <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
            <span typeof='v:Breadcrumb'>Estás en: <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
            <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:label.isLast == &quot;true&quot;'>
              » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
              </b:if>
            </b:loop>
            » <span><data:post.title/></span>
          </div>
        <b:else/>
          <div class='breadcrumbs'>
            <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> »<span>Sin etiqueta</span> » <span><data:post.title/></span>
          </div>
        </b:if>
      </b:loop>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <!-- Archivo y resultados de búsqueda -->
        <div class='breadcrumbs'>
          <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archivos para <data:blog.pageName/></span>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <div class='breadcrumbs'>
            <b:if cond='data:blog.pageName == &quot;&quot;'>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Todas las entradas</span>
            <b:else/>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Entradas.  <data:blog.pageName/></span>
            </b:if>
          </div>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:if>
</b:includable>

Una vez hecho todo esto podéis probar el resultado en la herramienta que Google Webmasters Tools dispone para comprobar todas estas marcas.

El código y gran parte de esta explicación han sido obtenidos de Blogger Plugins, dónde podéis obtener alguna información mas. Eso sí, en inglés ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter