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.
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.
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:
La integración de estos tres atributos en el código HTML se realiza según el siguiente esquema básico:
<div itemscope itemtype="http://schema.org/Typ">
<span itemprop="Propiedad">Item</span>
</div>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.
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:
<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:
<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.
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:
<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.
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:
<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:
<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:
<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:
<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>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:
<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:
<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.
En el mundo online, Bootstrap es una de las favoritas cuando se trata de elegir una solución de diseño responsivo para un proyecto web. Sin embargo, ¿qué es realmente Bootstrap? ¿Cómo funciona este framework de Twitter que fue pensado inicialmente como una herramienta de optimización interna? ¿Es posible que usuarios sin muchos conocimientos en programación le saquen el mayor provecho a este...
Recorrer el camino hacia la web 3.0 solo es posible con la ayuda de datos estructurados que faciliten la tarea de webcrawlers o screenreaders. Para llevarlo a cabo, los webmasters se encuentran a menudo con un mundo inabarcable de etiquetas que la iniciativa schema.org se ha propuesto simplificar. Schema.org surgió del interés de los gigantes Google, Microsoft, Yahoo y Yandex por mejorar la...
JSON-LD permite a los programadores integrar metadatos como un script separado del contenido web en el popular formato JSON. Esta separación de lenguaje HTML y marcado semántico asegura una mayor legibilidad del código fuente, así como también hace más cómodo el etiquetado de metadatos para contenidos dinámicos. Todo esto convierte al formato más actual de estructuración de datos en un competidor...
RDFa es un estándar recomendado por W3C para la incorporación de metadatos en HTML, HTML5, XHTML y dialectos XML y es considerado el fundamento de la web semántica. Gracias al proyecto schema.org, los webmasters disponen de un vocabulario estandarizado para la estructuración de datos. En este exhaustivo tutorial te mostramos cómo usar este lenguaje y cuáles son sus principales limitaciones.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver packs
