Acerca de los microdatos

La especificación HTML5 sobre microdatos es una forma de etiquetar contenido para describir un tipo específico de información (por ejemplo, opiniones, información sobre personas o eventos). Cada tipo de información describe un tipo de elemento específico como, por ejemplo, una persona, un evento o una opinión. Por ejemplo, un evento incluye las propiedades "venue", "starting time", "name" y "category".

Los microdatos utilizan atributos sencillos en las etiquetas HTML (normalmente <span> o <div>) para asignar nombres breves y descriptivos a elementos y propiedades. A continuación mostramos un ejemplo de un bloque HTML breve con la información de contacto básica de Roberto Sánchez.

<div> 
  Me llamo Roberto Sánchez, pero me llaman Rober. Esta es mi página web principal:
  <a href="http://www.example.com">www.example.com</a>
  Vivo en Alcobendas, Madrid, y trabajo de ingeniero en ACME Corp.
</div>

A continuación se indica el mismo código HTML marcado con microdatos:

<div itemscope itemtype="http://data-vocabulary.org/Persona"> 
  Me llamo <span itemprop="name">Roberto Sánchez</span>, pero me llaman <span itemprop="nickname">Rober</span>. 
  Esta es mi página web principal:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  Vivo en Alcobendas, Madrid, y trabajo de <span itemprop="title">ingeniero</span>
  en <span itemprop="affiliation">ACME Corp</span>.
</div>

A continuación se indica cómo funciona este ejemplo.

  • En la primera línea, itemscope indica que el contenido incluido en <div> es un elemento. itemtype="http://data-vocabulary.org/Person indica que el elemento es una persona.
  • Cada propiedad del elemento de persona se identifica con el atributo itemprop. Por ejemplo, el atributo itemprop="name" especifica el nombre de la persona.

Entidades anidadas

En el ejemplo anterior se muestra la información de contacto de Roberto Sánchez, pero no se incluye su dirección. En el ejemplo que aparece a continuación, se muestra el mismo código HTML, pero, en esta ocasión, se incluye la propiedad address.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   Me llamo <span itemprop="name">Roberto Sánchez</span>, 
   pero me llaman <span itemprop="nickname">Rober</span>.
   Esta es mi página web principal: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Vivo en
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="locality">Alcobendas</span>, 
      <span itemprop="region">Madrid</span>, 
   </span>
   y trabajo de <span itemprop="title">ingeniero</span>
   en <span itemprop="affiliation">ACME Corp</span>.
</div>

A continuación, te explicamos cómo funciona este ejemplo:

  • La propiedad address es en sí misma un elemento que incluye su propio conjunto de propiedades. Esto se indica asignando el atributo itemscope en el elemento que declara la propiedad address y usando el atributo itemtype para especificar el tipo de elemento que se describe de esta manera: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Para ver más ejemplos, consulta Elementos anidados.

Elementos de referencia

Puedes definir un elemento en una ubicación y, a continuación, hacer referencia a este desde una o varias ubicaciones distintas. En el siguiente ejemplo se describe una dirección y, a continuación, se hace mención a dos personas (Roberto y Alicia Sánchez), que viven en esa dirección.

<div id="smith-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
   <span itemprop="locality">Alcobendas</span>, 
   <span itemprop="region">Madrid</span> 
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="smith-address">
   Me llamo <span itemprop="name">Roberto Sánchez</span>, 
   pero me llaman <span itemprop="nickname">Rober</span>.
   Esta es mi página web principal: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Trabajo de <span itemprop="title">ingeniero</span>
   en <span itemprop="affiliation">ACME Corp</span>.
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="smith-address">
   Me llamo <span itemprop="name">Alicia Sánchez</span>.
</div>

A continuación, te explicamos cómo funciona este ejemplo:

  • El código HTML define el elemento address, que incluye un atributo id de esta forma: <div id="smith-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
  • Los elementos person para Roberto y Alicia Sánchez hacen referencia a la dirección incluyendo un atributo itemref y especificando el identificador de la dirección de la siguiente manera: <div itemscope itemtype="http://data-vocabulary.org/Person" itemref="smith-address">.

Información sobre fechas y horas

Para especificar fechas y horas de forma inequívoca, utiliza el elemento time con el atributo datetime. En el ejemplo que se muestra a continuación, la propiedad startDate indica la fecha de inicio de un evento. El valor del atributo datetime se especifica mediante el formato de fecha ISO. El uso de este formato permite facilitar a los motores de búsqueda una fecha, una hora y, si quieres, una zona horaria de forma detallada en formato ISO ("2009-10-15T19:00-08:00") mientras se muestra la fecha en tu página de forma comprensible para el usuario ("15 de octubre 2009, 7 p. m.").

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15 October 2009, 7 p. m.</time>

Contenido no visible

Generalmente, Google no muestra contenido invisible para los usuarios. Por ello, te recomendamos que no muestres contenido a los usuarios de una manera y que utilices texto oculto para marcar la información de forma independiente para los motores de búsqueda y para las aplicaciones web. Debes marcar el texto que se muestra realmente a los usuarios cuando estos acceden a tus páginas web.

Existen algunas excepciones para esta norma. En algunos casos, puede resultar valioso proporcionar información más detallada a los motores de búsqueda, aunque no desees que esa información esté disponible para los usuarios que accedan a tu página. Por ejemplo, si un restaurante tiene una puntuación de 8,5, los usuarios (no los motores de búsqueda) asumirán que la puntuación está basada en una escala del 1 al 10. En este caso, puedes indicar esa información con el elemento meta, como se indica a continuación:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   Puntuación: <span itemprop="value">8,5</span>
   <meta itemprop="best" content="10" />
</div>

A continuación, te explicamos cómo funciona este ejemplo:

  • La etiqueta meta se usa para especificar información adicional que no es visible en la página; en este caso, el hecho de que la mejor puntuación posible es 10. El valor de la propiedad se especifica con el atributo content.

Del mismo modo, si se especifica la duración de un evento en el formato de duración ISO, esta podrá aparecer correctamente en los resultados de búsqueda, como se indica a continuación.

Duración: 
<span>1 hora y 30 minutos<meta itemprop="duration" content="PT1H30M" />
</span>

A continuación, te explicamos cómo funciona este ejemplo:

  • Usa la etiqueta meta para especificar el valor de la propiedad (en este caso, la duración). Esto te permite usar el valor del atributo content ("PT1H30M") para especificar la duración en el formato de duración ISO 8601 mientras se muestra la duración de forma comprensible para el usuario ("1 hora y 30 minutos") en la página.
  • Nos fijamos en el elemento principal del elemento meta para saber qué información se representa de otro modo en la etiqueta meta. Por ello, es importante asegurarse de que el nodo principal inmediato de la etiqueta meta se sitúe en el texto "1 hora y 30 minutos".

Si quieres ver ejemplos y vocabulario específicos, consulta:

Para comprobar el marcado, usa la herramienta de pruebas de datos estructurados.