Données structurées : explication et mise en place

par Julien

Source: pixabay.com

Schema.org est un projet open-source né en 2011 dont l’objectif est d’organiser des structures de données - appelées Microdata - afin de décrire des éléments sur les sites Internet.

C’est une sorte de nomenclature globale et commune pour décrire une entité, peu importe le pays ou la langue utilisée. Cela permet ainsi aux moteurs de recherche de comprendre ce que votre site web présente. Ce système est complètement transparent pour les utilisateurs. Il est utilisé par plus de 10 millions de sites Internet, selon le site officiel.

Page d'accueil du site Schema.org

Objectif des données structurées

L’objectif du projet Schema.org est de proposer des structures de données plus ou moins précises aux développeurs et aux webmasters. Listées sur le site officiel, il existe aujourd’hui un grand nombre de structures possibles.

Avant de poursuivre, il est important de préciser ce que l’on entend quand on parle d’objet en programmation.

Un objet est une entité abstraite, décrite dans une classe par un ensemble d’attributs et de fonctions. Chaque entité représente une instance d’un objet, pouvant posséder des valeurs d’attributs différentes et disposer des fonctionnalités rédigées dans la classe correspondante.

Ex : la Classe Voiture a l’attribut “couleur” et la fonction “accélère”. Je peux ainsi créer une voiture bleue qui accélère, puis une voiture rouge, qui accélère également, de la même façon.

Un objet peut également “hériter” d’un autre objet. Cela veut dire qu’il peut disposer de tous les attributs et de toutes les fonctions des objets dont il hérite (selon certaines conditions techniques, que l’on ne traitera pas dans cet article)

Les micro-données proposées sont calquées sur ce principe d’objet. Une structure dispose d’un certain nombre d’attributs, et peut hériter d’une autre structure. Toutes les structures dépendant de la même Structure “mère” appelée “Thing”. Cela représentant bien la racine abstraite de toute chose pouvant exister.

Pour expliquer concrètement leur fonctionnement, voyez-cela comme une fiche technique à remplir. Chaque structure de données représente donc une entité informatique dotées d’attributs à renseigner de la meilleure façon possible, en fonction des données dont vous disposez dans votre système.

Tous les attributs sont optionnels. Mais si vous ne pouvez pas les remplir, à quoi bon les mettre en place ?..

C’est le moment de mettre un exemple concret n’est-ce pas ?

Prenons cet article. Il répond à la structure de données NewsArticle. Il dispose donc des attributs de l’entité NewsArticle, Article, CreativeWork et Thing.

Tous les attributs ne nous intéressent pas forcément, car notre article n’est pas assez complexe pour répondre à certains d’entre eux. Voilà ce que l’on va prendre, avec les valeurs correspondantes :

Attribut

Description

Valeur dans notre exemple

dateline (Objet NewsArticle)

Texte court décrivant la date et l’emplacement concerné par l’actualité

Lyon, France - Le 31/08/2018

wordCount (Objet Article)

Texte indiquant le nombre de mots de l’article

1703

author (Objet CreativeWork)

Texte indiquant l’auteur de l’article

Julien Thirion

copyrightYear (Objet CreativeWork)

Texte indiquant l’année de copyright pour l’article

2018

dateCreated (Objet CreativeWork)

Date de création de l’article

2018-08-31T16:00:00+02:00

datePublished (Objet CreativeWork)

Date de publication de l’article

2018-08-31T16:00:00+02:00

headline (Objet CreativeWork)

Titre de l’article

Données structurées : explication et mise en place

inLanguage (Objet CreativeWork)

Langue de l’article

fr

description (Objet Thing)

Description de l’article

Utiles pour le SEO de votre site, décryptons ensemble le fonctionnement et l’intérêt des données structurées, initiative du projet Schema.org !

image (Objet Thing)

Image de l’article

https://www.webexmachina.fr/files/blog/2018-08-31_schema/schema-article.jpeg

name (Objet Thing)

Titre de l’article

Données structurées : explication et mise en place

url (Objet Thing)

URL de l’article

https://www.webexmachina.fr/article/2018/08/donnees-structurees-explication-et-mise-en-place.html

 

Dans notre exemple, c’est assez pragmatique. On pourrait être bien plus précis sur bien des renseignements, mais cela dépend de vos objectifs et de votre capacité à fournir des ensembles de données précis en toute circonstance.

D’autant que certains attributs attendent des valeurs correspondant à d’autres structures - on dit qu’elles sont alors imbriquées - ce qui peut rendre tout cela bien plus abstrait et complexe que ca ne l’est déjà.

Exemple de news Google

Conséquences

C’est bien beau de remplir tout ça, mais à quoi ça sert si c’est pas affiché sur notre page web hein ?

Excellente question.

Il est difficile de savoir précisément dans quelles circonstances ces données structurées sont utilisées, mais nous savons que les robots de Google, Bing, Yahoo et Yandex les lisent et les interprètent, pour ajuster leurs résultats et formater plus facilement des blocs ou des renseignements spéciaux dans leurs listes de résultats.

Le moteur de recherche fournit conseils et exemples sur cette page : https://developers.google.com/search/docs/guides/search-gallery

Recette formatée
Bloc entreprise

Aujourd’hui, nous nous en servons essentiellement pour le SEO, pour des blogs, des évènements ou des catalogues de produits.

Cependant, comme il s’agit d’un système standardisé, il se pourrait qu’il y ait beaucoup de systèmes qui se basent là dessus, sans pour autant le déclarer.

Exemple de produit

Inconvénients

Bien évidemment, comme tout outil, il y a quelques inconvénients à utiliser les données structurées.

Définition des règles
Les données structurées sont des concepts abstraits et malgré leur précision, ils restent généralistes. Dans le monde réel, les besoins sont tellement diversifiés qu’il est parfois difficile de classifier nos contenus, et d’en renseigner les attributs.
Il serait également improbable de rédiger ces attributs pour chaque contenu, donc il convient de les faire générer par le système, via des règles pensées en amont. Et comme tout système automatisé, anticiper tous les cas et problématiques est toujours une étape délicate. On en parle plus bas :)

Maintenance & Evolutivité
C’est un projet open-source, qui est passé par bien des versions depuis 2011. Avec les mises à jour, il est difficile de disposer du temps et des ressources pour les suivre. A moins d’avoir un service technique en interne, ou un contrat de prestation, suivre les changements reste chronophage.

Perte de trafic
Eh oui. C’est un détail important mais les moteurs de recherche utilisent vos micro-données pour compléter leurs résultats de recherche. Ce qui veut dire que l’internaute n’a pas besoin d’aller sur votre site pour trouver une information capitale (comme un prix d’achat).
On peut toujours dire que cela permet d’avoir des visiteurs plus qualitatifs, car ils sont alors véritablement intéressés par le contenu, mais il n’empêche que si votre business model se base sur une quantité de visiteurs, vous allez potentiellement y perdre.

Mise en place

Il est temps de parler de la mise en place des données structurées. Techniquement, ce n’est vraiment pas le plus complexe, vous avez plusieurs façons de le faire.

Directement dans le code HTML
L’avantage de l’HTML, c’est que l’on peut mettre des attributs et des valeurs dans toutes les balises ! L’attribut “itemscope”, à écrire sans valeur, permet de dire que la balise courante va encapsuler une entité structurée. L’attribut “itemtype” indique le type de l’entité et ensuite, il ne restera plus qu’à écrire des attributs “itemprop”, correspondant aux attributs de l’entité, avec les valeurs attendues.

<!-- Format HTML -->
<div itemscope itemtype="https://schema.org/NewsArticle">
  <div itemprop="name">Données structurées : explication et mise en place</div>
  <span itemprop="description">Utiles pour le SEO de votre site, décryptons ensemble le fonctionnement et l’intérêt des données structurées, initiative du projet Schema.org !</span>
  Publié le <time itemprop="datePublished" datetime="2018-08-311T16:00">31/08/2018 à 16h</time> par <span itemprop=”author”>Julien Thirion</span>
</div>
<!-- Format RDFa -->
<div vocab="https://schema.org/” typeof=”NewsArticle”>
  <div property="name">Données structurées : explication et mise en place</div>
  <span property="description">Utiles pour le SEO de votre site, décryptons ensemble le fonctionnement et l’intérêt des données structurées, initiative du projet Schema.org !</span>
  Publié le <time property="datePublished" datetime="2018-08-311T16:00">31/08/2018 à 16h</time> par <span property=”author”>Julien Thirion</span>
</div>

Au format JSON-LD
Le problème avec le format HTML, c’est que cela rend le code un peu plus complexe à lire pour les développeurs, puisqu’il ajoute des données inutiles pour la technique.
On peut toutefois isoler cela dans une balise spécifique, accueillant un texte au format JSON, contenant tous les attributs de notre article.

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"name": "Données structurées : explication et mise en place",
"author": "Julien Thirion",
"description": "Utiles pour le SEO de votre site, décryptons ensemble le fonctionnement et l’intérêt des données structurées, initiative du projet Schema.org !",
"datePublished": "2018-08-311T16:00"
}
</script>

Automatiser la génération des données structurées

Comme on peut le voir ci-dessus, les microdonnées répondent à une structure régulière. Ce qui veut dire que l’on peut établir un ensemble de règles pouvant automatiser leur écriture !

Toutes les données que l’on a listé dans nos codes exemples ci-dessus sont disponibles et administrables via le backend Contao. Il suffit de modifier mon template accueillant ma news et d’ajouter les balises souhaitées :

<div class="layout_full block<?= $this->class ?>" itemscope itemtype="http://schema.org/NewsArticle">

  <h1 itemprop="name"><?= $this->newsHeadline ?></h1>

  <?php if ($this->hasMetaFields): ?>
  <div class="infos">
    <div class="flex-column flex-center">
      <p class="info m-bottom-0"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
    </div>
    <div class="jssocials"></div>
  </div>
  <?php endif; ?>
  
  // ...
</div>

Ainsi, notre blog va récupérer des informations déjà existantes et les signaler comme attributs d’une donnée structurée. Nous les utilisons de manière très sommaire ici, mais rien ne nous empêche d’aller plus loin.

Astuce - Formater la date correctement
Formater les dates est toujours une plaie incommensurable. Entre les différents formats, pays, systèmes et timezones, c’est assez simple de se perdre.
Pour formater correctement une date au format ISO 8601, tel qu’attendu par les microdonnées, voilà quelques snippets en différents langages :

// PHP - http://php.net/manual/fr/function.date.php
$date = date('Y-m-d\TH:i:sP', $timestamp);
// Javascript - https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date
var date = new Date()
var dateIso = date.toISOString();
// C# - https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings
DateTime.UtcNow.ToString("yyyy-MM-ddTHH\\:mm\\:ss.fffffffzzz");

Astuce - Tester les données structurées sur une page
Google a bien évidemment sorti un outil pour vous permettre de tester si vos données sont bien formatées. C’est gratuit, abusez-en :)

Il manque quelques trucs il semblerait :D

Voilà qui termine cette introduction sur les structures de données du projet Schema.org !

Il est recommandé de les mettre en place sur tout projet indexé sur Internet car il est bien possible qu’elles prennent un rôle de plus en plus important dans des algorithmes les moteurs de recherche.
Pas besoin de sortir la grosse artillerie non plus. Comme on l’a dit plus haut, il n’est pas nécessaire de renseigner toutes les informations d’une entité pour qu’elle soit utilisée.

Allez-y petit à petit, quand vous avez les moyens et les règles pour automatiser leur génération. Le référencement naturel n’est jamais un processus rapide :)