RDFa, que co­rre­s­po­n­de a las siglas de Resource De­s­cri­p­tion Framework in At­tri­bu­tes, es un lenguaje de marcado re­co­me­n­da­do por el Word Wide Web Co­n­so­r­tium (W3C) como estándar para la in­co­r­po­ra­ción de etiquetas RDF en HTML, en XHTML y en diversos dialectos XML. RDF es utilizado por los pro­gra­ma­do­res para es­pe­ci­fi­car co­n­te­ni­dos web mediante metadatos. Es así como los na­ve­ga­do­res o los robots de los bu­s­ca­do­res también pueden in­te­r­pre­tar co­n­te­ni­dos se­má­n­ti­cos, lo que co­n­s­ti­tu­ye el fu­n­da­me­n­to de la llamada web semántica.

A pesar de ser in­tro­du­ci­do en 2004 como módulo de XHTML, no fue re­co­me­n­da­do por el W3C hasta 2008. Este lenguaje de marcado es co­m­pa­ti­ble con HTML y HTML5 desde la versión 1.1, in­tro­du­ci­da en 2012 de forma paralela a una versión más sencilla de­no­mi­na­da RDFa Lite. 

RDF en HTML

RDFa co­n­s­ti­tu­ye solo una de las muchas po­si­bi­li­da­des de marcar enu­n­cia­dos con RDF. Los términos propios de este formato se in­co­r­po­ran al lenguaje HTML para tra­n­s­fo­r­mar los co­n­te­ni­dos de la página web en datos es­tru­c­tu­ra­dos co­m­pre­n­si­bles por las máquinas. Esta in­co­r­po­ra­ción tiene lugar mediante atributos en etiquetas HTML. Es por esto que este formato de es­tru­c­tu­ra­ción de datos es co­m­pa­ra­ble con otros como mi­cro­fo­r­ma­tos o mi­cro­da­tos. Lo que hace RDFa es disponer la me­ta­si­n­ta­xis para la notación semántica. Para describir in­fo­r­ma­ción semántica mediante metadatos es necesario un vo­ca­bu­la­rio homogéneo. Para ello, los pro­gra­ma­do­res disponen de varios es­tá­n­da­res como FOAX, SKOS, Dublin Core o SIOC. Sin embargo, Google, Bing, Yahoo y Yandex re­co­mie­n­dan una notación según schema.org, un sistema creado por ini­cia­ti­va de los cuatro bu­s­ca­do­res ma­yo­ri­ta­rios para unificar el eti­que­ta­do de datos es­tru­c­tu­ra­dos.

¿Cómo utilizar RDFa?

En la in­co­r­po­ra­ción de metadatos, la es­pe­ci­fi­ca­ción de RDFa introduce una serie de nuevos atributos que amplían el re­pe­r­to­rio de los lenguajes de marcado exi­s­te­n­tes hasta el momento como HTML, XHTML o HTML5. La siguiente lista muestra los atributos que se utilizan en la versión reducida RDFa Lite:

AtributoDe­s­cri­p­ción
vocabEl atributo vocab define el vo­ca­bu­la­rio en el que se basa el marcado de elementos con RDFa, por ejemplo, schema.org.
typeofMediante el atributo typeof se ordenan elementos en una de­te­r­mi­na­da categoría o “type” según el vo­ca­bu­la­rio escogido.
propertyCon el atributo property se le otorgan pro­pie­da­des a un elemento.
resourceEl atributo resource permite a los pro­gra­ma­do­res asignar de­no­mi­na­cio­nes in­di­vi­dua­les, los llamados “ide­n­ti­fier”, a los elementos.
prefixEl atributo prefix permite a los pro­gra­ma­do­res usar más de un vo­ca­bu­la­rio, en caso de que los términos del vo­ca­bu­la­rio que se escogió al principio no sean su­fi­cie­n­tes

Como elementos po­r­ta­do­res de atributos RDFa se usan pre­fe­re­n­te­me­n­te tags de HTML sin semántica propia. Por eso, suelen en­co­n­trar­se metadatos en etiquetas div- o span-, aunque, en principio, RDFa se puede integrar en cualquier tag de HTML. Esto se realiza, por regla general, según el siguiente esquema.

Esquema básico de la sintaxis de RDFa:

01<div vocab="http://schema.org/" typeof="Schema">
02 <span property="Ei­ge­n­s­cha­ft">Te­x­te­le­me­nt</span>
03<div>

Es­tru­c­tu­rar una dirección postal con RDFa

En este ejemplo se muestra un cuerpo de datos de contacto en formato HTML clásico, tal como se encuentra en multitud de páginas web.

Código HTML de una dirección postal:

01<p>
02 Google Inc.<br>
03 P.O. Box 1234<br>
04 Mountain View, CA<br>
05 94043<br>
06 United States<br>
07</p>

Mientras que una persona reconoce a primera vista que el texto marcado con la etiqueta <p> hace re­fe­re­n­cia a una dirección postal americana, las máquinas (na­ve­ga­do­res y robots) necesitan metadatos adi­cio­na­les para poder in­te­r­pre­tar el si­g­ni­fi­ca­do de estos datos. Con RDFa se haría de la siguiente forma.

Marcado de una dirección postal con RDFa:

01<p vocab="http://schema.org/" typeof="Po­stalA­d­dre­ss"><br>
02 <span property="name">Google Inc.</span><br>
03 P.O. Box <span property="po­s­tO­f­fi­ce­Bo­x­Nu­m­ber">1234</span><br>
04 <span property="ad­dre­s­s­Lo­ca­li­ty">Mountain View</span>,<br>
05 <span property="ad­dre­s­s­Re­gion">CA</span><br>
06 <span property="po­stal­Co­de">94043</span><br>
07 <span property="ad­dre­s­s­Cou­n­try">United States</span><br>
08</p>

En la línea 01, el tag de HTML <p> sirve de elemento portador para los atributos RDFa “vocab” y “typeof”. Así, las máquinas que pueden in­te­r­pre­tar este tipo de código “co­m­pre­n­den” que todos los datos incluidos dentro del tag <p> siguen el vo­ca­bu­la­rio de schema.org y que la in­fo­r­ma­ción se encierra en la categoría “Po­stalA­d­dre­ss“ (dirección postal). Según schema.org, a cada esquema o categoría le pe­r­te­ne­cen de­te­r­mi­na­das ca­ra­c­te­rí­s­ti­cas. En este caso, típico de las di­re­c­cio­nes postales es que incluyan ciertos datos postales. Para hacerlas aptas para las máquinas, se usa el atributo RDFa “property”. En este ejemplo, los datos “name”, “po­s­tO­f­fi­ce­Bo­x­Nu­m­ber”, “ad­dre­s­s­Lo­ca­li­ty", “ad­dre­s­s­Re­gion", “po­stal­Co­de" y “ad­dre­s­s­Cou­n­try" con sus co­rre­s­po­n­die­n­tes valores son ca­ra­c­te­rí­s­ti­cas de “Po­stalA­d­dre­ss”. Por lo tanto, un programa que lea código HTML puede valorar cómo mostrar in­fo­r­ma­ción como “Google Inc.” o “94043”.  

Rich snippets con RDFa

Los datos es­tru­c­tu­ra­dos así son es­pe­cia­l­me­n­te re­le­va­n­tes para la búsqueda, pues si una página web está es­tru­c­tu­ra­da se­má­n­ti­ca­me­n­te, los robots de los bu­s­ca­do­res pueden extraer fá­ci­l­me­n­te la in­fo­r­ma­ción más im­po­r­ta­n­te y mostrarla en forma de rich snippets. Estos son extractos de los co­n­te­ni­dos de una web que amplían los re­su­l­ta­dos de una búsqueda y destacan sobre los demás. En este sentido, el marcado semántico tiene mucho que ver con la op­ti­mi­za­ción de una web para los bu­s­ca­do­res. Google soporta una es­tru­c­tu­ra­ción de datos para rich snippets mediante RDFa para productos, recetas, va­lo­ra­cio­nes de usuarios, software y noticias. Para mostrar rich snippets de vídeos se requieren formatos más actuales como mi­cro­da­tos y JSON-LD. Este último es el formato necesario para generar rich snippets para eventos. Para entender cómo se es­tru­c­tu­ran los co­n­te­ni­dos de una web para mostrarse como rich snippet, pre­se­n­ta­mos el ejemplo de una va­lo­ra­ción de producto.

Generar un rich snippet de una va­lo­ra­ción de producto mediante RDFa

Por regla general, las va­lo­ra­cio­nes de producto que aparecen en las SERP como rich snippet contienen el nombre del producto, una imagen, una pu­n­tua­ción, así como un cuerpo de texto, que además de la crítica en sí, también incluye el nombre del autor, el título y la fecha. Con el siguiente fragmento de código se muestra cómo se es­tru­c­tu­ra esta in­fo­r­ma­ción con RDFa para las máquinas: 

Es­tru­c­tu­ra­ción de una va­lo­ra­ción de producto mediante RDFa:

01<div vocab="http://schema.org/" typeof="Product">
02 <img property="image" src="https://www.ionos.es/digitalguide/www.anbieter.de/pro­du­k­t­bi­ld.jpg" alt="Bi­l­d­be­s­ch­rei­bu­ng"/>
03 <span property="name">Name des Produkts</span>
04 <div property="review" typeof="Review"> Review:
05 <span property="re­vie­w­Ra­ti­ng" typeof="Rating">
06 <span property="ra­ti­n­g­Va­lue">5</span> -
07 </span>
08 <b>"<span property="name">Titel der Bewertung</span>"</b> von
09 <span property="author" typeof="Person">
10 <span property="name">Name des Autors</span>
11 </span>, ge­s­ch­rie­ben am 
12 <meta property="da­te­Pu­bli­shed" content="2006-05-04">4. Mai 2006
13 <div property="re­vie­w­Bo­dy">Be­we­r­tu­n­g­s­te­xt</div>
14 <span property="publisher" typeof="Or­ga­ni­za­tion">
15 <meta property="name" content="Name des He­rau­s­ge­be­rs">
16 </span>
17 </div>
18</div>

Como en el ejemplo anterior, en la linea 01 se establece schema.org como el vo­ca­bu­la­rio en el que se basa el marcado. El atributo typeof define los datos entre la línea 01 y la 17 como pe­r­te­ne­cie­n­tes al esquema estándar “Product”.

Según schema.org, los productos tienen una serie de ca­ra­c­te­rí­s­ti­cas o pro­pie­da­des (pro­pe­r­ties). En este ejemplo, a este producto le hemos otorgado, y hemos señalado se­má­n­ti­ca­me­n­te, un nombre (property="name"), una imagen (property=”image”) y un co­me­n­ta­rio (property="review").

La sintaxis RDFa también considera que las pro­pie­da­des también pueden ser tipos en sí y recibir pro­pie­da­des. Es así como la ca­ra­c­te­rí­s­ti­ca “review” de la línea 04 se puede definir como esquema “Review” y ser es­pe­ci­fi­ca­da en más detalle

Fragmento:

04 <div property="review" typeof="Review"> Review:

Es habitual encontrar un sistema de estrellas para valorar ex­pe­rie­n­cias de usuario en la web. Para que las máquinas puedan in­te­r­pre­tar­las, a “Review” se le otorga la propiedad “re­vie­w­Ra­ti­ng” que, a su vez, se convierte en la categoría “Rating” y puede ser definida con la propiedad “ra­ti­n­g­Va­lue” y un valor de­te­r­mi­na­do (líneas 04 a 06). 

Fragmento:

04 <div property="review" typeof="Review"> Review:
05 <span property="re­vie­w­Ra­ti­ng" typeof="Rating">
06 <span property="ra­ti­n­g­Va­lue">5</span> -

Otras ca­ra­c­te­rí­s­ti­cas de la categoría “Review” son el título (property="name"), el autor (property=”author”), la fecha de pu­bli­ca­ción (property="da­te­Pu­bli­shed"), el texto mismo (property="re­vie­w­Bo­dy") y el editor (property="publisher"). Tanto el autor como el editor se pueden definir mediante un atributo typeof propio como categoría es­pe­cí­fi­ca (persona u or­ga­ni­za­ción) y reciben pro­pie­da­des como “name”.

Es evidente la co­m­ple­ji­dad del marcado con RDFa, un formato que, a la vez que permite una notación semántica ex­tre­ma­da­me­n­te detallada, requiere cla­ra­me­n­te mucho más esfuerzo a la hora de aplicarlo que formatos más modernos como JSON-LD.   

Ir al menú principal