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.
Microdatos frente a otros formatos de marcado
Mientras que la comunidad online entiende de forma unánime que el lenguaje HTML ha de ser más semántico, aún no está claro cuál será el formato para el marcado de metadatos que lo hará posible. Los microdatos fueron introducidos como un módulo aislado de HTML5, como alternativa iniciada por el WHATWG (Web Hypertext Application Technology Working Group) al entonces estándar RDFa, recomendado por W3C para la estructuración de datos en HTML y XHTML. El objetivo era facilitar la sintaxis sin mermar la funcionalidad con la ventaja, además, de estar más cerca de la versión más actual de HTML. Los microdatos ganaron relevancia gracias al proyecto schema.org, iniciativa común de los cuatro grandes buscadores Google, Bing, Yahoo y Yandex que, partiendo del marcado con microdatos, propone un vocabulario estándar para el etiquetado semántico. Sin embargo, si durante mucho tiempo este formato fue el recomendado por Google, hoy pierde lentamente su posición frente a otros formatos más actuales como JSON-LD, aunque sigue estando en uso. Además de microdatos, schema.org soporta RDFa y el mencionado JSON-LD, formato de marcado basado en Java que gana en importancia, a pesar de no ser soportado por Google para todos los tipos de datos.
Sintaxis de los microdatos
El principio fundamental de la sintaxis de los microdatos se basa en los pares nombre-valor. Su funcionamiento es sencillo: en primer lugar se delimita un elemento. Este elemento se define mediante un tipo o esquema determinado procedente del repertorio de schema.org. Una vez definido el tipo, se le proporcionan características (properties) mediante atributos HTML5. Las etiquetas implicadas en este proceso son los atributos HTML5 itemscope, itemtype e itemprop:
- Itemscope: se usa dentro de una etiqueta div- para delimitar un fragmento determinado como elemento, que será definido más detalladamente mediante itemtype e itemprop.
- Itemtype: este atributo se aplica a todos los elementos marcados con el atributo itemscope. Sirve para hacer referencia a un esquema previamente definido y así es como se pueden subordinar elementos relevantes de una página web a tipos estándar de schema.org para que puedan ser procesados por los buscadores más habituales.
- Itemprop: este atributo define una propiedad de un itemtype. Las propiedades que pertenecen a cada tipo están estandarizadas y dispuestas en el vocabulario de schema.org en su página homónima.
La integración de estos tres atributos en el código HTML se realiza según el siguiente esquema básico:
Esquema básico del marcado con microdatos para un elemento:
<div itemscope itemtype="http://schema.org/Typ">
<span itemprop="Propiedad">Item</span>
</div>El marcado con microdatos en la práctica
Como otros formatos para el etiquetado semántico de documentos HTML, este también se basa en una serie de etiquetas clásicas de HTML, aunque los atributos de microdatos son fundamentalmente independientes de las etiquetas HTML. Por eso, como elementos portadores de atributos de microdatos, los más indicados son etiquetas como <div> o <span>, que no poseen ningún significado propio.
| <div></div> | El elemento div- define un fragmento determinado en una nueva línea del texto. Por regla general, esta etiqueta delimita al principio y al final a un atributo itemscope. |
| <span></span> | El elemento span- define un fragmento en la línea sin influir en su representación en el navegador. Se usa para el atributo itemprop. |
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.
Integrar gráficas con microdatos
Un ámbito muy típico de aplicación de la anotación semántica de contenidos web es el de la integración de logos corporativos. Identificados como tal por los usuarios a primera vista, los crawlers dependen de los microdatos para comprender el significado de este elemento:
Marcado de un logo corporativo:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.miempresa.es/">Paginaprincipal</a>
<img itemprop="logo" src="http://www.miempresa.es/logo.png"/>
</div>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:
Marcado del logo de una marca:
<div itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Nombre de la marca</span>
<img itemprop="logo" src="http://www.mimarca.es/logo.png" />
</div>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.
Marcar datos de contacto con microdatos
Junto a las imágenes, la estructuración de los datos de contacto con microdatos es de especial importancia para las empresas, ya que constituye la base para una representación de snippets enriquecidos en la lista de resultados en la forma de sitelinks o knowledge graphs. Te mostramos, a continuación, cómo estructurar la información de contacto mediante microdatos con un ejemplo de schema.org:
Marcado de los datos de contacto de Google:
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Google.org (GOOG)</span>
Contact Details:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Main address:
<span itemprop="streetAddress">38 avenue de l'Opera</span>
<span itemprop="postalCode">F-75002</span>
<span itemprop="addressLocality">Paris, France</span>
</div>
Tel: <span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
Fax: <span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
E-mail: <span itemprop="email">secretariat(at)google.org</span>
</div>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.
Marcar contenidos para su representación en rich snippets
El marcado semántico de los contenidos de una web es de crucial importancia para que esta aparezca en la lista de resultados de los buscadores mayoritarios como un rich snippet o snippet enriquecido. Para proporcionar al usuario la mayor cantidad posible de información ajustada a su búsqueda, los robots de Google y de los demás buscadores tienen la capacidad de añadir datos adicionales a los snippets, como información sobre un producto, recetas, valoraciones y comentarios de otros usuarios, eventos, aplicaciones de software, vídeos o noticias si estos contenidos fueron adecuadamente optimizados. En el siguiente ejemplo usamos una oferta de hotel ficticia para exponer cómo se puede mostrar esta información usando los microdatos de schema.org.
En una oferta turística de una agencia de viajes online figuran, por regla general, el nombre del hotel, una breve descripción y una imagen. Si etiquetamos esta información con microdatos siguiendo a schema.org, el código HTML de esta oferta tendría este aspecto:
Marcado de información básica en una oferta turística:
<div itemscope itemtype="http://schema.org/Hotel">
<span itemprop="name">Nombre del hotel</span>
<span itemprop="description">Descripción del hotel</span>
<img itemprop="image" src="http://Images/hotel.jpg" />
</div>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:
Marcado de los precios:
<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">400 euros</span>
</div>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:
Marcado completo de una oferta turística:
<div itemscope itemtype="http://schema.org/Hotel">
<span itemprop="name">Nombre del hotel</span>
<span itemprop="description">Descripción del hotel</span>
<img itemprop="image" src="http://Images/hotel.jpg" />
<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">400 euros</span>
</div>
<span itemprop="paymentAccepted">Transferencia, tarjeta de crédito, etc.</span>
<span itemprop="map">URL del mapa</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Título de la valoración</span>
<span itemprop="author">Autor</span>
<span itemprop="reviewBody">Texto de la valoración</span>
<span itemprop="datePublished">Fecha de la valoración</span>
</div>
</div>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:
Marcado para una valoración de cliente con puntuación:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
<span itemprop="name">Nombre del hotel</span>
</div>
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">4</span>
</span> stars -
<b>"<span itemprop="name">Título de la valoración</span>"</b>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Autor</span>
</span>
<span itemprop="reviewBody">Texto</span>
</div>Breadcrumbs con microdatos
Las denominadas “migas de pan” constituyen una modalidad más para aumentar el poder visual de un snippet. Esta denominación define la línea de navegación de una página web, la cual proporciona al usuario la posibilidad de situar el resultado en su posición exacta dentro de una página web, lo que facilita su posterior localización. El siguiente código muestra un ejemplo típico de integración de un recorrido de migas de pan en HTML:
Marcado en HTML de un recorrido de migas de pan
<ol>
<li>
<a href="http://www.agencia.es/hoteles">Hoteles</a>
</li>
<li>
<a href="http://www.agencia.es/hoteles/alemania/">Hoteles en Alemania</a>
</li>
<li>
<a href="http://www.agencia.es/hoteles/alemania/berlin/">Hoteles en Berlín</a>
</li>
<ol>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:
Marcado de migas de pan con microdatos según schema.org
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www. agencia.es/hoteles/">
<span itemprop="name">Hoteles</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.agencia.es/hoteles/alemania/">
<span itemprop="name">Hoteles en Alemania</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://www.agencia.es/hoteles/alemania/berlin/">
<span itemprop="name">Hoteles en Berlín</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>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.