¿Qué son los microdatos?

Introducción a los microdatos en un entorno web: qué son, para qué sirven y cómo se emplean; un esfuerzo para contribuir a la web semántica o web 3.0.

archivado en: HTML/CSS / 6 septiembre, 2012 / taller:

La web 3.0 o web semántica, en esencia, consiste en conseguir que las máquinas entiendan qué significan los contenidos de tal manera que luego sea más fácil localizarlos e interpretarlos. Así, por ejemplo, si Flikr reconoce el lugar dónde se ha sacado una fotografía, puede mostrarla acompañada de un mapa que aporte información complementaria al usuario o, por poner otro caso, si un buscador como Google reconoce al autor de una web, puede mostrar esa información durante una búsqueda.

Para conseguir eso, se han incorporado algunas etiquetas especiales a la última versión del lenguaje HTML, como la etiqueta <header> que indica que un conjunto de elementos forman la cabecera de una web. Sin embargo, tal y como veremos otro día, no son suficientes para describir la tremenda variedad de contenidos que hay en la red, así que se están lanzando otras propuestas para el etiquetado semántico de las webs.

Las etiquetas semánticas son unos tags especiales que definen significados. Por ejemplo, este podría ser un párrafo normal en HTML, marcado tan solo por la etiqueta <p> que define los párrafos:

<p>Nero Wolf experto en cultivo de orquídeas</p>

Pero se le podrían añadir etiquetas semánticas para diferenciar el nombre de la profesión:

<p><nombre>Nero Wolf</nombre>, <profesión>experto en cultivo de orquídeas</profesión></p>

Hay tres tipos principales de marcado semántico, los microdatos, los microformatos y las extensiones RDFa. En este artículo explicaré los primeros, ya que sospecho terminarán por ser los más populares.

Microdatos en HTML5

Tal y como viene explicado en las especificaciones de la W3C, «en un nivel alto, los microdatos consisten en grupos de pares nombre-valor. Estos grupos se denominan items y cada par nombre-valor es una propiedad». Para entender qué significa este galimatías, imaginemos que tenemos el siguiente bloque de información sobre una película:

  • Título: Blade Runner
  • Dirección: Ridley Scott
  • Reparto: Harrison Ford,Rutger Hauer, Sean Young, Edward James Olmos, Daryl Hannah
  • Año: 1982.


Ese bloque de información forma un grupo, es decir, un ítem y se define como tal incluyendo el atributo itemscope (que vendría a significar, «el ámbito de un ítem») en un div (u otro tag, como article) que lo contenga:

  • <div itemscope>
  • Título: Blade Runner
  • Dirección: Ridley Scott
  • Reparto: Harrison Ford,Rutger Hauer, Sean Young, Edward James Olmos, Daryl Hannah
  • Año: 1982.
  • </div>


Ese grupo está formado por pares de elementos que forman propiedades: la propiedad título, la propiedad director, la propiedad reparto y la propiedad año. Para definirlas se usa el atributo itemprop (propiedad del ítem) dándole un valor entre comillas en el que se explica qué significa cada una.

Si es información que va a ser visualizada el atributo se puede declarar en cualquier etiqueta contenedora —como  <div>, <p> o <span>—, de lo contrario, podemos emplear una etiqueta meta, como en el siguiente ejemplo, en el cual se indica la ruta de la imagen que deberían mostrar los buscadores en una página de resultados (SERP). Cuando se utiliza una etiqueta meta, el valor se declara en el atributo content.

  • <div itemscope>
  • Título: <span itemprop="título"> Blade Runner </span>
  • Dirección: <span itemprop="autor">Ridley Scott  </span>
  • Reparto: <span itemprop="reparto"> Harrison Ford,Rutger Hauer, Sean Young, Edward James Olmos, Daryl Hannah </span>
  • Año: <span itemprop="años">1982.</span>
  • <meta  itemprop="imagen" content="imagen_representativa.jpg">
  • </div>

Schema.org

Para que estas etiquetas semánticas funcionen deben referenciarse en algún lugar, es decir, en algún sitio tiene que haber una explicación de que la propiedad <nombre> significa el nombre y los apellidos de alguien. Y, además, más o menos todo el mundo debería usar las mismas, pues si uno emplea autor, otro autoría y el de más allá responsable, sería un caos tremendo.

Por suerte, para contribuir a la web semántica, Google, Bing y Yahoo se pusieron de acuerdo en concentrar esas explicaciones en un solo sitio y así nació el proyecto schema.org, donde poco a poco se añaden nuevas especificaciones o schema para microdatos.

Para usar uno de estos schemas basta con añadir en el div (o la etiqueta contenedora que sea) donde se especifica el itemscope el atributo itemtype y como valor la URL del que estemos usando. Por ejemplo, para usar la especificación de las películas, que se encuentra en esta URL:

http://www.schema.org/Movie

habría que usar este itemtype:

  • <div itemscope itemtype="http://schema.org/Movie">
  • Aquí irían los datos de la peli
  • </div>


Y lo más interesante es que los schema se pueden combinar, por lo que las posibilidades son infinitas. Por ejemplo, en el itemscope movie podemos incluir el itemscope person para indicar algunos datos que no aparecen en la especificación movie:

  • <div itemscope itemtype="http://schema.org/Movie">
  • Dirección: <span itemprop="director" itemscope itemtype="http://schema.org/Person"><span itemprop="name"> Ridley Scott  </span>
  • </div>


Para comprobar si hemos definido bien los microdatos de una web se puede utilizar una aplicación de las herramientas para webmaster de Google que te indica qué microdatos ha comprendido este buscador: Rich Snippets Testing Tool. Por ejemplo, según esta aplicación, en este tema de WordPress que estoy programando ya reconoce entre otros los siguientes microdatos para cada artículo:

  • name
  • reviewbody
  • datepublished
  • author
  • thumbnailurl
  • articlebody
  • keywords

Otro día explicaré cómo incluir los microdatos en WordPress. De momento vamos a dejarlo aquí.

¿Interesante, no?

Updated (09-09-2012)

Me pide Sandra que explique mejor cómo se combinan esquemas.

Entonces, algunos esquemas incluyen a su vez otros esquemas. Por ejemplo, CreativeWork incluye el esquema Person. Estos esquemas vinculados se distinguen por el color rojo y la línea de puntos que indican que son un enlace.

Con el esquema Person se pueden añadir datos sobre una persona que no vienen en el esquema CreativeWork, por lo que puedes necesitar enlazarlos. ¿Cómo? Muy sencillo, definiendo una propiedad como un itemscope. Esto se entiende bien con un ejemplo. Imagina que tienes una web que se llama «Los libros de Sandra» y en un itemscop has definido qué eres su autora:

  • <div itemscope itemtype="http://schema.org/WebPage">
  • <span itemprop="author">Sandra</span>
  • </div>


Pero quieres añadir más datos personales que no vienen en el esquema de WebPage sino en el de Person. Como este esquema está vinculado con author, en esa propiedad añades un itemscope:

  • <div itemscope itemtype="http://schema.org/WebPage">
  • <span itemprop="author" itemscope itemtype="http://schema.org/Person">Jane Doe</span>
  • </div>


Y ya dentro de esa propiedad puedes añadir los datos de Person que necesites, como el correo electrónico:

  • <div itemscope itemtype="http://schema.org/WebPage">
  • <span itemprop="author" itemscope itemtype="http://schema.org/Person">Sandra
  • <span itemprop="email"> elcorreoquesea@talycual.com</span>
  • </span>
  • </div>


¿Se entiende mejor así?

|| Tags: , , ,

valoración de los lectores sobre ¿Qué son los microdatos?

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (21 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

6 respuestas a “¿Qué son los microdatos?

  1. Hola, muy interesante. No he entendido bien cómo se combinan los microdatos. ¿Puedes explicarlo mejor?