Cómo marcar con microdatos según schema.org

Como propiedades del etiquetado con HTML5, los metadatos conforman una metasintaxis para el etiquetado de datos estructurados, que permite a los desarrolladores web enriquecer sus contenidos con metainformación que los hace comprensible a las máquinas.

Interpretados por crawlers o navegadores, estos metadatos constituyen el fundamento de formas ampliadas de representación de los contenidos de las páginas web o de su tratamiento por parte de programas de interpretación como los lectores de pantalla. Los datos estructurados son también relevantes para la optimización en buscadores, ya que la anotación semántica facilita la indexación de páginas web y permite enriquecer los resultados de las búsquedas con información adicional. Para la estructuración de datos, los microdatos se apoyan en un vocabulario estandarizado según schema.org.

En principio, es posible integrar metadatos mediante atributos de microdatos en todos los tags de HTML. Los siguientes ejemplos muestran una incorporación de metadatos en elementos div- y span-, hipervínculos, gráficas y elementos de listado.

En la línea 01 se abre un nuevo elemento div- que abarca tanto el URL en la línea 02 como el código HTML de la imagen en la línea 03. Esta etiqueta div-, en sí tan poco específica, es marcada mediante el atributo itemscope como elemento portador de información. El atributo itemtype hace referencia al esquema “Organization” según el estándar schema.org, que define todo el fragmento. Es así como se informa al crawler de que todos los datos comprendidos en la etiqueta div- contienen información sobre una empresa.

Por su parte, el itemtype se define con las propiedades “url” y “logo” y sus correspondientes valores. Así, el robot del buscador identifica la imagen como logo de la empresa y establece una relación con la página principal de la misma. Algunos buscadores, como Google, usan los elementos gráficos marcados de esta manera para la creación de, por ejemplo, knowledge graphs o gráficos de conocimiento (generalmente a la derecha de la lista de los resultados de una búsqueda).

Este sería el etiquetado del logo de una marca según schema.org:

En este ejemplo, el elemento dentro de itemscope está marcado como “Brand” según el vocabulario de schema.org. Como propiedades, se proporcionan el nombre de la marca y el logo, incluido el lugar de su almacenamiento.

En la línea de código 01 el atributo itemtype define el elemento incluido en la etiqueta div- desde la línea 01 hasta la 13 como “Organization” siguiendo a schema.org. Este esquema es definido mediante el atributo itemprop con las propiedades “name” (nombre), “address” (dirección), “telephone” (número de teléfono), “faxNumber” (número de fax), “email” (correo electrónico) y  sus respectivos valores.

En la línea 04 sucede algo diferente. Según la sintaxis de microdatos, el valor de una propiedad también puede convertirse en esquema. Según esto, los datos que siguen a “Main Address” (dirección principal) se derivan en un nuevo elemento div- con un itemscope propio y definido como un itemtype “PostalAddress” (dirección postal), según marca schema.org. Mediante las características (itemprop) “streetAddress” (calle), “postalCode” (código postal) y “addressLocality” (localidad) se define a este tipo en detalle.

El atributo itemtype en la línea 01 se refiere al esquema “Hotel”, definido por las propiedades (itemprop) “name”, “description” e “image”, con sus respectivos valores (líneas 02-04).

A esta estructura básica se le puede añadir la información que se desee mediante itemprops o itemscopes incrustados. Aquí hay que tener en cuenta que los elementos div- incrustados dentro de una etiqueta div- se han de colocar bajo los itemscopes a los cuales estén subordinados. El siguiente ejemplo amplía la anotación semántica para esta oferta turística con información sobre el precio:

La línea 01 introduce la característica “makesOffers” (hace ofertas), definida como el esquema “Offer” (oferta). Propio de las ofertas es que tengan un precio: la línea 02 define esta propiedad con el itemprop “price” (precio) y le otorga el valor de “400 euros”.

De esta manera, es posible también añadir información sobre las modalidades de pago (itemprop="paymentAccepted"), la localización geográfica (itemprop="map") o los comentarios de clientes (itemprop="reviews"). Integrado en la anterior estructura básica, se obtiene el siguiente marcado:

En la línea 01 se define el esquema válido para todos los datos siguientes, hasta la línea 15, como “Hotel”. A él le siguen las propiedades del elemento hotel: nombre, descripción y foto (líneas 02-04). Entre las líneas 05 y 07 se marca el precio de la oferta mediante el atributo subordinado itemscope “Offer” (oferta). Le siguen (líneas 08 y 09) las propiedades subordinadas a “Hotel”, que definen los modos de pago y la localización. Entre las líneas 10 y 15 se define un tipo nuevo asignando propiedades a “Review”: título, datos sobre el autor, texto y fecha de publicación.

Si se quiere añadir un sistema de estrellas a esta valoración, lo que resulta muy visual y apropiado para los rich snippets, Google propone el siguiente marcado:

El ejemplo muestra un elemento de lista (<ol>, ordered list) que contiene los enlaces (<li>) a las diferentes subpáginas de una página web. Para que los crawlers puedan interpretar esta estructura de navegación y mostrarla como recorrido de migas de pan en el buscador, puede usarse el siguiente marcado:

El elemento de lista <ol> se define como esquema mediante el atributo itemscope y es definido vía itemtype como un esquema de “BreadcrumbList” (schema.org). Para cada “miga de pan” dentro de la línea de navegación se genera un itemscope con el itemtype “ListItem”. A cada uno de estos se les otorgan las propiedades “name”, “item” y “position”, los cuales contienen los valores para el nombre, el URL y la posición de una miga de pan dentro de la línea de navegación de forma que las máquinas puedan interpretarlo.