Etiquetado de datos estructurados en una página web con los microdatos de schema.org

Schema.org nace de la colaboración entre Google, Microsoft y Yahoo! para crear un marcado de datos soportado por la mayoría de los motores de búsqueda y que, así, puedan interpretar mejor el significado del contenido de la página web y puedan mostrar fragmentos enriquecidos para sus resultados (más información y mejor estructurada en los resultados de búsqueda).

¿Qué formas hay de marcar el contenido de un sitio web?

Google admite los microdatos, microformatos y RDFa para el marcado de datos estructurados, pero se está apostando por los microdatos de Schema.org, que permite disponer de un único formato para los distintos motores de búsqueda que se basan en datos.

¿Utilizar el esquema de schema.org mejorará el posicionamiento de un sitio web en Google?

En principio, Google sólo utiliza esta información para aportar más información de una página al mostrarse como resultado de una búsqueda. Pero, consecuentemente, al mostrar tu página de una forma más atractiva y llamativa, es fácil que consigas más visitas, lo que, con el tiempo, influirá en el posicionamiento de tu página.

¿Cómo puedo marcar mi sitio con este esquema?

Es fácil. Consiste en añadir etiquetas al contenido de tu web para informar a los motores de búsqueda y otras aplicaciones los distintos tipos de contenido que mostramos en la página: organizaciones, negocios locales, personas, productos, artículos, valoraciones, etc.

Lo primero que debemos entender son los atributos itemscope, itemtype y itemprop:
  • Itemscope: se pone en la etiqueta <div> que trata de un elemento en particular.
  • Itemtype: atributo que se coloca inmediatamente detrás de itemscope para indicar el tipo de elemento que es.
  • Itemprop: indica una propiedad del elemento que incluimos en la web. Cada tipo de elemento tendrá unas propiedades: un producto, por ejemplo, tendrá la propiedad 'precio' y una película tendrá la propiedad 'director'.

Vamos a ver un ejemplo completo de un fragmento de una web que habla de la película Avatar. En este fragmento html añadimos la información adicional de los microdatos:

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
   <span itemprop="director">James Cameron</span>
  (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html"
  itemprop="trailer">Trailer</a>
</div>
 
Como veis, es muy sencillo. Lo único que necesitamos es saber los distintos tipos de y propiedades que nos ofrece Schema.org. Os listamos los más usados son, con el enlace a toda su información:

Y aquí os dejamos un enlace al árbol completo de tipos de schema.org. Debe quedar claro que es muy importante elegir correctamente el tipo de elemento del que estamos hablando en nuestra web y que no es necesario marcar todas las propiedades que te ofrece el elemento. Eso sí, cuanto más contenido marques, mejor lo entenderán los motores de búsqueda.

No os perdáis nuestro próximo post, en el que hablaremos de las distintas herramientas que existen para ayudarnos a realizar el marcado de datos y para comprobar, posteriormente, si lo hemos realizado correctamente. ¡Son fundamentales cuando estás aprendiendo!