¿Te ha gustado el artículo?
4
¿Te ha gustado el artículo?
4

Marcado con JSON-LD según schema.org

JSON-LD, acrónimo que recoge las siglas de JavaScript Object Notation for Linked Data, es un lenguaje de marcado basado en JavaScript (JSON) para integrar datos estructurados en páginas web. Pero, a diferencia de otros formatos de estructuración de datos como Microformatos, RDFa o microdatos, la anotación en este caso no se produce en el código fuente. En su lugar, los metadatos se implementan como un script separado del contenido web (HTML) haciendo uso de la escritura JSON y ampliándola con los “types” y “properties” tal como, por ejemplo, se describen en el proyecto schema.org.

Creada por el fundador de Digital Bazaar Manu Sporny, la especificación JSON-LD figura desde el 16 de enero de 2014 entre las recomendaciones oficiales del W3C.

¿Qué se entiende por JSON?

Con este término se define a la anotación de objetos con JavaScript y designa a un formato compacto para el intercambio de datos elaborados en forma de texto fácilmente interpretable (tanto por personas como por máquinas). Este formato de datos es una derivación de JavaScript, por lo que, en general, se considera que un documento JSON válido ha de ser a la vez un archivo de Java. Pero en realidad, JSON se puede aplicar en cualquier plataforma independientemente del lenguaje de programación. Como formato para la serialización, JSON suele aplicarse en la transferencia y almacenamiento de datos estructurados en aplicaciones web y aplicaciones móviles.

La sintaxis de un objeto JSON se compone fundamentalmente de pares nombre-valor separados por dos puntos:

Sintaxis JSON:

{
"name": "Manu Sporny",
"homepage": "http://manu.sporny.org/about/",
}

En el primer fragmento de texto se incluyen los vocablos “Manu Sporny”. Una persona que los lea entiende que esta secuencia de letras, por el contexto, definen a un nombre, y que el enlace conduce a la página web del desarrollador del JSON-LD. En cambio, los navegadores y los robots de los buscadores necesitan metadatos que les ayuden a establecer relaciones semánticas. Esto es lo que ofrece JSON en forma de pares nombre-valor. El ejemplo mostrado arriba muestra los dos elementos “name” y “homepage” con sus respectivos valores. Un programa que interpreta una página con este objeto JSON puede identificar de esta manera “Manu Sporny” como nombre y “http://manu.sporny.org/about/” como página web principal.

Linked Data (LD)

Mientras que la comprensión de significados dentro de una página con JSON se realiza sin problemas, no ocurre lo mismo en el análisis de datos JSON de diferentes páginas, donde se genera un problema de ambigüedad. Las máquinas examinan generalmente una gran variedad de páginas web y evalúan la información que extraen de ellas en bases de datos. Pero en el código de ejemplo que usamos arriba no es fácil descifrar si los elementos nominales “name” y “homepage” siempre aparecen en la misma relación semántica. Para excluir ambivalencias, JSON-LD completa la clásica anotación JSON con un elemento que aporte contexto, esto es, un esquema o tipo (type). Esto sucede sobre la base de los datos enlazados o linked data (LD), que podríamos definir como datos libremente disponibles en Internet a los que se puede acceder por URL (Uniform Resource Identifier). En su página web homónima, la iniciativa schema.org pone a disposición un completo set de esquemas para la estructuración de datos que soporta el formato JSON-LD, aunque este no se encuentra ligado a ningún vocabulario especial.

Si añadimos el correspondiente elemento de contexto al ejemplo anterior, este es el código resultante:

Sintaxis JSON ampliada con palabras clave

01  {
02    "@context" : "http://schema.org/",
03    "@type" : "Person",
04    "name" : "Manu Sporny",
05    "url" : "http://manu.sporny.org/about/"
06   }

Para poder enlazar datos, JSON-LD completa los pares valor-nombre de JSON con las llamadas palabras clave (keywords). Estas comienzan siempre por una @. En este ejemplo, las palabras clave @context y @type tienen especial importancia: mientras la primera define en la línea de código 02 el vocabulario en que se basa el script, en este caso schema.org, en la línea 03 la segunda hace referencia al tipo o esquema del que se trata.

Un programa que indexa este código puede identificar el elemento de texto “Manu Sporny” marcado como “name” como el nombre de una persona, como indica el tipo “Person” de schema.org. Los pares nombre-valor marcados como “name” y “url” se entienden como propiedades (properties) del esquema “Person”. El esquema de schema.org establece qué características pertenecen a cada tipo.

JSON-LD y los demás formatos de marcado

La estructuración de esquemas y propiedades en JSON-LD funciona de forma análoga a otros formatos de marcado semántico de contenidos web. El ejemplo anterior se puede transcribir sin problemas en un código fuente tanto con microdatos como mediante RDFa sin pérdidas de información:

Sintaxis de microdatos según schema.org:

<div itemtype="http://schema.org/Person">
  <span itemprop="name">Manu Sporny</span>
  <span itemprop="url">http://manu.sporny.org/about/</span>
</div>

Sintaxis de RDFa según schema.org:

<div vocab="http://schema.org/" typeof="Person">
  <span property="name">Manu Sporny</span>
  <span property="url">http://manu.sporny.org/about/</span>
</div>

La gran ventaja que ofrece JSON-LD frente al resto de formatos es que los metadatos no se integran directamente en el código HTML (frontend, aquello visible para el usuario), sino que pueden ser implementados como script autónomo. Esto se realiza mediante una etiqueta script siguiendo el siguiente esquema:

Implementación de JSON-LD en HTML:

<script type="application/ld+json">
{
  JSON-LD
}
</script>

Esta separación de texto HTML, por un lado, y anotación semántica, por otro, no solo favorece una mejor legibilidad del código, sino que una implementación de este tipo posibilita una generación dinámica independientemente del contenido visible (HTML). Así, JSON-LD permite insertar metadatos a través del backend, extraerlos de una base de datos y generarlos automáticamente mediante una plantilla. Gracias a esto, es posible una anotación semántica sencilla también para contenidos web dinámicos que demandan cada vez más espacio en Internet.

Sin embargo, JSON-LD no ha podido aún desbancar a los otros formatos para estructurar datos. Aunque el proyecto schema.org lo recomienda desde 2013, esta forma de integrar metadatos por script sigue sin ser soportado para todos los tipos de datos por los buscadores mayoritarios. Google, por ejemplo, recomienda JSON-LD para la creación de knowledge graphs y sitelinks search boxes, así como para la visualización de recetas y eventos. Sin embargo, para el resto de información el buscador prefiere lenguajes de marcado más clásicos como RDFa o Microdatos.

Uno de los motivos de estas preferencias es el alto potencial para spam de una anotación de contenidos no visibles, y es que una regla básica de la estructuración semántica acorde con los buscadores ha sido hasta ahora que solo se harán legibles para las máquinas los contenidos que también estén disponibles para los usuarios. JSON-LD, como notación en backend basada en script, rompe con esta tradición.


JSON-LD en la práctica

El gigante de entre los buscadores Google recomienda la anotación con JSON-LD para informar sobre eventos y espectáculos. En HTML este tipo de anuncios seguiría el siguiente esquema:

Información sobre un evento en HTML

<p>
  <a href="http://www.organizador.es/banda/2016-04-20-2000">Banda en Madrid</a>,<br>
  Fecha: 20.04.2016,<br>
  Acceso: 20:00,<br>
  <a href="http://www.organizador.es/eventos/banda/2016-04-20-2000/entradas">Entradas</a>
  Precio: 100,<br>
  Entradas disponibles: 1839,<br>
  <a href="http://www.lugardelevento-madrid.es/">Lugar del evento</a>,<br>
  Calle Ejemplo 1,<br>
  Madrid 08080,<br>
</p>

El tipo “Event” suele incluir información relativa a la fecha y la hora, al precio, al número de entradas disponibles, a la dirección de la localización, así como enlaces donde acceder a información adicional sobre el evento y su localización. Las personas que visiten la página tienen la capacidad de interpretar esta información desde un fragmento de texto, una tabla o cualquier otra forma de representación y entender las relaciones semánticas. Los crawlers, por el contrario, necesitan metadatos que les indiquen cómo han de procesar esta información. JSON-LD aporta estos metadatos en forma de un archivo (script) autónomo que se incluye en el código HTML en el lugar exacto.

Cómo marcar eventos con JSON-LD

Los detalles de un evento se pueden representar en un script autónomo de la siguiente manera con JSON-LD:

Script de JSON-LD para la estructuración de información sobre un evento:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Banda en Madrid",
  "startDate" : "2016-04-20T20:00",
  "url" : "http://www.organizador.es/eventos/banda /2016-04-20-2000",
  "offers" : {
    "@type": "AggregateOffer",
     "url" : "http://www.organizador.es/eventos/banda/2016-04-20-2000/tickets",
    "lowPrice" : "100",
    "offerCount" : "1839"
  },  
  "location" :
  {
    "@type" : "Place",
    "sameAs" : "http://www.lugardelevento-madrid.es/",
    "name" : "lugardelevento",
    "address" :
    {
      "@type" : "PostalAddress",
      "streetAddress" : "Calle Ejemplo 1",
      "addressLocality" : "Madrid",
      "postalCode" : "08080"
    }
  }
}
</script>

La etiqueta script de la línea 01 define todo el elemento hasta la línea 28 como un script del tipoapplication/ld+json”. Toda la información siguiente se dirige a programas capacitados para interpretar datos enlazados en formato JSON.

Líneas 03 y 04: en el primer nivel encontramos las palabras clave @context y @type con los valores respectivos “http://schema.org” y “Event”. El programa de indexación recibe la indicación de que la información que sigue se sitúa dentro del tipo o esquema “Event” de schema.org: se trata de características específicas del evento en cuestión que se muestran en forma de pares nombre-valor.

Líneas 05-28: el primer nivel lo constituyen las propiedades “name”, “startDate”, “url”, “offers” y “location”, a las que se otorgan los respectivos valores con datos sobre el evento. Un crawler puede, así, identificar la información “http://www.veranstalter.de/events/band/2016-04-20-2000” con total seguridad como URL del evento y “2016-04-20T20:00” como día y hora del espectáculo (startDate).

Esquema de propiedades (properties)

Como en el caso de RDFa y microdatos, en JSON-LD también es posible definir las propiedades como esquemas, y estas, a su vez, ser definidas más en detalle mediante propiedades más específicas. Un caso así lo encontramos en el ejemplo anterior, en el segundo nivel de las líneas 09, 16 y 21. 

En la línea 09 la propiedad de evento “offers” se convierte en el (sub)esquema “AggregateOffer” con las propiedades “url”, “lowPrice” y “offerCount:

"offers": {
"@type": "AggregateOffer",
"url" : "http://www.organizador.es/eventos/banda/2016-04-20-2000/tickets",
"lowPrice": "100",
"offerCount": "1839"
,  

La propiedad de evento “location” en la línea 14 se define como el esquema “place”, especificada a su vez mediante las características “name” y “address”.

En la línea 21, encontramos una anidación en tercer nivel: la propiedad “address”, propiedad a su vez del (sub)esquema “Place”, se convierte en el esquema “PostalAddress”, definido en detalle entonces con las propiedades “streetAddress”, “addressLocality” y “postalCode”.

Revisión de scripts JSON-LD

Mediante la anidación de esquemas, subesquemas y propiedades se obtienen, a menudo, códigos de gran complejidad. Sin embargo, la división entre HTML y la anotación semántica mediante Java procura claramente una mejor legibilidad frente a otros formatos como los mencionados RDFa o microdatos, que se sirven de la anotación en código fuente. Para evitar fallos en la programación, Google ofrece la posibilidad de validar de forma gratuita los scripts en la Structured Data Testing Tool.

JavaScript HTML