En los últimos años microformatos, microformatos-2, RDFa o microdatos se han convertido en elementos básicos de la construcción del HTML siempre que hemos querido darle información semántica a las máquinas, a los robots de búsqueda. Pero ¿estás usándolos realmente de forma correcta?
La respuesta a esta pregunta siempre la hemos de buscar en la información que el organismo de crear los estándares de desarrollo web nos ofrece, y para esto existe la HTML data Guide donde nos encontramos con un resumen bastante interesante de su funcionamiento.
Antes de nada, poner los enlaces a las páginas oficiales de cada uno de estos lenguajes de marcas que os he comentado al inicio:
Todos estos elementos tienen una cosa en común, y es que permiten extraer información de páginas HTML de forma sencilla, y me atrevería a decir que información inteligente y semántica.
En la actualidad, como vengo comentando, existen tres sintaxis principales:
Microformatos
Los microformatos usan @class, @rel y otros atributos para codificar datos en HTML. Además pueden usarse con cualquier lenguaje de marcas que use atributos @class. Hsta el momento los microformatos tenían varios vocabularios para hacer diferentes cosas, pero con los Microformatos 2 esto se ha estandarizado a un sistema único de proceso.
RDFa
El RDFa reutiliza código HTML existente como @href y @rel añadiéndole pequeñas partes más que permiten extraer información (como ya ocurre con el RDF). Estaba pensado originalmente para el XHTML 1.1 y es compatible con HTML 5 y SVG.
microdatos
Los microdatos añaden atributos al HTML 5, de forma que cualquier elemento pueda tener una serie de propiedades y valores. Estos están diseñados para añadir información detallada que pueda ser procesada por los usuarios.
NOTA 1: Los microdatos SÓLO funcionan con HTML 5, por lo que aunque pongas cosas como Schema, si tu web no es HTML 5 buscadores como Bing o Google no “interpretarán” la información que les has dado porque no cumplen con el estándar.
NOTA 2: Bing tiene la herramienta Markup Validator, Google el Rich Snippets Testing Tool y Yandex el Microformat validator para verificar la mayoría de estas sistaxis. Además existen herramientas como el RDFa Validator o el Living Validator, este último aceptando en principio todos los formatos y sistemas.
La forma de aplicar estos sistemas es triple también. Se puede hacer mediante la inclusión en la cabecera de la página de metadatos, como por ejemplo en elemento link con un rel=”alternate”:
<link rel="alternate" type="text/calendar" value="calendar.ics">La otra opción es la de incrustar código dentro del propio código HTML, aún en la cabecera. Para ello se podrían usar elementos como JSON o Turtle, algo similar a esto:
<script type="text/turtle">
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix gr: <http://purl.org/goodrelations/v1#> .
@prefix vcard: <http://www.w3.org/2006/vcard/ns#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
<#company> gr:hasPOS <#store> .
<#store> a gr:Location ;
gr:name "Hair Masters" ;
vcard:adr [
a vcard:Address ;
vcard:country-name "USA" ;
vcard:locality "Sebastpol" ;
vcard:postal-code "95472" ;
vcard:street-address "6980 Mckinley Ave" ;
] ;
foaf:page <> ;
.
</script>Para acabar, quizá la actualmente más conocida, es la de incrustar meta información en el cuerpo de la página, a través de los atributos custom data válidos sólo en HTML 5.
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
<button class="fire"
onclick="spaceships[this.parentNode.dataset.shipId].fire()"> Fire
</button>
</div>Para acabar, un poco de terminología, para entender bien las palabras que debemos usar cuando hablemos de esto:
- Formato es la combinación de Sintaxis, Tipos, Propiedades de una o más Vocabularios.
- Sintaxis son las distintas formas de organizar la información. En este caso hemos hablado de microformatos, RDFa y microdatos.
- Vocabulario es cada uno de los conjuntos que permite cada sintaxis formado por entidades. Por ejemplo el microdato “producto” o el microformato “hcard”.
- Entidad es cada uno de los pequeños elementos por las que se forma un Vocabulario. Por ejemplo el nombre de una persona, una dirección… Cada entidad tiene uno o más Tipos de datos, y estos tipos de datos tienen una serie de Propiedades con sus respectivos Valores.
A la hora de publicar información lo más sencillo es publicar y mantener tan sólo un tipo de vocabulario por página. En caso de estar utilizando HTML 5 es más que recomendable usar los microdatos, ya que son los que permiten mayor extensibilidad; en cualquier otro dato los microformatos son la opción más adecuada. El RDFa prácticamente no se utiliza.
NOTA 3: Por ahora mi experiencia personal es que Google sólo lee el primero de los vocabularios que se incluyen en una página. Hay que recordar que muchas entidades se pueden anidar, por lo que es mejor utilizar el vocabulario principal y no usar varios.
Aunque el estándar permite el cruce de distintas sintaxis en una página, hoy en día, teniendo en cuenta que la mayoría de webmasters que publicarán vocabularios en sus páginas lo hacen por un tema puro y duro de SEO, casi es mejor limitarse a uno de ellos que, como decía antes, si se dispone de HTML 5 en el sitio, es el óptimo.
Una gran diferencia entre microformatos + RDFa y los microdatos es que las propiedades de cada entidad están bastante establecidas; esto significa que los microformatos no son extensibles y han de adaptarse al 100% a lo que el estándar permite, pero, en contra, los microdatos pueden seguir el estándar y pueden tener valores no estándar, lo que permite su escalabilidad de forma infinita.
En cambio, hay una cosa en contra de los microdatos, y es que es bastante más difícil el uso de los multi idiomas en la información. Los microformatos permiten el uso de @lang como una propiedad, algo que los microdatos no permiten, por lo que se complica el uso.
Otra cosa a tener en cuenta es el diseño, el visual. Para una ficha de persona, por ejemplo, poner el nombre de la persona en negrita, en las tres sintaxis tendríamos un código tal que este:
microformatos:
.hcard .n { font-weight: bold; }RDFa:
[typeof~="foaf:Person"] [property~="foaf:name"]microdata:
[itemtype~="http://microformats.org/profile/hcard"] [itemprop~="n"]Esto hace que, a nivel de uso de los CSS los microformatos sean una herramienta mucho más sencilla que el resto. Claro está, se pueden incluir clases y similares, pero sería información añadida que sólo sería útil en diseño y no en código fuente.
A la hora de gestionar fechas y horas, si queremos mezclar información y hacerla 100% compatible entre distintos formatos podríamos usar algo parecido a esto (que mezcla HTML 5 con otros elementos, haciéndolo completamente compatible; hay que tener en cuenta que el elemento abbr puede usarse para patrones de fechas).
<time itemprop="dtstart" property="startDate" content="2016-04-21T20:00:00">
<abbr class="dtstart" title="2016-04-21T20:00:00">
Thu, 04/21/16 8:00 p.m.
</abbr>
</time>En lo que respecta a relaciones de enlaces, HTML 5 incluye bastantes elementos @rel que son comprensibles, pero que no son compatibles con otros sistemas como RDFa. Lo que sí es compatible es el uso del @vocab, donde se informa del tipo de contenido que llevaría el enlace. Con esto podríamos conseguir algo similar a:
<a vocab="http://purl.org/dc/terms/"
rel="date" href="http://reference.data.gov.uk/id/day/2011-11-15">
15th November 2011</a>Con esto conseguiríamos que la relación del enlace fuera de tipo dc:date, es decir, que es una fecha, (basándonos en la información Dublin Core).
A la hora de publicar contenido (o información) incrustado en el HTML debemos tener muy presente que las buenas prácticas imperan sobre cualquier cosa, ya que si el lenguaje de marcas es incorrecto la extracción de información se vuelve muy compleja. Por eso hay que tener muy presente el uso de un HTML válido. Todas las sintáxis necesitan de una estructura, ya que esto se basa en los datos estructurados, así que es básico cumplir con los estándares de HTML.
Como primera recomendación, es casi básico utilizar sistemas de lectura que permitan HTML 5, es decir, navegadores de última generación. Varios ejemplos son que, Firefox (y otros) no es capaz de procesar los elementos que no se pueden dejar dentro de una tabla y los sacan fuera de ella. Incluso, hay navegadores antiguos que los elementos meta o rel no pueden ser procesados en el body y son “movidos” al head, con las consecuencias de errores de proceso que ello genera.
Otra buena práctica es la de definir la licencia de uso de dicha información. Al fin y al cabo la información que se introduce es pública pero no por ello tiene porqué permitirse la reutilización de la misma. Así que, ya que todas las sintaxis lo permiten, es más que recomendable informar de la licencia de uso.
A la hora de procesar la información que nos ofrece el HTML mediante cualquiera de la sintaxis debemos tener en cuenta que hay dos formas principales de procesarse. La primera de ellas hace referencia a los microformatos 2 y a los microdatos. En ambos casos la información puede procesarse como JSON lo que permite un manejo muy sencillo de la información estructurada. En cambio, el RDFa puede expandise en múltiples opciones. Entre ellas la más habitual es la de convertirlo a RDF/XML o a Turtle, aunque también se podría llegar a extraer vía SPARQL o RDFa API.
Y si no encuentras tu vocabulario… ¿se pueden crear o proponer? Pues la respuesta es simple: sí. Aunque hay varias formas de llegar a hacer propuestas y a distintos niveles. Por ejemplo, existe una página en la que se detalla cómo proponer un microformato, el W3C tiene su Semantic Web Interest Group para crear elementos ya más oficiales e incluso el grupo de Schema (en el que participan los principales motores de búsqueda) tiene el Extension Mechanism en el que no sólo se puede crear un nuevo schema, sino que se pueden extender los actuales, y si mucha gente lo adopta el propio sistema lo tomaría para crear el estándar. En cualquier caso, y mirando hacia el futuro, si vas a crear algo, mi recomendación es que te bases en el estándar de microdata del W3C, responsable del cuál, además, es Ian Hickson (trabajador de Google).
Y en principio todo esto es lo que hay que saber sobre el tratamiento y la incrustación de datos dentro del HTML. Por supuesto no he tratado en detalle ninguno de los vocabularios, pero eso ya depende de cada proyecto y desarrollador (e incluso usuario). Lo que sí que voy a decirte es que, si tienes información estructurada, exista ya o no un sistema estándar, asímate a utilizar el que hay y sino créatelo tú mismo siguiendo las bases que existen.
Tras ver el otro día qué son los MicroDatos, hoy voy a explicaros lo que antiguamente eran los hCard. Este microformato es de los más extendidos y extensibles, y ahora se ha convertido, usando la misma base, en un MicroDato bastante interesante, sobretodo porque ya viene documentado en el HTML 5.
Los que me conocéis sabéis que desde hace tiempo he sido un seguidos de los microformatos, y una de las mejoras que descubrí al hacer la serie de artículos de