Los datos estructurados son cada vez más importantes para el SEO. Los motores de búsqueda como Google pueden leer estos datos y utilizarlos para enriquecer los resultados de los motores de búsqueda (rich snippets) o para resultados especiales, como el Gráfico de conocimientos.
Para aprovecharse de esto, debes etiquetar tu contenido con marcas de revisión. JSON-LD ofrece la posibilidad de marcar datos estructurados de forma sencilla. En este tutorial, aprenderás todo lo necesario optimizar tu contenido web para Google.
La abreviatura JSON significa "JavaScript Object Notation". Se trata de un formato de datos especial derivado de JavaScript que permite el intercambio de información basada en texto. Este formato puede ser fácilmente leído y procesado por personas y máquinas. Como variante de JavaScript, JSON es en sí mismo JavaScript y debería almacenarse en el código fuente.
Una gran ventaja de JSON es que el formato de datos se puede utilizar en diferentes plataformas. Hoy en día, se utiliza principalmente para la transferencia y almacenamiento de datos estructurados. Asimismo, se pueden utilizar aplicaciones web o usos web con objetos JSON.
JSON se caracteriza por su sintaxis, que consiste principalmente en pares nombre-valor. Un objeto se marca con corchetes de esquema ({}). Dentro del objeto se pueden definir otras propiedades individuales. Para cada propiedad hay un valor separado por dos puntos. Esta es la razón principal por la que JSON se ha vuelto cada vez más popular en los últimos años, ya que su estructura es más simple que XML.
JSON-LD, por el contrario, significa "JavaScript Object Notation for Linked Data". Con JSON-LD, los datos estructurados pueden ser incorporados en una sola web. Desde 2010, JSON-LD dispone de una notación estándar del W3C. La especificación del lenguaje de marcado fue desarrollada por Manu Sporny.
A diferencia de otros métodos de marcado para datos estructurados como microformatos, RDFa y microdatos, no se designan directamente en el código fuente, sino que las metatareas se separan del contenido real del sitio web a través de un script.
JSON-LD se basa en la notación JSON, ampliándose a "tipos" y "propiedades" para transferir datos o datos enlazados.
JSON-LD puede ser leído por los motores de búsqueda más comunes, y Gmail puede procesar los datos de JSON-LD.
Cuando se implementa JSON en una web, estos datos se pueden organizar simplemente dentro del sitio, porque el proveedor es siempre esta web. Sin embargo, si los motores de búsqueda leen varios datos marcados con JSON, esto puede conducir a interpretaciones y asignaciones incorrectas.
La ampliación de JSON a "Linked Data" (LD) garantiza que los datos estructurados puedan asignarse a una web. Para ello se añade el elemento "tipo". A través de este elemento, por ejemplo, se conecta la URL con el conjunto de datos. JSON-LD no tiene un vocabulario específico.
JSON-LD lista los elementos de una web y estructura estos datos. Éstos pueden entonces ser asignados claramente y leídos por un motor de búsqueda. Sobre la base de estos datos estructurados, los motores de búsqueda pueden mejorar y organizar mejor sus resultados de búsqueda.
Google sugiere insertar JSON-LD <head> en el área del documento HTML. Sin embargo, los motores de búsqueda también pueden leer en <body> los datos del segmento. Además, existe la posibilidad de que Google lea las etiquetas JSON-LD generadas dinámicamente a través del Google Tag Manager. En este artículo se describe detalladamente cómo funciona esto.
JSON-LD es una manera muy simple para generar datos estructurados. Estos datos con JSON-LD se pueden almacenar fácilmente en la el area <head> con la etiqueta <script> de un documento HTML. De esta manera, el fragmento de código se puede cargar por separado del código HTML. En comparación con otros markups, el peligro de errores es claramente menor.
Gracias a que el lenguaje de scripts es sencillo, no tendrás que depender de un programador para crear markups e incorporarlos a tu web.
Si ya utiliza datos JSON, podrás utilizar JSON-LD fácilmente.
Aquí puedes ver un fragmento de código JSON-LD:
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “Book”,
“name”: “XXL Guide for JSON-LD”,
“publisher”: “en.ryte.com”,
“inLanguage”: “English”,
“bookFormat”:
{
“@type”: “EBook”
},
“offers”:
{
“@type”: “Offer”,
“price”: “0,00”,
“priceCurrency”: “EUR”,
},
}
</script>
Explicación:
Este ejemplo muestra cómo JSON-LD está formado por pares de nombre-valor. Los valores específicos se reservan con el carácter @, por ejemplo para @context y @type. Estos valores son relevantes para los buscadores y son los que diferencian a JSON-LD de los datos JSON convencionales.
Al dar la URL en el segmento "context", los datos estructurados se conectan con una referencia mediante la cual se leen los datos. El motor de búsqueda es referido por la especificación adicional de @type en la URl completa http://schema.org/Book. De esta manera, se asegura que los datos estructurados contenidos en el script se obtienen del vocabulario de schema.org.
Para que el motor de búsqueda entienda que hay un archivo JSON-LD, el script debe contener este elemento:
<script type=”application/ld+json”>
{
…
}
</script>
En esta breve secuencia, queda claro cómo se crean los datos JSON-LD y cómo se crean como pares nombre-valor. Es fácil determinar el valor de los pares respectivos, incluso sin un aviso claro. En este ejemplo, está claro que "name" indica el nombre del objeto y "homepage", la home de la respectiva web. Para los motores de búsqueda, sin embargo, se debe crear la referencia necesaria. Por lo tanto, los pares nombre-valor correspondientes se crean con JSON-LD.
{
“name”: “Mr. Ryte”,
“homepage”: “http://es.ryte.com/”,
}
En el siguiente ejemplo, los datos JSON se enriquecen con datos enlazados. Se trata de las llamadas palabras clave que se insertan en el código. Los datos adicionales se insertan con el carácter @.
Las palabras clave más importantes en este caso son @context y @type.
{
“@context” : “http://schema.org/”,
“@type” : “Person”,
“name” : “Mr. Ryte”,
“url” : “http://es.ryte.com/”
}
@context: Con este elemento, se hace referencia al vocabulario que se relaciona con todo el guión. En el ejemplo anterior, la referencia es schema.org.
@type: Este elemento designa el plan que se utiliza dentro de la referencia. Dentro de este plan, además, las cualidades individuales pueden constituirse como pares nombre-valor. Estas se llaman propiedades. En el ejemplo dado aquí, "nombre" y "url" son las propiedades del patrón "persona". Con schema.org, se pueden utilizar todo tipo de propiedades y patrones.
Con JSON-LD también se pueden crear las llamadas "entidades anidadas". Se trata de propiedades con varios "types" que aparecen dentro de un conjunto de datos JSON-LD. Por lo tanto, cada nueva propiedad debe ser definida de nuevo. Para hacer esto, se coloca una coma antes del último corchete (,}).
Consejo 1
Considera cómo los tipos y propiedades con schema.org distinguen entre mayúsculas y minúsculas y cuáles tienen en cuenta las letras minúsculas y mayúsculas.
Consejo 2
al crear datos estructurados, asegúrate de utilizar todas las propiedades disponibles a través de schema.org para el type elegido.
Por lo tanto, se pueden añadir propiedades simples a JSON-LD:
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “Book”,
“name”: “XXL Guide for JSON LD”,
“publisher”: “Ryte.com”,
}
</script>
Aquí podrás crear "entidades anidadas". El ejemplo anterior se completa ahora con más detalles que se relacionan con el patrón de "ofertas" de acuerdo con schema.org. Como se describió anteriormente, la propiedad adicional está separada de la propiedad incorporada. De este modo, se crea una jerarquía dentro de la palabra clave "type".
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “Book”,
“name”: “XXL Guide for JSON LD”,
“publisher”: “Ryte.com”,
“offers”:
{
“@type”: “Offer”,
“price”: “0,00”,
“priceCurrency”: “EUR”,
},
}
</script>
JSON-LD utiliza la misma disposición para los esquemas que otros formatos que distinguen los datos estructurados.
{
“@context” : “http://schema.org/”,
“@type” : “Person”,
“name” : “Mr. Ryte”,
“url” : “http://es.ryte.com/”
}
<div itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>Mr. Ryte</span>
<span itemprop=”url”>http://es.ryte.com</span>
</div>
<div vocab=”http://schema.org/” typeof=”Person”>
<span property=”name”>Mr. Ryte</span>
<span property=”url”>http://es.ryte.com</span>
</div>
Los tres markups pueden ser leídos por los motores de búsqueda. La ventaja de JSON-LD es que no tiene que estar implementado en el código fuente HTML de la web.
Google recomienda que los webmasters, por ejemplo, distingan los eventos con JSON-LD.
En el código HTML, un evento puede aparecer como:
<p>
<a href=”http://www.concert_site.com/Band/2017-01-01″>Newcomer band in Munich</a>,<br>
Date: 01.01.2017,<br>
Time: 20:00,<br>
<a href=”http://www.concert_site.com/Band/2017-01-01/tickets”>Tickets</a>
Price: 99<br>
Tickets available: 134,<br>
<a href=”http://www.location.com/”>eventlocation</a>,<br>
Partystreet 1,<br>
89000 Munich,<br>
</p>
Con JSON-LD, todos los detalles de este elemento pueden ser entregados a Google como datos estructurados. Así, el contenido de las propiedades puede ser cargado dinámicamente y almacenado como un script. Al igual que con otros markups, no es necesario que los datos existan realmente en el código HTML.
<script type=”application/ld+json”>
{
“@context” : “http://schema.org”,
“@type” : “Event”,
“name” : “Newcomer band in Munich”,
“startDate” : “2017-01-01T20:00”,
“url” : “http://www.concert_site.com/Band/2017-01-01”,
“offers” : {
“@type”: “AggregateOffer”,
“url” : “http://www.concert_site.com/Band/2017-01-01/tickets”,
“lowPrice” : “99”,
“offerCount” : “134”
},
“location” :
{
“@type” : “Place”,
“sameAs” : “http://www.location.com/”,
“name” : “Event Location”,
“address” :
{
“@type” : “PostalAddress”,
“streetAddress” : “Partystreet 1”,
“addressLocality” : “Munich”,
“postalCode” : “89000”
}
}
}
</script>
JSON-LD puede tener de elementos de código muy simples. Sin embargo, si se incorporan elementos entrelazados, el código se volverá complejo muy rápidamente y pueden surgir errores. Para comprobar si tu código JSON-LD funciona realmente y si los motores de búsqueda lo leen correctamente, Google ofrece la herramienta de pruebas de datos estructurados.
En la herramienta, selecciona: comprobar un fragmento de código. Por último, haz clic en "Fetch and validate".
Si insertas el código de ejemplo desde arriba, obtendrás los siguiente resultados:
Figura 1: Herramienta de prueba de datos estructurados de Google.
Verás que Google no sólo muestra errores en el código JSON-LD, sino que también te avisa de las posibles propiedades que debería contener tu código.
Con JSON-LD puedes aumentar y mejorar la presencia de tu web en los SERPS de Google. Así, Google recomienda JSON-LD, por ejemplo, para aparecer en el Gráfico de Conocimiento de Google y para generar las llamadas "rich cards".
Ambos elementos están presentes en los SERPs y generalmente se muestran a través de los términos de búsqueda orgánicos regulares. Con la ayuda de JSON-LD, se puede aumentar la visibilidad de una web y, además, ganar más tráfico.
A través del uso de JSON-LD, se hace más fácil para los motores de búsqueda leer tu contenido web. Por un lado, los datos relevantes se transfieren de forma estructurada. Por otro lado, JSON-LD se subcontrata como script. De este modo, el código fuente se agiliza y Googlebot necesita menos tiempo para indexar tu sitio.
A pesar de estas ventajas, JSON-LD no es recomendado por Google para todas las marcas. Esto puede deberse a que la transferencia de datos estructurados por script es extremadamente vulnerable al spam. Si se utilizan microdatos convencionales o RDFa, sólo se puede marcar el código HTML disponible.
Debido a que las búsquedas del futuro se basarán cada vez más en el lenguaje, un marcado como JSON-LD es muy importante, porque el contenido web se puede hacer más legible para los motores de búsqueda a través de datos estructurados. Al mismo tiempo, este contenido designado se adapta perfectamente a las necesidades de búsqueda del usuario. Por lo tanto, si quieres estar preparado para las búsquedas de idiomas que cada vez se utilizan más en GoogleNow y en la búsqueda de Google para móviles, deberías comprometerte con los datos estructurados desde el principio. JSON-LD ofrece una oportunidad simple de hacerlo.
Lo fácil que te resultará implementar JSON-LD depende en gran medida de lo familiarizado que estés con el vocabulario de schema.org y de lo bien que domines la sintaxis JSON-LD.
1. Antes de comenzar, considera: ¿Qué quieres etiquetar con markup y qué objetivo tienes? De esta manera podrás evaluar mejor si el esfuerzo realmente valdrá la pena.
Asegúrate de que tu contenido pueda ser designado con el vocabulario de schema.org. Algunas propiedades pueden no tener sentido para tus objetivos. Así, por ejemplo, no es conveniente designar eventos si no son tuyos.
Y en cuanto a las metas: ¿Quieres alcanzar un objetivo particular de marketing? ¿O es sólo una primera prueba? Ten siempre en cuenta que el marcado ayuda a los motores de búsqueda a entender tu contenido central e importante de una manera estructurada. Consulta los markups que Google ya está utilizando y dónde están implementados.
2. Crea una lista con posibles propiedades y valores: Anota todos los pares nombre-valor que te gustaría marcar. Más tarde, comprueba si es posible o no marcar con schema.org.
3. Verifica las posibles fuentes para markups: Con JSON-LD, no tendrás que encontrar el camino de nuevo. Utiliza los recursos de Google para familiarizarte con el tema. Utiliza los ejemplos disponibles y modifícalos para tu objetivo final.
4. Utiliza typess de schema.org: En schema.org, hay muchos ejemplos de código diferentes para tipos y propiedades. Busca cuáles puedes usar.
5. Copia los elementos necesarios e introducelos en un editor: puedes simplemente copiar los ejemplos disponibles y adaptarlos a tu web. Asegúrate de insertar todas las etiquetas <script> necesarias.
6. Completa tu código con posibles propiedades incrustadas: Complementar las propiedades existentes con otras características.
7. Prueba tus fragmentos de código: para ello, utiliza la herramienta de pruebas de datos estructurados de Google.
8. Considera cómo debería implementarse el JSON-LD: Como una posibilidad muy simple, podrás insertar el código en el área de su sitio o utilizar la plantilla. En este caso, tendría sentido utilizar los servicios de un desarrollador web.
Si no puedes validar tu fragmento de código JSON-LD con la herramienta de pruebas de Google, puede deberse a varios errores. Aquí encontrarás los más frecuentes:
A primera vista, JSON-LD puede parecer demasiado extenso y complejo para principiantes. Pero con JSON-LD, es más fácil generar datos estructurados para los buscadores que con otros métodos como microformatos o RDFa, ya que el código HTML con JSON-LD no tiene que ser designado directamente.
En cualquier caso, debes comprobar si los markups tienen sentido para su presencia en la web. Porque si funciona, puedes ser presentado como una Rich Card o en el Gráfico de Conocimiento de Google. En cualquier caso, en términos de otros asistentes de búsqueda digital, como Google Now u otros, los datos estructurados son un elemento importante para el futuro de la búsqueda.
Documentación del W3C de JSON-LD:
https://www.w3.org/TR/json-ld/#general-terminology
Encuentra y soluciona errores escondidos en tu web con Ryte
Escrito el 06.08.2018 por Clara Rubio.
Clara es una apasionada del mundo digital y la tecnología. Desde siempre ha estado interesada en en estos campos, llevándolos por bandera en su vida profesional y personal. Como redactora, escribirá sobre numerosos temas, incluyendo las novedades del mundo SEO y de cómo Ryte te ayudará en tu camino al éxito digital.