Microformatos en la Web

Desde hace algunos años atrás ya que está escuchando el concepto de Web Semántica, sin embargo es un tema que no acaba de arrancar, aunque pequeños pasos sí que se están dando al respecto, uno de ellos es la utilización de microformatos en nuestra web.

Los microformatos son entidades que se utilizan para describir una determinada información, por ejemplo:

·         Persona (http://schema.org/Person)

·         Lugar (http://schema.org/Place)

·         Organización/Empresa (http://schema.org/Organization)

·         Evento (http://schema.org/Event)

·         Oferta (http://schema.org/Offer)

·         Comentario/Opinión (http://schema.org/Review )

Cada una de éstas entidades tienen propiedades, por ejemplo ésta última entidad (Comentario) tiene las siguientes propiedades: título o nombre del comentario, autor, día de la publicación, valoración del objeto (establecimiento, producto, ect.) al que se le está haciendo el comentario, descripción, entre otros.

Los microformatos se utilizan dentro de etiquetas html como <span>, <div>, <meta> y dentro de ellos se especifica la propiedad del elemento, utilizando el itemprop=" " y antes de  utilizarlos se debe especificar en un <div> principal (por ejemplo) el tipo de entidad a la que se está haciendo referencia. Siguiendo el ejemplo de la  entidad Comentario, veamos cómo quedarían sus propiedades:

1.     Especificar la entidad, utilizando el div principal:
<div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review">

2.     Título o tema del que se está hablando:
<span itemprop="itemreviewed">Comentario acerca de...</span>

3.     Autor del comentario:
Comentario de <span itemprop="reviewer">Irina Argota</span>

4.     Fecha del comentario:
<time itemprop="dtreviewed" datetime="2012-11-28">28/12/2012</time>

5.     Descripción del comentario:
<span itemprop="description">Este es mi comentario...</span>

6.     Valoración/Puntuación del comentario:   

Valoración: <span itemprop="rating">90</span>

7.     Mayor Valoración/Puntuación del comentario:
<span itemprop="best">100</span>
  </div>

Para nuestro  ejemplo, hemos utilizado un determinado microformato, sin embargo otros también pueden ser utilizados:

<div> itemprop="review" itemscope itemtype="http://schema.org/Review"><meta itemprop="name" content="Comentario de Irina"/><div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content = "1"/><span itemprop="ratingValue">5</span>/<span itemprop="bestRating">5</span>sonrisas</div><p><time itemprop="datePublished"  datetime="2012-11-28">28/11/2012</time><br/><span itemprop="author" class="usuario">Irina</span></p><p itemprop="description" class="comentario">Este es mi Comentario...</p></div>

Para comprobar si estamos utilizando los microformatos correctamente se recomienda utilizar la herramienta de Google para Webmasters “Rich Snippets Testing Tools” donde se puede incluir un código o directamente una página web. Si comprobamos mi primer código, veremos que cómo resultados obtendremos lo que se muestra en la imagen siguiente:

Por el contrario, si probamos con una página web que tenga comentarios: http://www.turispain.com/casas-rurales/huesca/lacasadelarcoverde podremos observar los resultados. En este caso, la web escogida (Turispain.com) tiene una serie de microformatos incorporados que proporcionan significado semántico a su contenido, lo que ayuda a que los buscadores o cualquier herramienta ratreadora de código sepa distinguir la naturaleza de un contenido.

Google mostrará los resultados de los microformatos en sus resultados de búsqueda de la siguiente forma:

A continuación veremos otro ejemplo de uso de microformatos, que podemos probar utilizando la herramienta de Google para webmasters.

<article itemscope itemtype="http://schema.org/LodgingBusiness">           

<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">           

          <meta itemprop="latitude" content=" 41.6568307" />
           <meta itemprop="longitude" content=" -0.8799101" />

</div>
<figure itemscope itemtype="http://schema.org/ImageObject">           

         <img itemprop="image" src="http://" width="280px" height="229px" alt="Foto"  title="Foto"/>       

</figure>

       <h2 itemprop="name">Mi Empresa</h2>        
       <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">            
             <span itemprop="addressLocality" >Zaragoza</span>, 
             <span itemprop="addressRegion">Zaragoza</span><br/>            
             <span itemprop="streetAddress" >C/Sin Nombre </span>
             <span itemprop="postalCode" >50015</span>        
       </address>        
       <li itemprop="aggregateRating" itemscope itemtype="http://schema.org      /AggregateRating">                        
               <span>Comentarios (<small itemprop="reviewCount">10</small>)</span>            
               <meta itemprop="ratingValue" content="4">
        </li>        
        <div>Precio<br/>                       
              <span itemprop="priceRange">17</span>&euro;</span>        
        </div>
 </article> 

Finalmente, quisiera hacer un breve comentario sobre éste tema, el hecho que utilicemos muchos microformatos no significa que posicionaremos nuestra web en los primeros resultados de Google, ya que ésto llega un mayor trabajo de SEO y SEM, pero sí garantizará que al realizar búsquedas tu web aparezca como resultado relevante diferenciándose de otras web que no le dan un significado semántico a su contenido. Los microformatos se deben utilizar coherentemente, no se trata de poner por poner, si no que hay que saber cuándo y cómo ponerlos, de ahí la necesidad de su comprensión, sugiero que revicen éstas páginas antes de lanzarse a ponerlos: http://schema.org y http://support.google.com/webmasters/bin/answer.py?hl=es&answer=146897&topic=1088472&ctx=topic y esté siempre pendiente de los cambios que puedan surgir sobre éste tema.