1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
---
title: Microdonnées
slug: Web/HTML/Microdata
tags:
- Composing
- Example
- HTML
- Microdata
- Reference
- SEO
- Search
translation_of: Web/HTML/Microdata
original_slug: Web/HTML/Microdonnées
---
<p class="summary">Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p>
<p>Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (<em>items</em>) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :</p>
<ul>
<li>Pour créer un objet, on utilise l'attribut <strong><code>itemscope</code></strong></li>
<li>Pour ajouter une propriété, on utilise l'attribut <strong><code>itemprop</code></strong> sur l'un des descendants.</li>
</ul>
<h2 id="Vocabularies">Vocabulaires</h2>
<p>Google et les autres moteurs de recherches participent au vocabulaire défini par <a href="https://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="https://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="https://schema.org/startDate">startDate</a></code> et <code><a href="https://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code>.</p>
<div class="notecard note">
<p><strong>Note :</strong> Pour en savoir plus sur les attributs <code>itemtype</code>, consultez le site <a href="http://schema.org/Thing">http://schema.org/Thing</a>.</p>
</div>
<p>Les vocabulaires de microdonnées fournissent la sémantique ou la signification d'un élément. Les développeurs Web peuvent concevoir un vocabulaire personnalisé ou utiliser des vocabulaires disponibles sur le Web, tels que le vocabulaire largement utilisé <a href="http://schema.org">schema.org</a>. Une collection de vocabulaires de balisage couramment utilisés est fournie par Schema.org.</p>
<p>Vocabulaires couramment utilisés :</p>
<ul>
<li>Œuvres créatives : <a href="http://schema.org/CreativeWork">CreativeWork</a>, <a href="http://schema.org/Book">Book</a>, <a href="http://schema.org/Movie">Movie</a>, <a href="http://schema.org/MusicRecording">MusicRecording</a>, <a href="http://schema.org/Recipe">Recipe</a>, <a href="http://schema.org/TVSeries">TVSeries</a></li>
<li>Objets non textuels incorporés : <a href="http://schema.org/AudioObject">AudioObject</a>, <a href="http://schema.org/ImageObject">ImageObject</a>, <a href="http://schema.org/VideoObject">VideoObject</a></li>
<li><a href="http://schema.org/Event">Event</a></li>
<li><a href="http://schema.org/docs/meddocs.html">Health and medical types</a> : Notes sur les types de santé et médicaux sous <a href="http://schema.org/MedicalEntity">MedicalEntity</a></li>
<li><a href="http://schema.org/Organization">Organization</a></li>
<li><a href="http://schema.org/Person">Person</a></li>
<li><a href="http://schema.org/Place">Place</a>, <a href="http://schema.org/LocalBusiness">LocalBusiness</a>, <a href="http://schema.org/Restaurant">Restaurant</a></li>
<li><a href="http://schema.org/Product">Product</a>, <a href="http://schema.org/Offer">Offer</a>, <a href="http://schema.org/AggregateOffer">AggregateOffer</a></li>
<li><a href="http://schema.org/Review">Review</a>, <a href="http://schema.org/AggregateRating">AggregateRating</a></li>
<li><a href="http://schema.org/Action">Action</a></li>
<li><a href="http://schema.org/Thing">Thing</a></li>
<li><a href="http://schema.org/Intangible">Intangible</a></li>
</ul>
<p>Les principaux opérateurs de moteurs de recherche comme Google, Microsoft et Yahoo ! s'appuient sur le vocabulaire <a href="http://schema.org/">schema.org</a> pour améliorer les résultats de recherche. Pour certains usages, un vocabulaire ad-hoc est adéquat. Pour d'autres, un vocabulaire devra être conçu. Dans la mesure du possible, les auteurs sont encouragés à réutiliser les vocabulaires existants, car cela facilite la réutilisation du contenu.</p>
<h2 id="Localization">Localisation</h2>
<p>Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, <a href="https://www.yandex.com/">Yandex</a> qui est un moteur de recherche très présent en Russie supporte des microformats comme <em>hCard</em>, <em>hRecipe</em>, <em>hReview</em> et <em>hProduct</em> et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problèmes de translitération entre les alphabets cyrillique et latin.</p>
<h2 id="Global_attributes">Attributs globaux liés aux microdonnées</h2>
<dl>
<dt><a href="/fr/docs/Web/HTML/Global_attributes/itemid"><code>itemid</code></a></dt>
<dd>Cet attribut est l'identifiant unique d'un objet.</dd>
<dt><a href="/fr/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></dt>
<dd>Cet attribut est utilisé afin d'ajouter des propriétés à un élément.</dd>
<dt><a href="/fr/docs/Web/HTML/Global_attributes/itemref"><code>itemref</code></a></dt>
<dd>Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.</dd>
<dt><a href="/fr/docs/Web/HTML/Global_attributes/itemscope"><code>itemscope</code></a></dt>
<dd>Cet attribut définit la portée du vocabulaire déclaré par <code>itemtype</code> et englobe généralement un objet.</dd>
<dt><a href="/fr/docs/Web/HTML/Global_attributes/itemtype"><code>itemtype</code></a></dt>
<dd>Cet attribut définit l'URL du vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.</dd>
</dl>
<h2 id="Example">Exemple</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div itemscope itemtype="https://schema.org/SoftwareApplication">
<span itemprop="name">Angry Birds</span> -
NÉCESSITE <span itemprop="operatingSystem">ANDROID</span><br>
<link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
ÉVALUATION :
<span itemprop="ratingValue">4.6</span> (
<span itemprop="ratingCount">8864</span> notes )
</div>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
Prix : <span itemprop="price">1.00</span>$
<meta itemprop="priceCurrency" content="USD" />
</div>
</div></pre>
<h3 id="Structured_data">Données structurées</h3>
<table class="standard-table">
<tbody>
<tr>
<td rowspan="4">itemscope</td>
<td>itemtype</td>
<td colspan="2">SoftwareApplication (https://schema.org/SoftwareApplication)</td>
</tr>
<tr>
<td>itemprop</td>
<td>name</td>
<td>Angry Birds</td>
</tr>
<tr>
<td>itemprop</td>
<td>operatingSystem</td>
<td>ANDROID</td>
</tr>
<tr>
<td>itemprop</td>
<td>applicationCategory</td>
<td>GameApplication (https://schema.org/GameApplication)</td>
</tr>
<tr>
<td rowspan="3">itemscope</td>
<td>itemprop[itemtype]</td>
<td colspan="2">aggregateRating [AggregateRating]</td>
</tr>
<tr>
<td>itemprop</td>
<td>ratingValue</td>
<td>4.6</td>
</tr>
<tr>
<td>itemprop</td>
<td>ratingCount</td>
<td>8864</td>
</tr>
<tr>
<td rowspan="3">itemscope</td>
<td>itemprop[itemtype]</td>
<td colspan="2">offers [Offer]</td>
</tr>
<tr>
<td>itemprop</td>
<td>price</td>
<td>1.00</td>
</tr>
<tr>
<td>itemprop</td>
<td>priceCurrency</td>
<td>USD</td>
</tr>
</tbody>
</table>
<h3 id="Result">Résultat</h3>
<p>{{EmbedLiveSample("HTML", "", "100")}}</p>
<div class="note">
<p><strong>Note :</strong> Un outil pratique pour extraire les structures de microdonnées du HTML est l'<a href="https://developers.google.com/search/docs/guides/intro-structured-data">outil de test des données structurées</a> de Google. Essayez-le sur le HTML présenté ci-dessus.</p>
</div>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.</p>
<h2 id="See_also">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/HTML/Global_attributes">Les attributs universels</a></li>
</ul>
<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</div>
|