Microdata

Se tarda en leer ~2 minutos

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 atributos1 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 que 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
17
18
19
20
<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>,
    <span itemprop="addressRegion">Madrid</span>
    <span itemprop="postalCode">28412</span>
  </div>
  <span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"
style="display:none"><!--Esto no se muestra-->
    <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:

logo

Terrativa S. Coop. Mad.

Datos de contacto:
Pza. Mayor, 4. Despacho 11, Cerceda, Madrid 28412
Tel: 636 041 753

  1. En realidad proporciona 5, pero lo más común es usar sólo los 3 que se explican aquí. 

Comentarios


Reglas básicas para crear gráficos

varias normas para crear gráficos de calidad Seguir leyendo

Reproducibilidad (I)

Publicado el 30 de marzo de 2017

Excelencia gráfica

Publicado el 21 de febrero de 2017