Recientemente, Google, Microsoft y Yahoo! se han puesto de acuerdo para definir el estándar de schema.org para el marcado de datos estructurados en páginas web. Este artículo expone las características de este marcado y explica la manera de utilizarlo.
Qué son los datos estructurados ?
El contenido de las páginas de un sitio web normalmente contiene elementos de contenido claramente diferenciados: el precio de un producto, la ruta de navegación, etc. Mediante el uso de los tags definidos en el estándar de schema.org, es posible marcar estos elementos de forma que los buscadores los reconozcan, y puedan realizar un proceso específico para ellos.
Tipos de marcado
Antes de que apareciera el standard de schema.org, existían ya varias posibilidades de marcado del contenido de una página web, en concreto:
- – Microdatos
- – RDFa (Resource Description Framework in Attributes)
- – Microformatos
De hecho, schema.org es una implementación de marcado mediante microdatos.
Ejemplo: Marcado de la ruta de navegación
Para entender mejor cómo funciona el marcado, vamos a ver un ejemplo de cómo realizar el marcado de una ruta de navegación (“Breadcrumbs”) en un sitio de anuncios clasificados.
En la cabecera de una página que contiene un anuncio de un coche en venta, aparecerá típicamente una ruta de navegación de la forma:
Anuncios Clasificados > Motor > Coches > Volkswagen Golf GT TSI
El código HTML correspondiente es:
|
1 2 3 4 5 6 7 8 9 10 |
<body> ... <a href="http://clasificados.ejemplo.com/">Anuncios Clasificados</a> > <a href="http://clasificados.ejemplo.com/motor">Motor</a> > <a href="http://clasificados.ejemplo.com/motor/coches">Coches</a> > Volkswagen Golf GT TSI ... </body> |
El marcado “clásico” de la ruta de navegación mediante microdatos se realiza sustituyendo dicho código HTML por:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://clasificados.ejempo.com/" itemprop="url"> <span itemprop="title">Anuncios Clasificados</span> </a> > </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://clasificados.ejemplo.com/motor" itemprop="url"> <span itemprop="title">Motor</span> </a> > </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://clasificados.ejemplo.com/motor/coches" itemprop="url"> <span itemprop="title">Coches</span> </a> > </div> Volkswagen Golf GT TSI |
En schema.org, hay definido un elemento WebPage que contiene entre otros una propiedad “breadcrumb”, de modo que el marcado, utilizando este standard, se realiza con el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body itemscope itemtype="http://schema.org/WebPage"> ... <div itemprop="breadcrumb"> <a href="http://clasificados.ejemplo.com/">Anuncios Clasificados</a> > <a href="http://clasificados.ejemplo.com/motor">Motor</a> > <a href="http://clasificados.ejemplo.com/motor/coches">Coches</a> > Volkswagen Golf GT TSI </div> ... </body> |
la lista completa de tipos de elementos, y sus correspondientes propiedades, se puede consultar en http://schema.org/docs/full.html
Referencias
- http://en.wikipedia.org/wiki/Microformats
- http://microformats.org/wiki/Main_Page
- http://www.data-vocabulary.org/
- http://schema.org/
- http://www.w3.org/TR/rdfa-syntax/
- https://support.google.com/webmasters/answer/1211158
—