1. Ajouter du sens à vos pages
web avec les microdonnées
Corinne Schillinger - www.inseo.fr Sud Web 2012

2. Un peu d’histoire...
‣ RDFa
⊕ très souple
⊖ relativement complexe
‣ Microformats
⊕ plus simple
⊖ s’appuie sur des attributs inappropriés

3. Les microdonnées
‣ Réunit le meilleur des deux mondes
très souple
peu complexe à utiliser
‣ 5 nouveaux attributs
itemscope, itemtype, itemprop, itemref et itemid
pouvant être employés dès à présent

4. Explication par l’exemple
<div>
<h2>La Vague</h2>
<img src="img/la-vague.jpg" width="160" height="210" alt="" />
<p>Note : 3.8/5.0 - 4856 avis</p>
<p>Dans le cadre d'un atelier, un professeur de lycée propose à ses élèves une
expérience visant à leur expliquer le fonctionnement d'un régime totalitaire.
Commence alors un jeu de rôle grandeur nature, dont les conséquences vont s'avérer
tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>

5. Créer un nouvel objet
<div itemscope>
<h2>La Vague</h2>
<img src="img/la-vague.jpg" width="160" height="210" alt="" />
<p>Note : 3.8/5.0 - 4856 avis</p>
<p>Dans le cadre d'un atelier, un professeur de lycée propose à ses élèves une
expérience visant à leur expliquer le fonctionnement d'un régime totalitaire.
Commence alors un jeu de rôle grandeur nature, dont les conséquences vont s'avérer
tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
itemscope : attribut booléen

6. Identifier cet objet
<div itemscope itemtype="http://schema.org/Movie">
<h2>La Vague</h2>
<img src="img/la-vague.jpg" width="160" height="210" alt="" />
<p>Note : 3.8/5.0 - 4856 avis</p>
<p>Dans le cadre d'un atelier, un professeur de lycée propose à ses élèves une
expérience visant à leur expliquer le fonctionnement d'un régime totalitaire.
Commence alors un jeu de rôle grandeur nature, dont les conséquences vont s'avérer
tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
itemtype : spécifie le type et les propriétés de l’objet
url : indique le vocabulaire employé

7. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img src="img/la-vague.jpg" width="160" height="210" alt="" />
<p>Note : 3.8/5.0 - 4856 avis</p>
<p>Dans le cadre d'un atelier, un professeur de lycée propose à ses élèves une
expérience visant à leur expliquer le fonctionnement d'un régime totalitaire.
Commence alors un jeu de rôle grandeur nature, dont les conséquences vont s'avérer
tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
intemprop : définit le contenu de la balise marquée

8. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p>Note : 3.8/5.0 - 4856 avis</p>
<p>Dans le cadre d'un atelier, un professeur de lycée propose à ses élèves une
expérience visant à leur expliquer le fonctionnement d'un régime totalitaire.
Commence alors un jeu de rôle grandeur nature, dont les conséquences vont s'avérer
tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
intemprop : définit le contenu de la balise marquée
sauf pour les éléments munis d’un attribut : data, href ou src.

9. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p>
<p>Dans le cadre d'un atelier, un professeur de lycée propose à ses élèves une
expérience visant à leur expliquer le fonctionnement d'un régime totalitaire.
Commence alors un jeu de rôle grandeur nature, dont les conséquences vont s'avérer
tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
intemprop : définit le contenu de la balise marquée
sauf pour les éléments munis d’un attribut : data, href ou src.

10. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
intemprop : définit le contenu de la balise marquée
sauf pour les éléments munis d’un attribut : data, href ou src.

11. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec Jürgen
Vogel, Frederick Lau.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
intemprop : définit le contenu de la balise marquée
sauf pour les éléments munis d’un attribut : data, href ou src.

12. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <span
itemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p>
<a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a>
</div>
intemprop : définit le contenu de la balise marquée
sauf pour les éléments munis d’un attribut : data, href ou src.

13. Préciser la nature des données
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <span
itemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p>
<a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bande
annonce</a>
</div>
intemprop : définit le contenu de la balise marquée
sauf pour les éléments munis d’un attribut : data, href ou src.

14. Imbriquer des objets
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">Note : 3.8/5.0 - 4856 avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <span
itemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p>
<a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bande
annonce</a>
</div>
Créer un objet « évaluation »

15. Renseigner la nature de l’objet
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/5.0 - 4856
avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <span
itemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p>
<a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bande
annonce</a>
</div>

16. Renseigner la nature de l’objet
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<span
itemprop="bestRating">5.0</span> - 4856 avis</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <span
itemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p>
<a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bande
annonce</a>
</div>

17. Renseigner la nature de l’objet
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<span
itemprop="bestRating">5.0</span> - <span itemprop="reviewCount">4856</span> avis
</p>
<p itemprop="description">Dans le cadre d'un atelier, un professeur de lycée
propose à ses élèves une expérience visant à leur expliquer le fonctionnement d'un
régime totalitaire. Commence alors un jeu de rôle grandeur nature, dont les
conséquences vont s'avérer tragiques.</p>
<p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <span
itemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p>
<a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bande
annonce</a>
</div>

18. Associer des données distantes
<div itemscope itemtype="http://schema.org/Movie" itemref="prize">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<span
itemprop="bestRating">5.0</span> - <span itemprop="reviewCount">4856</span> avis
</p>
...
</div>
...
<p>Le film a reçu <span id="prize">le Grand Prix du jury au Festival de Sundance</
span>.</p>
intemref : placé au même niveau que itemscope
valeur de la propriété = identifiant du bloc contenant les données distantes

19. Associer des données distantes
<div itemscope itemtype="http://schema.org/Movie" itemref="prize">
<h2 itemprop="name">La Vague</h2>
<img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" />
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<span
itemprop="bestRating">5.0</span> - <span itemprop="reviewCount">4856</span> avis
</p>
...
</div>
...
<p>Le film a reçu <span id="prize" itemprop="award">le Grand Prix du jury au
Festival de Sundance</span>.</p>
intemref : placé au même niveau que itemscope
valeur de la propriété = identifiant du bloc contenant les données distantes

20. Tester la validité du code
‣ Rich Snippets Testing Tool
http://www.google.com/webmasters/tools/richsnippets

21. Et itemid, dans tout ça ?
‣ Utilité relativement restreinte
prend comme valeur un identifiant unique permettant
de distinguer l’objet sans doute possible
code ISBN, visa d’exploitation par exemple

22. Récapitulons
itemscope : racine de l’objet (booléen)
itemtype : définit le type et les propriétés (via une url)
itemprop : renseigne la nature de la donnée
définit le contenu sauf en présence de data, href et src
itemref : associe des données distantes
valeur = identifiant du bloc de données
itemid : identifiant unique affecté à l’objet
exemple de microdonnées sémantiques :
http://schema.org/

23. À vous de jouer !
Merci de votre attention
Corinne Schillinger - @schillinger
http://www.inseo.fr