MICRODATA y MICROFORMATS EN HTML

aviso a google

¿Cuantos de vosotros utilizais los microformats y microdata a la hora de realizar una web para un cliente? Una de tantas recomendaciones que nos hace google para representar los datos de una persona en la web son los microdatas, esta manera de escribir html valido para google consiste en organizar los datos de la persona para que el buscador entienda esa información y sepa lo que estamos describiendo.

Un ejemplo muy práctico es la descripción de una persona, el nombre y nickname, la dirección y pagina web son algunos de los muchas propiedades que podemos describir con estos microformatos se pueden especificar muchas mas categorias, estas son algunas. Videos, productos, aplicaciones, música, Eventos, Recetas y alguna mas que me estoy dejando. Aquí esta toda la lista Microformatos

El itemtype para productos

<div itemscope itemtype="http://data-vocabulary.org/Product">

Un ejemplo de un producto básico quedaría así, le podemos añadir mas propiedades.


<div itemscope itemtype="http://data-vocabulary.org/Product">
 <span itemprop="brand">Nike</span> <span itemprop="name">Fusion 6</span>
 <img itemprop="image" src="logotipo.jpg" />

Este es el ejemplo que trae google para describir a una persona.


<div itemscope itemtype="http://data-vocabulary.org/Person"> <!-- Esta es la linea mas importante a la hora de construir una descripción -->
  My name is <span itemprop="name">Bob Smith</span>, 
  but people call me <span itemprop="nickname">Smithy</span>.
  Here is my homepage: 
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
  I live in 
  <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">Albuquerque</span>, 
    <span itemprop="region">NM</span> 
  </span>
  and work as an <span itemprop="title">engineer</span>
  at <span itemprop="affiliation">ACME Corp</span>.
  My friends:
  <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>, 
  <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

La primera linea es la mas importante, sino le decimos al buscador lo que estamos describiendo no estaremos haciendo nada porque no podrá identificar el elemento que queremos describir. También el W3c suele mostrar un error a la hora de validar nuestro código, nos dira que nuestros itemprop no tiene un itemtype valido y no lo reconoce.

Como vemos no es muy complicado y mucha gente se olvida de ellos.

Con esto estaremos contribuyendo a una web mas semántica e iremos por el buen camino para cumplir el estándar web.

Como siempre digo todo el mundo se puede equivocar y yo no iba a ser menos, por lo que si veis algún error en los comentarios me podéis corregir

Gracias por vuestro tiempo y espero que os haya gustado esta pequeña introducción a los microformatos

  • http:://www.calbertts.com Carlos Alberto Castaño García

    ¡Gracias por compartir!

    • http://www.webioss.com m_villagordo

      Espero que te sea de utilidad…

      Gracias por tu comentario!!