Ajouter du sens à vos pages web avec les microdonnées

Sud Web 2012Corinne Schillinger - www.inseo.fr

‣ RDFa⊕ très souple

⊖ relativement complexe

Un peu d’histoire...

‣ Microformats⊕ plus simple

⊖ s’appuie sur des attributs inappropriés

‣ Réunit le meilleur des deux mondestrès souple

peu complexe à utiliser

Les microdonnées

‣ 5 nouveaux attributsitemscope, itemtype, itemprop, itemref et itemid

pouvant être employés dès à présent

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>

<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>

Créer un nouvel objet

itemscope : attribut booléen

<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>

Identifier cet objet

itemtype : spécifie le type et les propriétés de l’objet

url : indique le vocabulaire employé

intemprop : définit le contenu de la balise marquée

<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>

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>

Préciser la nature des données

intemprop : définit le contenu de la balise marquée

sauf pour les éléments munis d’un attribut : data, href ou src.

<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>

Préciser la nature des données

intemprop : définit le contenu de la balise marquée

sauf pour les éléments munis d’un attribut : data, href ou src.

<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>

Préciser la nature des données

intemprop : définit le contenu de la balise marquée

sauf pour les éléments munis d’un attribut : data, href ou src.

<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>

Préciser la nature des données

intemprop : définit le contenu de la balise marquée

sauf pour les éléments munis d’un attribut : data, href ou src.

<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>

Préciser la nature des données

intemprop : définit le contenu de la balise marquée

sauf pour les éléments munis d’un attribut : data, href ou src.

<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>

Préciser la nature des données

intemprop : définit le contenu de la balise marquée

sauf pour les éléments munis d’un attribut : data, href ou src.

<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>

Imbriquer des objets

Créer un objet « évaluation »

<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>

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>

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>

Renseigner la nature de l’objet

<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>

Associer des données distantes

intemref : placé au même niveau que itemscope

valeur de la propriété = identifiant du bloc contenant les 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>

Associer des données distantes

intemref : placé au même niveau que itemscope

valeur de la propriété = identifiant du bloc contenant les données distantes

‣ Rich Snippets Testing Toolhttp://www.google.com/webmasters/tools/richsnippets

Tester la validité du code

‣ Utilité relativement restreinteprend comme valeur un identifiant unique permettant de distinguer l’objet sans doute possible

code ISBN, visa d’exploitation par exemple

Et itemid, dans tout ça ?

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/

Récapitulons

À vous de jouer !Merci de votre attention

Corinne Schillinger - @schillingerhttp://www.inseo.fr