Definiendo una persona con Microdata en HTML5

07/Oct/2012 HTML5 10 Comentarios

Dentro de la especificación de HTML5 aparece el concepto de microdata (o microdatos). Al igual que teníamos los microformatos, el microdata nos ayuda a dar información semántica a una estructura de datos. De esta forma conseguiremos dar información adicional a nuestra página. Esta información adicional servirá a otros, como puede ser el caso de los buscadores, a extraer información de la página.

En este caso vamos a definir una persona con la estructura de microdata de HTML5. Y veremos como Google utiliza esta información para extraer datos relativos a los autores de las páginas web.

Lo primero que tenemos que saber es que los microdatos que utilicemos tienen que seguir un esquema, el cual deberá de estar definido en algún sitio. Este esquema es que nos dice de que partes se conforma la estructura. En nuestro caso vamos a utilizar los esquemas de Schema.org y en concreto el esquema de una Persona. Si bien hay que saber que podríamos definirnos nuestro propio esquema. A esto se lo conoce como namespace.

El microdata de persona en HTML5 es utilizado por Google en sus resultados para indicar la auditoría de los artículos y proporcionar información adicional.

Echandole un vistazo a la estructura persona vemos que los datos básicos que tiene que tener toda persona son:

  • name, como nombre de la persona
  • url, web asociada a la persona
  • image, una foto de la persona.

Aunque podemos tener otros datos como:

  • nickname, apodo de la persona
  • affiliation, empresa en la que está dicha persona.
  • jobTitle, rol de la persona en una empresa
  • ...

A la hora de empezar a definir la persona con microdata en HTML5 lo primero será definir el ámbito al que aplica, es decir, la zona sobre la cual definimos a la persona dentro de todo el contenido de nuestra página. Para definir el ámbito utilizamos el atributo itemscope. Por ejemplo, si el ámbito queremos reducirlo a una capa lo haremos de la siguiente forma:

  1. <div itemscope>
  2. <img src="foto.jpg" width="150" height="150" alt="Foto de Víctor"></a>
  3. <strong>Nombre</strong>: Víctor Cuervo<br/>
  4. <strong>Posición:</strong> Editor en Aulambra<br/>
  5. <strong>Web:</strong> <a href="http://lineadecodigo.com" title="Linea de Código">Línea de Código</a>
  6. </div>

Pero a parte de definir el ámbito del microdata en HTML5 hay que indicar el esquema sobre el que se va a trabajar. En el caso de definir una persona utilizaremos el esquema http://schema.org/Person. En este caso el atributo a utilizar es itemtype.

  1. <div itemscope itemtype="http://schema.org/Person">
  2. <img src="foto.jpg" width="150" height="150" alt="Foto de Víctor"></a>
  3. <strong>Nombre</strong>: Víctor Cuervo<br/>
  4. <strong>Posición:</strong> Editor en Aulambra<br/>
  5. <strong>Web:</strong> <a href="http://lineadecodigo.com" title="Linea de Código">Línea de Código</a>
  6. </div>

Ahora que ya tenemos definido el ámbito vamos a empezar la información semántica al contenido. Por ejemplo, al nombre "Víctor Cuervo" hay que indicar que es el nombre o "name". Para poder hacer esto utilizamos el atributo itemprop. Por ejemplo, para el caso del nombre y empresa lo haremos de la siguiente forma:

  1. <strong>Nombre</strong>:
  2. <span itemprop="name">Víctor Cuervo</span><br/>
  3. <strong>Posición:</strong>
  4. <span itemprop="jobTitle">Editor</span> en
  5. <span itemprop="affiliation">Aulambra</span>

Como el texto no tenía una etiqueta asociada hemos insertado una etiqueta span para poder añadirlo. En el caso de la imagen lo haremos directamente poniendo itemprop="image" sobre el elemento IMG.

  1. <img itemprop="image" src="foto.jpg" width="150" height="150" alt="Foto de Víctor">

De igual manera para la URL utilizamos el elemento A para incluir el atributo itemprop="url".

  1. <strong>Web:</strong>
  2. <a href="http://lineadecodigo.com" title="Linea de Código" itemprop="url">Línea de Código</a>

Todo el código quedará de la siguiente forma:

  1. <div itemscope itemtype="http://schema.org/Person">
  2. <img itemprop="image" src="foto.jpg" width="150" height="150" alt="Foto de Víctor">
  3. <strong>Nombre</strong>: <span itemprop="name">Víctor Cuervo</span><br/>
  4. <strong>Posición:</strong> <span itemprop="jobTitle">Editor</span> en <span itemprop="affiliation">Aulambra</span><br/>
  5. <strong>Web:</strong> <a href="http://lineadecodigo.com" title="Linea de Código" itemprop="url">Línea de Código</a>
  6. </div>

Para poder probar tu código para definir una persona con microdata en HTML5 se puede utilizar un snippet de Google en http://www.google.com/webmasters/tools/richsnippets

Actualizado 26.agosto.2015
Modificado el itemprop="image" en vez del itemprop="photo".

Actualizado 16.octubre.2014
Utilizado el atributo "jobTitle" para identificar el campo del rol dentro de la empresa.

Actualizado 14.octubre.2014
Hemos modificado el código para utilizar la definición de microdata de http://schema.org/.

10 comentarios en “Definiendo una persona con Microdata en HTML5”

Víctor Cuervo

Jean

No seria
img itemprop=”image” src=”foto.jpg” width=”150″ height=”150″ alt=”Foto de Víctor”
en vez de
img itemprop=”photo src=”foto.jpg” width=”150″ height=”150″ alt=”Foto de Víctor”

Víctor Cuervo

Víctor Cuervo

Hola Jean,

Pues revisando la especificación a día de hoy tienes toda la razón. Lo modificamos ahora en el artículo y en el código para que aparezca de forma correcta.

Muchas gracias.

Víctor Cuervo

Jean

No seria

en vez de

Víctor Cuervo

Víctor Cuervo

@Juanjo,

La verdad que es muy interesante. Voy a intentar publicar más ejemplos sobre el tema del microdata.

Gracias por el comentario.

Víctor Cuervo

Juanjo

La verdad, me estoy poniendo en serio con HTML5 y no conocía el concepto microdata. Habrá que investigar más.

Víctor Cuervo

Víctor Cuervo

@Jeroen van Meerendonk,

Tienes toda la razón. Tiene esa errata. El jobTitle encaja perfectamente. Cambiamos para que quede correcto.

Muchas gracias por la observación.

Víctor Cuervo

Jeroen van Meerendonk

No tenía ni idea de que existía algo así. He estado mirando y creo que en lugar de “tittle” debería ir “jobTitle”. ¿Puede ser?

Me baso es esta referencia: http://schema.org/Person

¡Gracias!

Víctor Cuervo

Víctor Cuervo

Cambiado el artículo para utilizar http://schema.org/Person
Gracias de nuevo a @jlalcazar por el apunte.

Víctor Cuervo

Víctor Cuervo

@jlalcazar,

Totalmente de acuerdo. Lo tenía pensado escribir con schema.org, pero lo tenía de hace tiempo escrito con el data-vocabulary. Lo voy a cambiar que queda mucho más correcto.

Muchas gracias por el apunte.

Víctor Cuervo

jlalcazar

Es preferible usar schema.org , todos los buscadores(facebook no) se han puesto deacuerdo en ese aspecto y es el futuro sin duda.

Responder a Jean Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*