Microdata

Los microdatos (Microdata) sirven para que robots como Google entiendan mejor el contenido de una página, indicándoles por ejemplo qué parte de la web son los datos de contacto, cuál es un producto o una oferta o dónde se hace referencia a una persona.

Microdata está incluido dentro de las especificaciones de HTML5 y proporciona una forma estándar de añadir a las páginas web un marcado semántico orientado a los ordenadores.

Aunque la forma de definir estos microdatos es estándar, los vocabularios que se pueden usar no lo son, y hay distintas entidades que proporcionan un conjunto de propiedades que se pueden utilizar para definir las partes de nuestra web. Uno de los vocabularios más usados es el definido por schema.org.

¿Cómo se usan?

Microdata nos proporciona 3 atributos¹ que se pueden añadir a cualquier etiqueta HTML5 (y sólo a las etiquetas HTML: no sirve de nada añadirlas, por ejemplo, a una etiqueta de SVG):

• Itemscope. Indica que el elemento es de tipo microdata.
• Itemtype. Indica el vocabulario que se va a usar. Su valor es la URL de un vocabulario, que describe de qué clase de elemento se trata, por ejemplo, una organización.
• Itemprop. Este atributo, siempre debe tener un valor, e indica la información específica de cada elemento, por ejemplo nombre, logo, etc.

Los microdatos consisten en grupos de parejas nombre-valor. Estos grupos se llaman items y se definen con el atributo itemscope y cada pareja nombre-valor se llama propiedad y se define con el atributo itemprop.

Ejemplo

Un ejemplo, mejorando la información de la típica página de contacto:

Código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div itemscope itemtype="http:/schema.org/Organization">
  <img itemprop="logo" src="images/logo_terrativa.jpg" alt="logo" />
  <h2 itemprop="name">Terrativa S. Coop. Mad.</h2>
Datos de contacto:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Pza. Mayor, 4. Despacho 11</span>,
    <span itemprop="addressLocality">Cerceda</span>,
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="latitude"></span>
    <span itemprop="longitude"></span>
  </span>
  Tel: <span itemprop="telephone">636 041 753</span>
  <div>
    <a href="http://terrativa.net" itemprop="url"> http://terrativa.net</a>
  </div>
</div>

Todo el div se define como un item de microdata usando el atributo itemscope y con itemtype se establece el tipo de item que va a ser (Organización, usando el vocabulario de schema.org). Dentro de la organización nos encontramos las distintas propiedades, definidas con itemprop. A su vez una propiedad se puede definir como un item y contener otras propiedades, como sucede con el caso de address.

• name: Terrativa S. Coop. Mad.
• adress:
  • street-address: Pza. Mayor, 4. Despacho 11
  • locality: Cerceda
  • region: Madrid
  • postal-code: 28412
• geo:
  • latitude:
  • longitude:
• telephone: 636 041 753
• url: http://terrativa.net

Resultado:

Terrativa S. Coop. Mad.

Datos de contacto:

Pza. Mayor, 4. Despacho 11, Cerceda, Madrid 28412

Tel: 636 041 753

http://terrativa.net