HTML: Microdatos

Los microdatos o datos estructurados son una forma estandarizada de proveer información semántica adicional a los elementos de un documento HTML. Se trata de un conjunto de atributos globales que ayudan a los buscadores (como Google o Bing) a entender el contenido de la página web.

Gracias a los microdatos es más fácil clasificar el contenido. Por ejemplo: en una página de libros es posible indicar el título, el autor, el año de edición o la categoría del libro; en una página de recetas se indican los ingredientes, el tiempo de cocción, la temperatura e incluso las calorías del plato.

El vocabulario de los microdatos

En la actualidad se recomienda definir los microdatos mediante el vocabulario de Schema.org. Existió otro vocabulario popular llamado «data-vocabulary.org» que quedó obsoleto en enero de 2021 por parte de las grandes compañías.

El vocabulario de Schema.org fue fundado por Google, Microsoft, Yahoo y Yandex, y es mantenido por la comunidad a través de Github. Este vocabulario cubre entidades, relaciones entre entidades y acciones, y puede ser fácilmente extendido. Google lo usa para mostrar resultados enriquecidos.

Un desarrollador podría crear su propio vocabulario, pero es más útil usar un vocabulario conocido, ya que esto garantiza el intercambio de datos. De hecho, esta es la principal razón de su existencia: permitir que varios consumidores (usuarios y robots) puedan usar estos datos de forma estándar.

Los formatos de Schema.org

El vocabulario de Schema.org puede ser introducido mediante tres formatos: JSON-LD, microdatos y RDFa. Estas son sus diferencias:

JSON-LD. Este formato es la opción más recomendada. Se trata de una notación de JavaScript que se introduce mediante el elemento <script>, ya sea en el encabezado o en el pie de página. En este caso, el lenguaje de marcado se separa de los elementos del contenido, lo que facilita el mantenimiento.

Microdatos. Los microdatos son una especificación de HTML que se utiliza para anidar datos estructurados dentro del contenido HTML. La definición se realiza mediante atributos sobre las etiquetas de apertura de los elementos HTML. Se trata de una opción igualmente válida y no requiere conocer JSON.

RDFa. Este formato funciona de forma muy similar a los microdatos, pues también se introduce mediante atributos sobre los elementos HTML. En ocasiones RDFa se usa en la cabecera de un documento HTML; por ejemplo, el protocolo Open Graph de Facebook está basado en RDFa.

Comparativamente, los microdatos sólo pueden ser usados en HTML5, mientras que RDFa puede ser usado en varias versiones de HTML y XML, incluso en SVG y MathML. Los microdatos son más fáciles de usar y son los más usados.

Sintaxis de los microdatos

Los microdatos consisten en grupos de parejas «nombre-valor». Los grupos son conocidos como ítems, y cada pareja «nombre-valor» es una propiedad. Los ítems y las propiedades se representan por elementos HTML.

Para crear un ítem se usa el atributo itemscope, y para añadir una propiedad a un ítem se usa el atributo itemprop sobre uno de los elementos hijos (descendiente). Con la propiedad itemtype se especifica la URL (de Schema.org) del vocabulario que será usado para definir las propiedades.

Ejemplo de código HTML de uso de microdatos:

<div itemscope itemtype="http://schema.org/Language">
 <p>Me gusta el <span itemprop="name">Francés</span>.</p>
</div>

<div itemscope>
 <p>Me gusta el <span itemprop="name">Alemán</span>.</p>
</div>

En este caso se ha definido un tipo de ítem que es un idioma, pero es posible definir muchos tipos y subtipos de objetos diferentes, como lugares, personas, eventos, libros, artículos, trabajos creativos, y un largo etcétera. A continuación se listan algunos de los vocabularios más usados.

  • Action
    • CreateAction
    • UpdateAction
  • BioChemEntity
    • ChemicalSubstance
    • Protein
  • CreativeWork
    • Article
    • Blog
    • Book
    • Code
    • Course
    • Diet
    • Episode
    • Game
    • Movie
  • Event
    • BusinessEvent
    • ComedyEvent
    • SocialEvent
  • Intangible
    • Brand
    • ComputerLanguage
    • Language
  • MedicalEntity
    • MedicalCondition
    • MedicalGuideline
  • Organization
    • Corporation
    • LocalBusiness
  • Person
    • Patient
  • Place
    • CivicStructure
    • Residence
    • TouristAttraction
  • Product
    • IndividualProduct
    • ProductCollection
    • ProductGroup
    • ProductModel
    • Vehicle
      • Car
      • Motorcycle
  • Taxon

Cada una de estos tipos de ítem tiene sus propiedades. Por ejemplo, el tipo de ítem Book tiene propiedades para definir el título del libro (name), el nombre del autor (author), el editor (editor), la editorial (bookEdition), el número ISBN del libro (isbn), el número de páginas (numberOfPages), etc.

Los atributos ‘itemref’ e ‘itemid’

Cuando las propiedades no son descendientes del elemento que lleva el atributo itemscope, se pueden asociar con el ítem usando el atributo itemref. Este atributo proporciona una lista de identificadores (id) de ítems, que deben estar separados por un espacio. Por tanto, el nombre de los identificadores coincidirá con el nombre del atributo id de los elementos a los que hace referencia.

Cambiando la estructura del ejemplo anterior:

<div itemscope itemref="val1 val2"></div>
<p id="val1">Idioma <span itemprop="name">Francés</span>.</p>
<p id="val2">Idioma <span itemprop="name">Alemán</span>.</p>

El nombre del atributo ya deja intuir su función: referenciar un ítem.

Por su parte, el atributo itemid se utiliza para proveer un identificador único y global para ser usado en un ítem. El atributo itemid sólo puede ser especificado en un elemento que tenga los atributos itemscope e itemtype. El valor del atributo itemid debe ser una URL o una URN.

En ocasiones, un ítem tiene información sobre un tema que tiene un identificador global. Los vocabularios (especificados a través del atributo itemtype) se pueden diseñar de manera que los elementos se asocien con su identificador global de forma única. Esto es posible con el atributo itemid.

Este sería el caso de la referencia ISBN de un libro. Por ejemplo:

<dl itemscope
    itemtype="https://example.com/book"
    itemid="urn:isbn:0-330-34032-8">
  <dt>Título:</dt>
  <dd itemprop="title">Universo</dd>
  <dt>Autor</dt>
  <dd itemprop="author">Hawking</dd>
</dl>

En este punto final del artículo es importante aclarar que el vocabulario de esta URL personalizada define que el atributo itemid toma una URN, es decir, una URL apuntando al código ISBN del libro.

← Artículo anterior
HTML: Estructura
Artículo siguiente →
HTML: Colores