Como disponer de breadcum en los snippets de Google

Seguro que habréis visto en más de una ocasión como en los snippets de Google, la URL se transforma en una especie de breadcum que nos da más información y de una forma más clara que la tradicional cadena de letras a la que estamos acostumbrados.

Si queremos disponer de esta excelente forma de mostrar nuestra URL tendremos que hacer uso de los rich snippets que desde el 2009 Google puso de moda.

Para ello, como siempre, podemos hacerlo de dos maneras, RDFa o microdatos, ambos son totalmente válidos. Los ejemplos están echos con unas URLs genéricas, vosotros tendréis que sustituirlas por las vuestras

Generar breadcums por RDFa

Aquí tenéis un ejemplo básico de como generar los breadcums a partir de RDFa

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.ejemplo.com/vestidos" rel="v:url" property="v:title">
      Vestidos
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.ejemplo.com/vestidos/fiesta" rel="v:url" property="v:title">
      Vestidos de fiesta
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.ejemplo.com/vestidos/fiesta/verdes" rel="v:url" property="v:title">
      Vestidos de fiesta verdes
    </a> ›
   </span>
</div>

Generar breadcums por microdatos

Y aquí tenéis la otra posibilidad para generar nuestros breadcums en las URLs de los snippets de Google, gracias a los microdatos.

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.ejemplo.com/vestidos" itemprop="url">
    <span itemprop="title">Vestidos</span>
  </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.ejemplo.com/vestidos/fiesta" itemprop="url">
    <span itemprop="title">Vestidos de fiesta</span>
  </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.ejemplo.com/vestidos/fiesta/verdes" itemprop="url">
    <span itemprop="title">Vestidos de fiesta verdes</span>
  </a>
</div>

Si queréis más información acerca de estos rich snippets asociados al breadcum de la URL, os dejo este enlace a una página oficial de Google donde se explica más en detalle.