Apprends à ajouter des données structurées à ton HTML en utilisant les microdonnées Schema.org et JSON-LD pour aider les moteurs de recherche à comprendre ton contenu et générer des résultats enrichis.
Les données structurées sont une façon standardisée de décrire le contenu d'une page afin que les moteurs de recherche, les plateformes sociales et autres machines puissent le comprendre.
Par exemple, une page produit peut contenir un titre, un prix, une note et une disponibilité. Les humains peuvent lire ces informations depuis la mise en page. Les données structurées rendent ces informations lisibles par les machines afin que Google puisse afficher des résultats enrichis — notes en étoiles, fourchettes de prix, accordéons FAQ, cartes de recettes, et bien plus.
Le vocabulaire le plus utilisé est Schema.org, maintenu conjointement par Google, Microsoft, Yahoo et Yandex. Il définit des types comme Article, Product, Person, Organization, Event, Recipe, et des centaines d'autres.
Les microdonnées sont un ensemble d'attributs HTML qui annotent ton balisage existant :
| Attribut | Objectif |
|---|---|
itemscope | Crée un nouvel élément (comme ouvrir un objet JSON) |
itemtype | Spécifie le type Schema.org (URL) |
itemprop | Nomme une propriété de l'élément |
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Understanding Microdata</h1>
<p>By <span itemprop="author">Jane Doe</span></p>
<time itemprop="datePublished" datetime="2025-06-15">June 15, 2025</time>
<p itemprop="description">Learn how to add structured data to HTML.</p>
</article>Les microdonnées sont tissées dans le HTML existant — tu n'as pas besoin de dupliquer le contenu. Cela facilite la maintenance puisque les données structurées et le contenu visible restent synchronisés.
JSON-LD (JSON pour Linked Data) est le format recommandé par Google. Au lieu d'annoter les éléments HTML, tu places un bloc <script> séparé avec les données structurées :
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Understanding Microdata",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2025-06-15",
"description": "Learn how to add structured data to HTML."
}
</script>| Type | Résultat Enrichi | Propriétés Clés |
|---|---|---|
Article | Article de presse/blog | headline, author, datePublished, image |
Product | Liste de produits | name, description, offers (prix, disponibilité) |
Person | Panneau de connaissances | name, jobTitle, url, image |
Organization | Infos entreprise | name, logo, url, contactPoint |
Event | Liste d'événements | name, startDate, location, offers |
FAQPage | Accordéon FAQ | mainEntity (tableau d'éléments Question) |
Recipe | Carte de recette | name, cookTime, recipeIngredient |
BreadcrumbList | Fil d'Ariane | itemListElement (tableau de ListItem) |
<!-- MICRODATA approach: annotations on existing HTML -->
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Getting Started with HTML</h1>
<p>By <span itemprop="author">Jane Doe</span></p>
<time itemprop="datePublished" datetime="2025-06-15">June 15, 2025</time>
<p itemprop="articleBody">HTML is the foundation of every web page...</p>
</article>
<!-- JSON-LD approach: separate script block -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Getting Started with HTML",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2025-06-15",
"description": "HTML is the foundation of every web page."
}
</script>Quel est le principal avantage du JSON-LD par rapport aux Microdonnées ?