JSON-LD la alternativa a los microdatos para el marcado con schema.org

JSON-LD_-_JSON_for_Linking_Data

Si cada vez que implementas Rich Snnipets usando RDFa o microdatos para marcar HTML con schema.org preferirías que la espada de un Lannister te atravesara, pues prepárate para descubrir a un nuevo protocolo que definitivamente se convertirá en referente: JSON-LD.

Desde hace solo unos pocos meses tenemos una nueva forma de insertar datos estructurados en nuestra web, esta nueva criatura se llama JSON-LD (JSON for Linked Data) que nos permite poder comunicarnos mejor con los buscadores entre otras muchas cosas que intentaré explicar en este post.

A día de hoy podíamos utilizar los diccionarios de schema.org únicamente de 2 formas o bien utilizando RDFa o bien microdatos, una forma de marcado creada aprovechando las ventajas de HTML5.

Google anunció que tanto RDFa como los microdatos que serán integrados en sus resultados de Knowledge Graph a lo que ahora se va a unir JSON-LD

Vamos a empezar desde el principio…

¿Qué es Linked Data?
Son algo así como ontologías para máquinas y describen un método de publicación de datos estructurados para que puedan ser interconectados entre sí tanto dentro de un solo site o entre diferentes websites.

¿Qué es schema.org?
Schema.org es un diccionario creado en asociación con los principales buscadores para buscar entre otras cosas un standard común, existen otros diccionarios como data-vocabulary.org pero normalmente solemos hablar de schema.org por 2 cosas fundamentalmente, cuenta con un gran número de elementos o entidades para poder marcar y por qué Google recomienda el uso de schema.org frente a otros.

¿Qué es JSON-LD?
JSON-LD es un formato de Linked Data ligero. Es sencillo de escribir y leer a la hora de su implantación. Se basa como su nombre indica en JSON y proporciona una manera de interoperar a escala Web. JSON-LD es un formato de datos ideal para los entornos de programación, servicios Web REST y bases de datos no estructurados como CouchDB y MongoDB.

El mayor inconveniente a la hora de marcar datos estructurados con microdatos es su implantación ya que la definición del elemento se realiza dentro de las etiquetas HTML, lo que puede ser complicado si debemos tocar muchas partes del código.

JSON-ld soluciona este problema de una forma muy interesante, introduciendo un script en un solo lugar sin mezclarlo con el código HTML, de una forma “limpia”, lo que nos va a facilitar la forma de poder crear Rich Snnipets y así poder hacer nuestros resultados mas atractivos en la las SERPs

Google_Structured_Data_Testing_Tool

Esto viene a ser una ayuda más al SEO, y me aventuro un poco más, tengo la sensación de que esta nueva de crear datos estructurados va a permitir algo que no ha sido fácil con los microdatos, la creación de plugins para WordPress y otros CMS populares como Magento o Prestashop.

El W3C recomienda éste en este documento el formato JSON-LD desde el 16 de enero de 2014 y Google lo adopta desde hace unos meses como alternativa a los microdatos para poder implementarlo en sitios web, aunque ahora mismo la información al respecto es escasa, se puede encontrar en las páginas de soporte de Google con algún ejemplo práctico, eso sí, en la documentación dice que lo mejor es que implementes un solo método, vamos o microdatos o JSON-LD, y en la letra pequeña de todo esto Google prefiere que utilicemos microdatos en lugar de JSON-LD pero creo que se inclinará la balanza hacia éste último en muy poco tiempo.

Veamos un ejemplo, tenemos el siguiente evento etiquetado con html:

<div>¡Ven a escuchar a Paradise Lost en directo en su
concierto del 6 de julio de 2014 en el fantástico Palacio de deportes de Madrid!</div>

Microdatos
Este es el mismo HTML con marcado por microdatos:

<div itemscope itemtype="http://schema.org/Event">
  ¡Ven a escuchar a
  <span itemprop="name">Paradise Lost</span>
  en directo en su concierto del
  <span itemprop="startDate"
  content="2013-07-06>6 de julio de, 2014</span>
  en el fantástico teatro
  <span itemprop="location" itemscope
    itemtype="http://schema.org/Place">
    <span itemprop="name">Palacio de deportes de Madrid</span>!
  </span>
</div>

JSON-LD

JSON-LD usa un objeto JavaScript en la página HTML para definir los datos. Por ejemplo: así es como se describe un evento con JSON-LD:

<script type="application/ld+json">// <![CDATA[
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Concierto de Paradise Lost",
  "startDate" : "2014-07-06",
  "location" : {
    "@type" : "Place",
    "name" : "Palacio de deportes de Madrid"
  }
}
// ]]></script>

Como podéis ver JSON-LD se implementa en un script y no interfiere con el código HTML lo que facilita tanto su implantación como su modificación en el caso de que se necesite y abre un abanico de posibilidades a futuro por su sencillez.

Esto es una gran oportunidad para los SEOs especialmente para los más técnicos a la hora de implementar marcados para resaltar sus resultados en Google, incluso permitiendo implementarlos sin necesidad de HTML o en casos complicados de agregar marcado, como cuando el site utiliza AJAX.

Google proporciona 2 herramientas nuevas para la implantación de este protocolo, la primera es un asistente para el marcado tanto en JSON-LD como en microdatos de diferentes elementos a partir de un HTML ( Asistente de marcado de datos estructurados ) y la segunda es un validador como no podía ser de otra forma aunque limitado hasta ahora, en este caso solo para eventos y para contactos empresariales.

Pero esto no se queda ahí, va un paso mas allá, Google esta trabajando en GMAIL para que pueda leer e interpretar tanto microdatos como JSON-LD para poder añadir nuevas funcionalidades como por ejemplo añadir botones para realizar acciones directamente desde la bandeja de entrada, como por ejemplo: Obtener información sobre reservas, cancelarlas o realizar un checkin, mostrar información sobre eventos, en el sector del e-commerce posibilita opciones como confirmar pedidos, insertar un botón para abrir la página de seguimiento y todo esto desde la bandeja de entrada..

Pero eso creo que es tan amplio que merece un post aparte ;), ¿Pinta bien no?

  • JDavid

    Lo que más destacaría es la sencillez de implementación, rápido, limpio y sin interferir en el html. Gracias por la info

  • Javier Martinez Seco

    Sin duda que es un gran salto. Estoy contigo en el tema del desarrollo de plugins, ahora será más simple y todo bien organizado :)

    Gran artículo Pedro!

  • Gracias por levantar la liebre Pedro, ahora hablaremos por fin de “la capa semántica”

  • Gracias por la información. Muy, muy interesante. Sería increíble que se empezaran a crear plugins de WordPress para el microformateo.

  • Rober Ferreras

    Buena info Pedro, me quedé con ganas de más despues de la intro en cw14….
    Saludetes :)

  • Esperanza Muñoz

    Gracias Pedro, genial !!

    Una duda…
    En la herramienta de Google recomienda que se añada el JSON en el encabezado de tu html, al ser un js ¿no sería mejor añadirlos todos en un archivo externo y hacer las llamadas pertinentes? ¿O mejor poner cada script en su página correspondiente?
    ¿Cómo lo ves?

    gracias de antemano !!

  • Miguel Angel Morte

    Hola Pedro, muy buen artículo.
    Tengo una duda, ¿el marcado del horario se haría en español o en inglés?
    Por ejemplo, cual sería correcto (o la mejor opción):
    “openingHours”: [
    “Mo-Fr 10:00-14:00”,
    “Mo-Fr 17:00-20:00”,
    ]

    o esta otra
    “openingHours”: [
    “Lu-Vi 10:00-14:00”,
    “Lu-Vi 17:00-20:00”,
    ]

  • Ojalá se imponga, y google pase de los Microdatos, ya que a veces es mision imposible adaptarlos bien al html, sin que casque un estilo.
    Excelente exposición. Gracias y Enhorabuena.

  • Eso pasa porque no se conoce bien el código. Yo lo hago a mano y nunca he tenido problemas.

  • Cristian Borrego

    Gracias por el artículo Pedro. Ahora sabemos que hay alternativas, y me arriesgo a decir que mejores, para la implementación de microformatos que me parecen una obligación implenetar en las webs (sobretodo para empresa) a la hora de decirle a Gogole quienes somos, donde estamos y donde queremos que nos ponga. Gracias!

    ;)

  • Excelente artículo, muy explicativo y conciso. Pienso que todo irá avanzando a que los datos estructurados se implementen de una manera más limpia como con JSON-LD. También simplifica mucho en el área del desarrollo, como bien dices.

    Muy explicativo Pedro.

  • Consultor Seo

    Muy buen post y muy buena información. Se agradece encontrar información actualizada al respecto. No es fácil encontrar “chicha” sobre este tema! Muchas gracias!