Microdatos, HTML5 y SEO

Microdatos HTML y SEO

¿Qué son los microdatos?

Los Microdatos giran en torno a un vocabulario personalizado. Piensa en "el conjunto de todos los elementos de HTML5" como un vocabulario. Este vocabulario incluye elementos para representar una sección o un artículo, pero no incluye elementos para representar una persona o un evento. Si quieres representar a una persona en una página web, tendrás que definir tu propio vocabulario. Los microdatos te permiten hacer esto. Cualquiera puede definir un vocabulario de microdatos y empezar a incorporar propiedades personalizadas en sus páginas web.

Lo siguiente que has de saber acerca de los microdatos es que trabaja con el par "nombre=valor". Cada vocabulario de microdatos define un conjunto de propiedades con nombre. Por ejemplo, el vocabulario persona podría definir propiedades como el nombre y la foto.

Junto a las propiedades con nombre, los microdatos dependen en gran medida del concepto de "scoping" (alcance). La forma más sencilla de pensar sobre el alcance de los microdatos es pensar en la relación natural entre los elementos padres e hijos del DOM. El elemento <html> por lo general contiene dos hijos, <head> y <body>. El elemento <body> por lo general contiene varios hijos, cada uno de los cuales puede tener elementos secundarios. Por ejemplo, tu página podría incluir un elemento <h1> dentro de un elemento <hgroup> a su vez dentro del <body>. Una tabla de datos puede contener <td> dentro de <tr> dentro de <table> (y finalmente todo dentro de <body>). Los microdatos reutilizan la estructura jerárquica del DOM para proporcionar una forma de decir "todas las propiedades de este elemento se han tomado de este vocabulario." Esto te permite utilizar más de un vocabulario de microdatos en la misma página. Incluso puedes anidar dentro de un vocabulario de microdatos otros vocabularios, reutilizando así la estructura natural del DOM.

Los Microdatos tratan de aplicar semántica adicional a los datos que ya están visible en tu página web. Los Microdatos no están diseñados para ser un formato de datos independiente. Es un complemento del HTML. Como veremos en la siguiente sección, los microdatos funcionan mejor cuando tu ya estás usando HTML de forma semánticamente correcta. El vocabulario HTML no es lo suficientemente expresivo y los Microdatos son ideales para afinar la semántica de los datos que ya están en el DOM.

Añadir Microdatos a tu página web

Añadir microdatos a tu página es sólo cuestión de añadir algunos atributos a los elementos HTML que ya tienes. Lo primero que has de hacer es declarar que vocabulario de microdatos vas a utilizar, mediante la adición de un atributo itemtype. La segunda cosa es declarar el alcance del vocabulario, utilizando un atributo itemscope. En el siguiente ejemplo, todos los datos que queremos hacer semánticos están en un elemento <section>, así que vamos a declarar el atributo itemtype e itemscope en el elemento <section>:

<section itemscope itemtype="http://schema.org/Person">

Teniendo el siguiente código:


<section>
	<h1>Roxana Falasco</h1>
	<p><img src="http://www.falasco.org/photo.jpg" alt="Roxana Falasco"></p>
	<p><a href="http://falasco.org/">Mi web</a></p>
</section>

El nombre es el primer dato dentro del elemento <section>. Está envuelto en un elemento h1. El elemento h1 no tiene ningún tratamiento especial en el modelo de datos de HTML5 microdatos, por lo que recae bajo la regla de "todos los demás elementos" que es cuando el valor de la propiedad de microdatos es simplemente el contenido de texto de un elemento. (Funcionaría igual de bien si tu nombre está envuelto en una etiqueta <p>, <div>, o <span>.)

<h1 itemprop="name">Roxana Falasco</h1>

En lenguaje coloquial, esto dice "aquí está la propiedad nombre, del vocabulario: http://schema.org/Person y el valor de la propiedad es Roxana Falasco".

A continuación: la propiedad fotos. Se supone que es una URL. De acuerdo con el modelo de datos HTML5 microdatos, el "valor" de un elemento <img> es su atributo src. Ahora todo lo que necesitas hacer es declarar que <img> es un elemento de propiedad fotos.

<img itemprop="photo" src="http://www.falasco.org/photo.jpg" alt="Roxana Falasco">

En lenguaje coloquial, esto dice "aquí está la propiedad foto, del vocabulario: http://schema.org/Person y el valor de la propiedad es http://www.example.com/photo.jpg.

Por último, la propiedad url es también una URL. De acuerdo con el modelo de datos HTML5 microdatos, el "valor" de un elemento <a> es su atributo href. Ahora todo lo que necesitas hacer es decir que <a> es un elemento de propiedad url:

<a itemprop="url" href="http://falasco.org/">Mi web</a>

En lenguaje coloquial, esto dice "aquí está la propiedad url, del vocabulario: http://schema.org/Person y el valor de la propiedad es http://falasco.org/.

Finalmente tendríamos:


<section itemscope itemtype="http://schema.org/Person">
	<h1 itemprop="name">Roxana Falasco</h1>
	<p><img itemprop="photo" src="http://www.falasco.org/photo.jpg" alt="Roxana Falasco"></p>
	<p><a itemprop="url" href="http://falasco.org/">Mi web</a></p>
</section>

Donde utilizar microdatos

En el ejemplo anterior hemos visto un par de propiedades del vocabulario de microdatos para el marcado de información de personas, y como puedes ver es realmente sencillo.

La forma más fácil de integrar microdatos es en una web personal, por ejemplo en tu página "Sobre mi", "Sobre el autor", etc. Seguramente si tienes un blog o web tengas una página "About", ¿no? Si no es así siempre puedes intentar integrarlos en algún sitio donde aparezca el nombre del autor del contenido, por ejemplo.

Lista de propiedades de los microdatos

Un elemento del tipo http://schema.org/Person representa una persona. Los siguientes elementos son los tipos de nombres de propiedad definidos:

Property Description
name Nombre
nickname Nick (pseudónimo)
photo Una imagen
title El título de la persona (Por ejemplo: “FrontEnd Developer”)
role El rol de la persona (Por ejemplo: “Team Lead”)
url Enlace a la página web de la persona
affiliation Nombre de la organización a la cual la persona está asociada (Por ejemplo: empresa donde trabajas)
friend Identifica la relación entre una persona y otra.
contact Identifica la relación entre la persona descrita y otra persona
acquaintance Identifica la relación entre la persona descrita y otra persona
address La localización de la persona. Puede tener subpropiedades como: calle, localidad, región, código postal, país y nombre.

La misma técnica es útil para el marcado de dirección postal. El vocabulario persona define una propiedad dirección, que es en sí misma un elemento de microdatos. Esto significa que la dirección tiene su propio vocabulario (http://schema.org/Address) y define sus propias propiedades.

El vocabulario Dirección define 5 propiedades: calle, localidad, región, código postal, país y nombre. Esto significa que tenemos que añadir itemscope y el atributos itemtype.

El vocabulario "Dirección" consta de las siguientes propiedades:

Property Description
street-address Calle
locality Localidad
region Provincia
postal-code Código Postal
country-name País

Veámoslo finalmente con un ejemplo:


<section itemtype="http://schema.org/Person" itemscope="">
	<img width="200" height="200" alt="Roxana Falasco" src="http://falasco.org/photo.jpg" itemprop="photo">

	<h1>Información de contacto</h1>
	<dl>
		<dt>Nombre</dt>
		<dd itemprop="name">Roxana Falasco</dd>

		<dt>Position</dt>
		<dd><span itemprop="title">FrontEnd Developer</span> for
			<span itemprop="affiliation">Resto-In</span>
		</dd>

		<dt>Dirección Postal</dt>
		<dd itemprop="address" itemscope="" itemtype="http://schema.org/Address">
			<span itemprop="street-address">100 Mi Calle</span><br />
			<span itemprop="locality">Barcelona</span>,
			<span itemprop="region">Barcelona</span>
			<span itemprop="postal-code">08080</span><br />
			<span itemprop="country-name">España</span>
		</dd>
	</dl>
</section>

Google rich snippets

Seguramente, llegados a este punto estarás pensando: "Esto de los Microdatos está muy bien, pero ¿para qué molestarme en añadirlos en mi web? ¿Qué me va a a aportar?"

Hay dos usos principales de aplicaciones que se le puede dar a los microdatos HTML5:

  • Navegadores web
  • Los motores de búsqueda

Para los navegadores, HTML5 define un conjunto de APIs DOM para extraer elementos de microdatos, propiedades y valores de propiedad desde una página web.

El otro gran consumidor de HTML son los motores de búsqueda. ¿Qué podría hacer un motor de búsqueda con propiedades de microdatos relativos a una persona? Imagina esto: en lugar de mostrar simplemente el título de la página y un extracto del texto, el motor de búsqueda podría integrar parte de esa información estructurada y mostrarlo en los resultados. Nombre y apellidos, cargo, empresa, dirección, tal vez incluso una miniatura con la foto del perfil de usuario. Esto podría llamar más la atención del usuario, que en un resultado donde sólo ofrezca texto.

Google admite microdatos como parte de su programa de Fragmentos Enriquecidos conocidos en inglés como Rich Snippets. Cuando el rastreador web de Google analiza la página y descubre propiedades de microdatos que cumplen con el vocabulario http://schema.org/Person, analiza estas propiedades y las almacena junto con el resto de los datos de la página. Google incluso ofrece una herramienta muy útil para ver cómo Google "ve" las propiedades de microdatos. Prueba a introducir la dirección de una página en la que se utilice Rich Snippet (por ejemplo: http://www.mattcutts.com/ o mi blog http://falasco.org) en la siguiente dirección:

http://www.google.com/webmasters/tools/richsnippets

Herramienta Rich Snippets

En los resultados de búsqueda de Google aparecerá algo como esto:

Rich Snippets en resultado de búsqueda

Cómo puedes ver es más vistoso y muy sencillo. Sólo basta con echar diez minutos y añadir un par de atributos HTML para resaltar los datos que ya estaban publicándose de todos modos.

Es importante saber que Google no garantiza que el marcado en una determinada página o en el sitio será utilizado en los resultados de búsqueda. Pero incluso si Google decide no utilizar tus anotaciones de microdatos, otro motor de búsqueda podría hacer uso de ellos. Al igual que el resto de HTML5, los microdatos es un estándar abierto que cualquiera puede implementar. Es su trabajo para proporcionar tantos datos como sea posible.

Microdatos y SEO

¿El uso de Microdatos puede mejorar el posicionamiento de mi web? Por sí sólo no mejorará el posicionamiento de tu web, pero sí influirá en que los usuarios se verán más atraídos por un resultado que ofrece más información acompañada de una imagen, que en un resultado que ofrece unicamente texto.

Cuántos vocabularios de Microdatos existen actualmente?

Desde junio de 2011, los motores de búsqueda más importantes han estado colaborando en la realización de un nuevo vocabulario común de datos llamado schema.org.

El vocabulario schema.org se puede utilizar tanto con microdatos como con sintaxis RDFa. Algunos de los más utilizados vocabularios de microdatos son:

  • Tipos de eventos.
  • Organización.
  • Persona.
  • Producto.
  • Revisión.
  • Y muchos otros.

La información de este artículo ha sido extraída de diversas fuentes, intentando ofrecer un resumen con las partes que más me han parecido interesantes. Espero que te sea de ayuda y para cualquier duda puedes dejar un comentario.

Fuente y enlaces de interés:

  • http://diveintohtml5.info/extensibility.html
  • http://www.google.com/webmasters/tools/richsnippets
  • http://www.data-vocabulary.org/
  • http://schema.org/