Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
-
Upload
corinne-schillinger -
Category
Technology
-
view
1.466 -
download
0
description
Transcript of Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
![Page 1: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/1.jpg)
Ajouter du sens à vos pages web avec les microdonnées
Sud Web 2012Corinne Schillinger - www.inseo.fr
![Page 2: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/2.jpg)
‣ RDFa⊕ très souple
⊖ relativement complexe
Un peu d’histoire...
‣ Microformats⊕ plus simple
⊖ s’appuie sur des attributs inappropriés
![Page 3: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/3.jpg)
‣ 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
![Page 4: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/4.jpg)
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>
![Page 5: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/5.jpg)
<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
![Page 6: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/6.jpg)
<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é
![Page 7: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/7.jpg)
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
![Page 8: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/8.jpg)
<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.
![Page 9: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/9.jpg)
<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.
![Page 10: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/10.jpg)
<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.
![Page 11: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/11.jpg)
<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.
![Page 12: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/12.jpg)
<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.
![Page 13: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/13.jpg)
<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.
![Page 14: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/14.jpg)
<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 »
![Page 15: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/15.jpg)
<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
![Page 16: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/16.jpg)
<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
![Page 17: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/17.jpg)
<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
![Page 18: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/18.jpg)
<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
![Page 19: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/19.jpg)
<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
![Page 20: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/20.jpg)
‣ Rich Snippets Testing Toolhttp://www.google.com/webmasters/tools/richsnippets
Tester la validité du code
![Page 21: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/21.jpg)
‣ 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 ?
![Page 22: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/22.jpg)
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
![Page 23: Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)](https://reader034.fdocument.pub/reader034/viewer/2022051818/549a3a28b47959514d8b5997/html5/thumbnails/23.jpg)
À vous de jouer !Merci de votre attention
Corinne Schillinger - @schillingerhttp://www.inseo.fr