La Web semántica con Microdata

Name: HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)
Rating: 4 (1 reviews)

El estado actual de la Web semántica

HTML5 ha introducido una Web muy semántica, con el uso concreto de elementos que permiten estructurar nuestras páginas web. Por ejemplo, sabemos que el elemento <blockquote> indica que su contenido es una cita, que el elemento <address> especifica que el contenido esperado es una dirección, etc. Tenemos también todos los elementos de estructuración de la página que hemos estudiado anteriormente: <header>, <aside>, <main>, <footer>, etc. Pero estos elementos tienen una falta absoluta de concreción, como muestra el uso del elemento <p>, que es un párrafo de texto, pero eso es todo lo que sabemos. Nada nos indica de manera más concreta su contenido. ¿Es una receta de cocina?, ¿la ficha de lectura de un libro?, ¿la ayuda de un aparato eléctrico? No sabemos nada.

Tomemos un pequeño ejemplo concreto:

<p>Hola. Soy <strong>Christophe AUBRY.</strong> Vivo en la región 
de <em>Nantes</em> y escribo este libro para  
<strong>Ediciones ENI</strong></p>

Tenemos tres aspectos resaltados con los elementos <strong> y <em>. Pero no sabemos nada del contenido en sí mismo. Christophe AUBRY ¿es una persona?, ¿el nombre de una barrio? Nantes ¿es una película?, ¿una marca de teléfono?...

El objetivo de Microdata

1. La norma y los esquemas

Con la llegada de HTML5, Microdata permite agregar atributos para tener elementos perfectamente definidos desde un punto de vista semántico. De esta manera, los robots de los motores de búsqueda saben perfectamente el tipo de contenido de los elementos HTML utilizados en las páginas web.

Microdata es una especificación del W3C: https://www.w3.org/TR/microdata/ en estado W3C Editor’s Draft desde el 11 de junio de 2019 (en julio de 2020, en el momento de escribir este libro). Puede seguir su evolución en esta URL: https://html.spec.whatwg.org/multipage/microdata.html

El objetivo de Microdata es crear un vocabulario dedicado a la utilización de un tipo concreto de datos, como las personas, los eventos, los lugares, los productos, etc. Para definir este vocabulario, va a poder utilizar un esquema. Desde ahora, observe que hay numerosos vocabularios, esquemas ya disponibles en el sitio web de referencia en la materia: Schema.org (https://schema.org). En la página Schemas (https://schema.org/docs/schemas.html), puede utilizar esquemas ya creados y se puede inspirar en algunos esquemas parecidos a los que desea diseñar. Observe bien que la adición de atributos Microdata no tiene estrictamente ninguna influencia en los navegadores que no los interpretan. Estos atributos simplemente se ignorarán.

2. Los atributos

Microdata se utiliza con atributos que se colocan...

El esquema para las personas

1. Definir el uso de Microdata con itemscope

Vamos a abordar un primer ejemplo que trata de una persona con código HTML. A continuación se muestra el código utilizado en este ejemplo:

<p>Buenos días, soy <strong>Christophe AUBRY</strong>. Nací  
el 10 de julio de 1992 en Nantes. Trabajo de manera regular con  
<em>Jérôme HABILLAUT</em>, que es responsable editorial.</p>

Todo este contenido no es semánticamente concreto, más allá de los dos elementos <strong> y <em> que realmente no aportan concreción sobre su contenido. Por lo tanto, tenemos que utilizar Microdata para agregar más semántica a este código.

La primera etapa consiste en agregar el atributo itemscope al elemento padre; aquí, en el elemento <p>:

<p itemscope>Buenos días, soy <strong>Christophe AUBRY</strong>.  
Nací el 10 de julio de 1992 en Nantes. Trabajo de manera regular  
con <em>Jérôme HABILLAUT</em>, que es responsable editorial.</p>

De esta manera, todos los otros elementos incluidos en el elemento <p> heredarán del mismo esquema.

2. Indicar el esquema utilizado con itemtype

La segunda etapa define el esquema que se utiliza en el elemento. Hay que usar el atributo itemtype, cuyo valor es una URL en la que se describe...

Anidar esquemas

1. ¿Por qué anidar los esquemas?

Es habitual tener en el mismo elemento HTML varios tipos de datos semánticos diferentes.

En primer lugar, añadimos una pequeña frase al final del párrafo: «Trabajamos en el libro HTML5/CSS3 - Domine los estándares de la creación de los sitios web, publicado por Ediciones ENI».

<p itemscope itemtype="https://schema.org/Person">Buenos días, soy 
<strong><span itemprop="givenName">Christophe</span> <span item- 
prop="familyName">AUBRY</span></strong>. Nací el 
<time datetime="1992-07-10" itemprop="birthDate">10 de julio de 1992 
</time> en Nantes. Trabajo de manera regular con <em><span item- 
prop="givenName">Jérôme</span> <span itemprop="familyName"> 
HABILLAUT</span></em>, que es <span itemprop="hasOccupacion”> 
responsable editorial</span>. Trabajamos en el libro 
HTML5/CSS3 - Domine los estándares de la creación de los sitios web, 
publicado por Ediciones ENI ENI</p>

Con esta adición, ahora hay dos datos semánticos diferentes: personas y un libro. Por lo tanto, será necesario anidar dos esquemas. Siguiendo el mismo principio, podríamos agregar un tercer esquema para la ciudad que se menciona, Nantes.

Observe que de manera nativa los esquemas ofrecidos en el sitio web de Schema.org son anidados. Esta es la URL que muestra...