Données structurées au format JSON-LD

Fabrice Webmastering 16 mn

Semantic Web - JSON-LD
Les données structurées sont une des parties du « web sémantique » qui permet l’échange d’informations entre deux machines. Dans le cas qui nous intéresse, à savoir les sites internet, les géants de la recherche (Google, Bing et Yahoo) se sont mis d’accord pour utiliser un vocabulaire commun : schema.org (« vocabulaire commun pour la description des données sur le Web »).
Google l’utilise déjà (dans certains cas !) dans les extraits enrichis / rich snippet : tests et avis de produits, recettes, évènements, fiches produits, etc. Attention à bien respecter les recommandations !

Voici un exemple de l’utilisation faite par Google avec la recherche « Panasonic Lumix TZ100 » où la note et le nom du testeur ont été ajoutés :
Exemple d’extrait enrichi avec Google

Il y a fort à parier que ce système d’échange de données va être de plus en plus fréquemment utilisé, notamment pour la collecte et l’agrégation de contenus.

Dans la pratique

La mise en pratique peut se faire principalement de deux manières : les Microdonnées et le format JSON-LD.

Microdonnées

Il s’agit d’un balisage spécifique du HTML, c’est assez facile à mettre en oeuvre, mais alourdi rapidement le code. De plus son implémentation sur un site existant nécessite de modifier l’intégralité des pages…
Exemple avec un extrait de code :


<div itemscope itemtype="http://schema.org/Restaurant">
	<p><span itemprop="name">Nom du restaurant</span><br>
		<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
			<span itemprop="streetAddress">1 rue de Paris</span><br>
			<span itemprop="postalCode">75000</span><br>
			<span itemprop="addressLocality">Paris</span><br>
		</span>
		<span itemprop="telephone">00 00 00 00</span>
	</p>
</div>

Le format JSON-LD

Cette fois les données sont « embarquées » dans un objet de type JavaScript et séparées du reste de la page. La maintenance dans le temps ainsi que la génération depuis une base de données sont plus aisés. C’est le format recommandé par Google !
Exemple de code :


<script type="application/ld+json">
{
	"@context": "http://schema.org/",
	"@type": "LocalBusiness",
	"name": "Agence web Adilade",
	"url": "https://www.adilade.fr/",
	"sameAs": ["https://twitter.com/adilade_web","https://plus.google.com/+AdiladeFr88/"]
}
</script>

Que peut-on mettre ?

À vrai dire, quasiment tout ce qui se trouve sur la page en question : depuis la galerie photo jusqu’au fil d’Ariane, les données d’une entreprise, les spécifications d’un article ou d’un produit, etc. Il suffit de regarder la hiérarchie complète sur le site schema.org. Dans la pratique, on se focalise sur les pages les plus importantes : fiche produits, page d’accueil, article de blog, etc.

Exemples concrets

Fiche produit

Principalement destinée aux sites e-commerce ou à la fiche produit d’un fabriquant, le type « Product » peut contenir de nombreuses informations : note du produit, conditionnement (dans l’exemple ci-après le produit est disponible en 115 et 230 grammes), prix ou gamme de prix, poids, dimensions, couleurs, catégories, distinctions (prix gagnés), code fabriquant, code EAN, etc.
Attention les unités de valeurs répondent à des normes spécifiques (prix, volume, poids, etc) : ici « GRM » correspond à grammes et « EUR » correspond à euro.


<script type="application/ld+json">
{
	"@context": "http://schema.org/",
  	"@type": "Product",
  	"name": "Nom du produit",
  	"image": "http://www.example.com/image-produit.jpg",
  	"description": "Description du produit.",
  	"brand": {
    	"@type": "Thing",
    	"name": "Marque du produit"
	},
	"aggregateRating": {
    	"@type": "AggregateRating",
    	"bestRating": "5",
    	"ratingValue": "4.6",
    	"ratingCount": "8"
	},
	"additionalProperty": {
		"@type": "PropertyValue",
		"name": "Pot",
		"value": ["115","230"],
		"unitCode": "GRM"
	},  
	"offers": {
    	"@type": "AggregateOffer",
    	"lowPrice": "3.50",
		"highPrice": "4.50",
		"priceCurrency": "EUR",
		"availability": "http://schema.org/InStock"
	}
}
</script>

Entreprise locale

Une entreprise sera catégorisée dans « LocalBusiness », à l’instar de « Organization » plutôt dédié aux grandes entreprises ou aux services publics.
Pour « LocalBusiness », il existe de très nombreuses sous-catégories spécifiques à chaque activité allant du fleuriste au restaurant en passant par le notaire ou le plombier. En plus des données de contact et de localisation de l’établissement, on peut ajouter des spécificités comme les horaires d’ouverture, la présence du WiFi ou le type de paiement accepté. Exemple concret avec des chambres d’hôtes :


<script type="application/ld+json">
{
	"@context": "http://schema.org/",
	"@type": "BedAndBreakfast",
	"name": "Le Haut Van",
	"url": "http://www.lehautvan.fr",
	"logo": "http://www.lehautvan.fr/lehautvan.png",
	"description": "Maison et tables d'hôtes dans les Vosges",
	"telephone": "0329527337",
	"address": {
		"@type": "PostalAddress",
		"streetAddress": "3, chemin de La Roche",
		"addressLocality": "Fraize",
		"postalCode": "88230",
		"addressCountry": "France"
	},
	"geo": {
		"@type":"GeoCoordinates",
		"latitude":"48.175171",
		"longitude":"7.004511",
		"elevation":"652"
	},
	"sameAs": ["https://www.facebook.com/Le-Haut-Van-Chambres-et-Tables-dHôtes-1782505855328390/","https://www.instagram.com/lehautvan/"],
	"paymentAccepted":["Cach","check"],
	"petsAllowed": "False",
	"smokingAllowed": "False",
	"amenityFeature": {
		"@type" : "LocationFeatureSpecification", 
		"value": "True", 
		"name": "WiFi"
		}
	}
}
</script>

Article

Pour les articles, plusieurs types sont possibles : « Article », « TechArticle », « CreativeWork », « NewsArticle », « BlogPosting », etc. Dans le cadre d’un « Article » la headline est limitée à 110 caractères.
Évidemment, il est possible d’ajouter de très nombreuses informations : pagination, nombre de caractères, section/catégorie, note, commentaires, etc.


<script type="application/ld+json">
{
	"@context": "http://schema.org/",
	"@type": "TechArticle",
	"name": "Knacss + Sass : le CSS facilité",
	"headline": "Knacss + Sass : la combinaison de ces deux outils facilite grandement le travail de conception et de...",	
	"description": "Knacss + Sass : la combinaison de ces deux outils facilite grandement le travail de conception et de design des sites internet. Petit tour d'horizon des fonctionnalités (la base en somme !).",	
	"datePublished": "2015-11-10T06:06:45+00:00",
	"dateModified": "2016-10-03T13:49:54+00:00",
	"license": "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr",			
	"url": "https://www.adilade.fr/blog/knacss-sass-css-facilite/",
	"image": {
		"@type": "ImageObject",
		"url": "https://www.adilade.fr/blog/media/knacss-sass-1320x660.png",
		"width": "1320",
		"height": "660"
	},
	"mainEntityOfPage": {
		"@type": "WebPage",
		"@id": "https://www.adilade.fr/blog/knacss-sass-css-facilite/"
	},	
	"publisher": {
		"@type": "LocalBusiness",
		"url": "https://www.adilade.fr/",
		"name": "Agence web Adilade",
		"image": {
			"@type":"ImageObject",
			"url":"https://www.adilade.fr/adilade.png",
			"width":"1200",
			"height":"630"
		}
	},
	"author": {
		"@type": "Person",
		"name": "Antoine Fabrice"
	}	
}
</script>

Ressources