Présentation de votre site avec JSON-LD d’après schema.org

JSON-LD (JavaScript Object Notation for Linked Data ou Notation Objet issue de JavaScript pour le Web des données) est une méthode basée sur JSPON dont le but est d’ajouter des données structurées dans un site Internet.  Au contraire des autres formats servant à l’organisation de données comme les microformats, RDFa ou les microdonnées, la balise n’est pas caractérisée en tant qu’annotation de texte source. Au lieu de cela, les métadonnées sont implémentées sous la forme d’un script séparément de la page Web. JSON-LD sert donc de Notation JavaScript Object et l’élargit aux propriétés « types » et « properties » tel que dans le projet schema.org. La spécification JSON-LD a été introduite par le fondateur du Digital Bazaar Manu Sporny et est depuis le 16 janvier 2014 la recommandation officielle du consortium W3C. 

JSON, c’est quoi exactement ?

JSON est l’abréviation de JavaScript Object Notation et décrit un format compact servant à l’échange de données. Il est noté sous forme de texte et peut être traité tant par les utilisateurs que par les machines. Ce format de données est un dérivé de JavaScript, ce qui implique qu’un document JSON en cours est toujours sous format JavaScript. Néanmoins, JSON est utilisé indépendamment du langage de programmation en étant multiplateformes. En tant que format de données pour la sérialisation, JSON intervient dans le transfert et la sauvegarde de données structurées pour les applications sur le Web et sur les mobiles. La syntaxe d’un objet JSON consiste essentiellement en couples de valeurs de noms séparés par deux points.

Syntaxe JSON :

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

L’extrait précédent comporte le couple de mots « Manu Sporny ». Un internaute pourra comprendre facilement que cette séquence fait référence à un nom et que l’hyperlien qui suit est un renvoi au site Internet du développeur de JSON-LD. En revanche, les programmes tels que les navigateurs ou les robots d’indexation ont besoin de métadonnées pour s’imaginer un tel lien. C’est ce que JSON propose sous la forme de paires nom/valeur(name-value pairs). L’exemple de code ci-dessus illustre les deux éléments noms « name » et « homepage » avec leurs valeurs respectives. Un programme qui lit un site Internet avec un objet JSON est capable d’identifier l’association de mots « Many Sporny » comme un nom et « http://manu.sporny.org/about/ » comme un site Internet.

Web des données

Tandis qu’une balise avec JSON fonctionne sans peine à l’intérieur d’un site Internet, l’analyse de données JSON de différents sites Internet peut rapidement conduire à un problème d’ambiguïté. En règle générale, les programmes analysent de manière syntaxique un certain nombre de sites Internet et évaluent les informations acquises dans les bases de données. En se basant sur l’exemple de code ci-dessus, il n’est néanmoins pas possible de s’assurer que les éléments noms « name » et « homepage » soient toujours compris tel quel. Afin d’éviter les sous-entendus, JSON-LD complète la notation JSON classique par un élément de contexte tel qu’un schéma ou plus exactement un « type ». Ce processus a lieu grâce au Web de données (Linked Data). Il s’agit ici de données librement disponibles sur Internet qui peuvent être chargées via un URI (l'anglais Uniform Resource Identifier, soit littéralement identifiant uniforme de ressource). Le projet schema.orgpropose un combinaison standard de schémas servant à structurer des données. Néanmoins, JSON-LD ne se base sur aucun vocabulaire particulier. 

Pour compléter l’élément contexte correspondant, il est possible d’utiliser le code suivant pour l’exemple que nous avons proposé plus haut :

La syntaxe de JSON complété avec des mots-clés :

{
  "@context" : "http://schema.org/",
  "@type" : "Person",
  "name" : "Manu Sporny",
  "url" : "http://manu.sporny.org/about/"
 }

Pour préparer JSON pour le Web des données, JSON-LD complète la paire classique nom/valeur par des mots-clés. Ces derniers sont introduits avec le signe arobase @. Les mots-clés @context et @type sont cruciaux. Tandis que @context de la ligne 02 définit le vocabulaire sous-jacent au script (ici schema.org), @type indique sur la ligne 03 quel est le schéma (quel type de données) dont il est question. Un programme qui analyse ce code d’exemple de manière sémantique, peut identifier l’élément texte « Manu Sporny » en tant qu’un nom de personne conformément au type de données « personne » d’après schema.org. Les paires nom/valeur introduites par « name » et « url » sont traitées en tant que propriétés (properties) du schéma « person ». C’est le vocabulaire sous-jacent qui fixe les propriétés qui peuvent être classées dans un schéma.

JSON-LD comparé aux autres formats de données

Les schémas et les propriétés sont classés dans le modèle JSON-LD de la même manière que les autres formats servant à la création de balises sémantiques des pages Internet. Converti en une annotation de texte source, le script exemple est défini sans perte d’informations également via microdonnées ou RDFa en suivant le modèle de schema.org :

Synstaxe de microdonnées d’après schema.org :

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

Syntaxe RDFa d’après 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>

L’avantage premier de JSON-LD face aux formats concurrents est que les métadonnées ne doivent pas être directement intégrées dans le code HTML mais peuvent être implémentées séparément en tant que script à l’endroit voulu. Cela donne le schéma suivant :

Implémentation de JSON-LD dans HTML :

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

La séparation stricte de HTML et de l’annotation sémantique ne pointe pas seulement une lecture nettement meilleure du texte source. En effet, une implémentation de ce genre permet également une génération dynamique et ce indépendamment de son contenu visible. Sur JSON-LD, les métadonnées peuvent également être traitées via le back-end, être lues à partir d’une base de données et être générées automatiquement par Template. Cela permet également d’avoir une annotation sémantique agréable pour les contenus Web dynamique qui prennent toujours plus de place sur Internet. Cependant, JSON-LD n’a pour l’instant pas encore réussi à devancer les autres formats servant à la structuration de données. Déjà en 2013, le projet schema.org a considéré JSON-LD comme l’un des formats de données les plus utilisés, alors que l’intégration de métadonnées en se basant sur les scripts n’a été pour l’instant pris en charge que pour un certain nombre de types de données. Google recommande donc JSON-LD par exemple pour le Knowledge Graph et le Sitelinks Search Box mais aussi pour les balises de recettes voire d’évènements. En ce qui concerne les types de données restants, le leader du marché renvoie aux annotations plus classiques via RDFa ou Microdata. On peut expliquer cela par la forte potentialité de spams qu’une balise avec des contenus non visuels peut apporter. Les annotations sémantiques qui sont conformes aux moteurs de recherche présentaient auparavant la règle fondamentale que seuls les contenus à disposition des internautes avaient pour obligation d’être lisibles par les machines. La balise basée sur le script avec JSON-LD casse cette tradition.


Application de JSON-LD

Le moteur de recherche Google recommande une balise par script avec JSON-LD pour les informations qui concernent des événements. En HTML, les données qui concernent les concerts et autres représentations artistiques ou sportives de toute sorte suivent le schéma suivant :

Informations d’évenements en HTML

<p>
  <a href="http://www.organisateur.fr/groupe/2016-04-20-2000">concert à Paris</a>,<br>
  Date: 20.04.2016,<br>
  Entrée: 20:00,<br>
  <a href="http://www.organisateur.fr/événements/groupe/2016-04-20-2000/billets">Billets</a>
  Prix: 100,<br>
  Billets disponibles: 1839,<br>
  <a href="http://www.salle-de-concert.fr/">salle-de-concert</a>,<br>
  exemple de rue 1,<br>
  75019 Paris,<br>
</p>

Les informations typiques des données « événement » sont la date, l’heure, le prix, le nombre de billets disponibles, l’adresse du lieu ainsi que les liens sur l’artiste voire sur l’endroit. Les internautes peuvent déceler le sens de ces informations, ce qui n’est néanmoins pas le cas des moteurs de recherche ou des robots d’indexation qui ont, quant à eux, besoin de métadonnées contenant des recommandations sur comment agencer et traiter ces informations. JSON-LD livre ces dernières sous la forme d’un script qui est inséré à un emplacement quelconque du code source HTML tout en étant séparé de son contenu. 

Indiquer un événement avec JSON-LD

Dans un script séparé, communiquez les détails de votre événement sous format JSON-LD comme affiché ci-dessous :

Script JSON-LD pour une balise qui contient des informations sur un événement :

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Concert à Paris",
  "startDate" : "2016-04-20T20:00",
  "url" : "http://www.organisateur.fr/événements/groupe/2016-04-20-2000",
  "offers" : {
    "@type": "AggregateOffer",
     "url" : "http://www.organisateur.fr/événements/groupe/2016-04-20-2000/billets",
    "lowPrice" : "100",
    "offerCount" : "1839"
  },
  "location" :
  {
    "@type" : "Place",
    "sameAs" : "http://www.salle-de-concert.fr/",
    "name" : "sale de concert",
    "address" :
    {
      "@type" : "PostalAddress",
      "streetAddress" : "exemple de rue 1",
      "addressLocality" : "Paris",
      "postalCode" : "75019"
    }
  }
}
</script>

La balise de script de la ligne 01 définit l’élément jusqu’à la ligne 28 en tant que script du type « application/ld+json ». Les informationsqui suivent s’adressent aux programmes qui peuvent lire le Web des données au format JSON. Au premier niveau, on trouve les mots-clés @context et @type avec les valeurs « http://schema.org » et « event » (lignes 03 et 04). Il est ici communiqué à un programme d’analyse sémantique que les informations suivantes sont classées dans le schéma « event » d’après le projet schema.org. Il s’agit également des propriétés spécifiques de l’événement en question. Ces dernières sont représentées sous la forme de couples nom/valeur. Au premier niveau, on peut trouver les propriétés « name, « startDate », « url », « offers » et « location », qui transforment les informations de l’événement en valeurs. Un moteur de recherche ou un robot d’indexation peut identifier sans problème l’information « http://www.organisateur.fr/événements/groupe/2016-04-20-2000 » comme l’URL de l’événement dont il est question. Il est également en mesure de reconnaître « 2016-04-20-2000 » comme la date et l’horaire de l’événement.

Propriétés (properties) en tant que schémas

De la même manière que pour RDFa et les microdonnées, dans le format JSON-LD, il est possible de définir des propriétés en tant que schémas et de les préciser via des propriétés spécifiques. Un tel cas se trouve par exemple au deuxième niveau aux lignes 09, 16 et 21. Ici, l’attribut de l’événement « offers » est considéré comme un sous-schéma « AggregateOffer » avec les propriétés « url, « lowprice » et « offerCount » :

"offers": {
    "@type": "AggregateOffer",
     "url" : "http://www.organisateur.fr/événements/groupe/2016-04-20-2000/billets",
    "lowPrice": "100",
    "offerCount": "1839"
}

La propriété de l’évènement « location » peut être déterminée comme un schéma « place » qui est mieux spécifié via « name » et « address ». Dans la ligne 21, on tombe sur une imbrication au troisième niveau. Ici la propriété « address », soit un attribut du sous-schéma « place », est affectée au schéma « postalAddress » qui est mieux déterminé avec les propriétés « streetAddress », « adressLocality » et « postalCode ». 

Tester les scripts JSON-LD

C’est grâce à l’imbrication des schémas, des sous-schémas et des propriétés que les scripts complexes de JSON-LD sont possibles. La séparation des balises HTML et sémantiques permet de faciliter la lecture par rapport aux formats comparables tels que RDFa ou Microdata, qui s’appuient sur une annotation de texte source. Afin d’éviter les erreurs lors de la programmation, Google présente un outil gratuit de test des données structurées qui permet de valider des scripts JSON-LD servant à organiser des données.