Rich Snippets. Introducción y ejemplo

Los "rich snippets" (fragmentos enriquecidos) son líneas de texto que aparecen debajo de cada resultado de búsqueda. La forma más clara de verlo, es con un ejemplo. Buscamos, por ejemplo, una receta (arroz con leche) y algunos de los resultados que aparecen son estos:

Uno de los resultados, el que está rodeado, vemos que tiene una línea en la que aparece la valoración de la receta, el número de opiniones y la duración de la misma. Esto es un fragmento enriquecido.

Para obtener un fragmento enriquecido debemos seguir estos pasos:

1. Elegir un formato de marcado:
• Microdatos
(recomendado por Google). A mí me ha parecido el más sencillo, ya que sólo tienes que añadir algunos atributos a las etiquetas html (normalmente, <span> o <div>).
• Microformatos.
• RDFa.
2. Marcar el contenido. Google ofrece fragmentos enriquecidos para estos tipos. Pero en schema.org, puedes encontrar muchos más y también son comprendidos por Google, entre otros buscadores.
3. Probar el marcado. Google ofrece una herramienta para probar tus fragmentos enriquecidos. De esta manera te puedes asegurar de que Google puede leer los datos marcados.

Si después de haber marcado tu sitio web y haber esperado algunas semanas, los fragmentos enriquecidos siguen sin aparecer en el buscador, puedes visitar este enlace.

PRUEBA - Persona (contacto)

Voy a hacer una prueba para el tipo de dato "persona" que ofrece Google, que puede tener las siguientes propiedades:

• name (nombre).
• LISA MARIE SIMPSON
• nickname (apodo).
• LISA
• photo (foto).
• http://mickydenys.galeon.com/images/dibu4.gif
• title (cargo de la persona).
• ESTUDIANTE
• role (función de la persona).
• url (enlace a una página web).
• http://www.thesimpsons.com/
• affiliation (nombre de una organización a la que está afiliada la persona).
• ESCUELA PRIMARIA DE SPRINGFIELD
• friend (identifica una relación social entre la persona descrita y otra).
• MILHOUSE
• contact (identifica una relación social entre la persona descrita y otra).
• acquaintance (identifica una relación social entre la persona descrita y otra).
• address (dirección de la persona).
• street-address
• EVERGREEN TERRACE, 742
• locality
• SPRINGFIELD
• region
• postal-code
• country-name
• USA

CÓDIGO

<div itemscope itemtype="http://data-vocabulary.org/Person">
  <img src="http://mickydenys.galeon.com/images/dibu4.gif" itemprop="photo" />
  Soy <span itemprop="name">Lisa Marie Simpson</span>, 
  pero todos me llaman <span itemprop="nickname">Lisa</span>.
  Esta es la web de mi familia: 
  <a href="http://www.thesimpsons.com/" itemprop="url">LOS SIMPSON</a>.
  Vivo en la calle 
  <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">Evergreen Terrace, 742</span> en
    <span itemprop="locality">Springfield</span>, 
    <span itemprop="country-name">USA</span> 
  </span>
    y soy <span itemprop="title">estudiante</span>
  en la <span itemprop="affiliation">Escuela Primaria de Springfield</span>
  Mi amigo es:
   <a href="http://www.milhouse.com" rel="friend">Milhouse</a>
</div>

En la primera línea encontramos los atributos "itemscope" e "itemtype", incluidos en el <div>. "itemscope" indica que el contenido del <div> describe un elemento y con "itemtype" definimos de qué tipo de elemento se trata, en este caso, una persona. En ese <div> se describen las propiedades de la persona, para ello, a los elementos que contengan alguna de esas propiedades se les añade la etiqueta "itemprop", indicando la propiedad correspondiente, por ejemplo: <span itemprop="title">.

Si nos fijamos en la descripción de la dirección, propiedad "address", vemos que se trata de otro elemento. Es decir, un elemento puede, a su vez, estar formado por otros elementos.

RESULTADO DE LA PRUEBA DEL MARCADO

Podemos ver que en la tercera línea salen algunos de los datos que habíamos indicado y así es como se mostraría el resultado en un buscador. También cabe destacar que no se muestran todos los datos que hemos etiquetado, como por ejemplo la foto. Supongo que el buscador determina, en función del tipo que hayamos elegido y de las propiedades que le hayamos indicado, los datos que muestra.