¿Qué son los microdatos y cómo se usan los atributos itemscope, itemtype e itemprop?

Los microdatos en HTML son una especificación del W3C diseñada para permitirte incrustar información estructurada y semántica detallada directamente dentro de tu código HTML existente.

Actúan como una capa adicional de metadatos que añades a tu contenido visible, con el objetivo principal de ayudar a las máquinas —especialmente a los motores de búsqueda como Google, Bing, etc.— a comprender con mayor precisión el significado, el tipo y las propiedades específicas de la información que presentas en tus páginas web.

El beneficio más significativo de utilizar microdatos es la posibilidad de que los motores de búsqueda muestren «resultados enriquecidos» (conocidos como «rich snippets» o «rich results») para tus páginas.

Estos son los resultados de búsqueda que se destacan visualmente con información adicional, como valoraciones con estrellas para productos o reseñas, tiempos de preparación para recetas, fechas y lugares de eventos, precios de artículos, y mucho más.

Estos resultados enriquecidos pueden mejorar la visibilidad de tus páginas y aumentar la tasa de clics desde los motores de búsqueda.

Para implementar microdatos, te basarás en un conjunto de atributos HTML globales, siendo los tres principales:

1. itemscope:
   • Es un atributo booleano (simplemente se añade al elemento, no necesita un valor asignado explícitamente como itemscope="true").
   • Cuando se aplica a un elemento HTML (por ejemplo, un <div>, <article>, <span>), declara que ese elemento y todos sus descendientes contienen información sobre un «ítem» o entidad específica. Crea un nuevo ámbito para el ítem, y las propiedades definidas dentro de él se asociarán a este ítem.
2. itemtype:
   • Siempre se utiliza en conjunto con itemscope.
   • Su valor es una URL que especifica el tipo de ítem que se está describiendo, basándose en un vocabulario definido. El vocabulario más ampliamente reconocido y utilizado, y el recomendado por los principales motores de búsqueda, es Schema.org.
   • Ejemplos de itemtype usando Schema.org:
     • https://schema.org/Person (para describir a una persona)
     • https://schema.org/Product (para un producto)
     • https://schema.org/Event (para un evento)
     • https://schema.org/Recipe (para una receta)
     • https://schema.org/Review (para una reseña)
3. itemprop (item property):
   • Se utiliza dentro de un elemento que tiene itemscope para definir las propiedades específicas de ese ítem.
   • El contenido visible del elemento que lleva el atributo itemprop se considera el valor de esa propiedad. Para ciertos elementos, como <img>, <a>, o <meta>, el valor de la propiedad se toma de atributos como src, href, o content, respectivamente.
   • Los nombres de las propiedades (los valores de itemprop) también provienen del vocabulario especificado en itemtype. Por ejemplo, para un itemtype="http://schema.org/Person", algunas propiedades comunes de Schema.org son name, jobTitle, image, email, address, description, url, etc.
   • Es importante destacar que el valor de una propiedad (itemprop) puede ser, a su vez, otro ítem anidado con su propio itemscope e itemtype (por ejemplo, la propiedad address de una Person puede ser un ítem de tipo PostalAddress).

Ejemplo sencillo (describiendo una película):

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Inception</h1>
  <p>Dirigida por: <span itemprop="director" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Christopher Nolan</span></span></p>
  <p>Género: <span itemprop="genre">Ciencia ficción</span></p>
  <img itemprop="image" src="inception_poster.jpg" alt="Póster de la película Inception">
  <p>
    <span itemprop="description">Un ladrón que roba información infiltrándose en los sueños de sus víctimas, recibe la tarea inversa: plantar una idea en la mente de un objetivo.</span>
  </p>
  <div>
    Valoración:
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <span itemprop="ratingValue">8.8</span>/10 basado en 
      <span itemprop="ratingCount">2.1</span> millones de votos.
    </div>
  </div>
  <a itemprop="url" href="https://www.imdb.com/title/tt1375666/">Ver en IMDb</a>
</div>
Lenguaje del código: PHP (php)

Aunque otros formatos para datos estructurados como JSON-LD (que se puede incluir en un bloque <script> en el <head> o <body>) son también muy populares y, de hecho, el formato generalmente preferido por Google por su facilidad de implementación y mantenimiento, los microdatos siguen siendo una forma válida y completamente funcional de añadir esta rica capa semántica directamente en tu contenido HTML. La elección entre uno u otro puede depender de las preferencias del proyecto o de las herramientas que estés utilizando.