Résultats de recherche améliorés avec les microdonnées HTML5

Microdonnées
Résultats de recherche améliorés
28 février 2013, Rémy Savard

www: remysavard.com
Twiiter: @remysavard
LinkedIn: /remysavard

Microdonnées de Rémy Savard est mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Pas de Modiﬁcation 3.0 non transposé.

jeudi 28 février 13

Rémy Savard


Système de documents hypertextes reliés entre eux
accessibles via l'Internet

Photo par luc.viatour

Beaucoup de données

Photo par Robert Scoble

Les données générées par la majorité des sites Web
proviennent de bases de données structurées

Photo par jose.jhg

Dans le HTML, les données perdent leurs structure

Photo par jose.jhg

Ok, j'aime conduire des Jaguars


Photo par spellgage

Mon frère à vu une maman couguar!


Peut-être...

Photo par dracobotanicus

Femme qui cherche des relations sexuelles avec des
hommes considérablement plus jeunes

X
Wikipedia, Cougar (slang)

Document web


<p>

Document web


<p>

Document web

<ul>


<p>

Document web

<ol>

<ul>


<p>

Document web

<div> <ol>

<ul>


<h1>
<p> <article>
<figure>
<form>
<meta>
<a> <span>
<img>
Document web
<table>
<input>
<div> <ol> <time>

<link> <section> <ul>
<video>

Create future friendly content
Describe and structure the data to put
the content at the right place and
let dumb and smart devices understand it
- Josh Clark, Web à Québec 2013


We need helps from the robots,
they will manage the data
- Josh Clark, Web à Québec 2013

Les données structurées deviennent des éléments de
plus en plus important de l'écosystème web.
Google fait appel à des données structurées
aﬁn de mettre en évidence certains types de contenu
dans les résultats de recherche

Introducing the Structured Data Dashboard

Un vocabulaire de balisage partagé qui permet de
représenter les données contenus dans les sites Web

Photo par zzpza

Un vocabulaire partagé
Photo par lars hammar

Google, Bing, Yahoo! et Yandex
utilisent tous schema.org comme vocabulaire de
référence pour la compréhension des données


Les types
Catégorie de personnes ou de choses ayant des
caractéristiques communes


Produits

Les types


Produits

Les types

Événements


Produits
Films
Les types

Événements


Recettes

Produits
Films
Les types

Événements


Recettes

Produits
Films
Les types

Événements

Personnes


Recettes

Produits
Films
Les types

Événements
Organisations
Personnes


Recettes
Lieux

Produits
Films
Les types

Événements
Organisations
Personnes


Recettes
Lieux
Critiques
Produits
Films
Les types

Événements
Organisations
Personnes


Recettes
Lieux
Critiques
Produits
Films
Les types
Restaurants
Événements
Organisations
Personnes


Recettes
Lieux
Critiques
Produits
Films
Les types
Restaurants
Événements
Organisations
Personnes
Applications

Balisage d'implémentation: Microdonnées
(Il y a aussi les microformats et RDFa)

Photo par f-l-e-x

Faciles à comprendre, mais n'offrent pas un
mécanisme d'extensibilité et la réutilisation de l'attribut
"class" peut provoquer des conﬂits avec les CSS

Frequently asked questions | schema.org

RDFa est extensible et très expressif, mais la
complexité de la langue a contribué
au ralentissement de l'adoption


Les microdonnées sont la plus récente norme
à grande diffusion, créée avec HTML5.
Bien équilibré entre l'extensibilité et de la simplicité


Photo par 20th Century Fox

<div>
<h1>Avatar</h1>
<span>Director:
James
Cameron
(born
August
16,
1954)</span>
<span>Science
fiction</span>
<a
href="../movies/avatar-‐theatrical-‐trailer.html">Trailer</a>
</div>


itemscope

<div
itemscope>
<h1>Avatar</h1>
<span>Director:
James
Cameron
(born
August
16,
1954)</span>
<span>Science
fiction</span>
<a
</div>


itemtype

<div
itemscope
itemtype="http://schema.org/Movie
">
<h1>Avatar</h1>
<span>Director:
James
Cameron
(born
August
16,
1954)</span>
<span>Science
fiction</span>
<a
</div>


schema.org/Movie

itemprop

<div
itemscope
itemtype="http://schema.org/Movie">
<h1
itemprop="name">Avatar</h1>
<span>Director:
<span
itemprop="director">James
Cameron</span>

(born
August
16,
1954)</span>
<span
itemprop="genre">Science
fiction</span>
<a
href="../movies/avatar-‐theatrical-‐trailer.html"

itemprop="trailer">Trailer</a>
</div>


Données imbriquées

<div
itemscope
<h1
<div
itemprop="director"
itemscope
itemtype="http://schema.org/
Person">
Director:
<span
itemprop="name">James
Cameron</span>
(born

<span
itemprop="birthDate">August
16,
1954)</span>
</div>
<span
fiction</span>
<a

</div>


value

<div
itemscope
<h1
<div
itemprop="director"
itemscope
Person">
Director:
<span
Cameron</span>
(born

<span
itemprop="birthDate"
value="1954-‐04-‐16">August
16,

1954)</span>
</div>
<span
fiction</span>
<a

</div>


datetime

<div
itemscope
<h1
<div
itemprop="director"
itemscope
Person">
Director:
<span
Cameron</span>
(born

<time
datetime="1954-‐04-‐16">August
16,

1954)</time>
</div>
<span
fiction</span>
<a

</div>


itemref

<div
itemscope
itemref="a"
<h1
<div
itemprop="director"
itemscope
Person">
Director:
<span
Cameron</span>
(born

<time
datetime="1954-‐04-‐16">August
16,

1954)</time>
</div>
<span
fiction</span>
<a

</div>
<span
id="a"
itemprop="actor">Sam
Worthington</span>


Représenter les données
contenus dans les sites Web
Photo par !/_PeacePlusOne

1. Extraits enrichis
2. Google Knowledge Graph
3. Authorship


Si Google interprète correctement le contenu de vos
pages, nous pouvons créer des extraits enrichis

Google, Extraits enrichis

Extraits enrichis

cake

Extraits enrichis

Outil de test des données structurées

Google, Outil de test des données structurées

Le marqueur de données [...] permet à Google
d'interpréter le format des données [...]
il vous sufﬁt de baliser les champs de données
sur votre site à l'aide de la souris

Google, À propos du marqueur de données

Utilisez des balises HTML si ...
Vous voulez un contrôle explicite sur la façon dont
Google comprend les événements, les recettes, ou
d'autres types de données sur votre site.
La structure de votre site change fréquemment.


Utilisez le marqueur de données si ...
Votre site afﬁche des données sur les événements.
Vous n'êtes pas encore prêt à engager des ressources
pour la mise à jour des balises HTML.


We’re still in the early stages.
We’re still at 1 percent of where we should be.
- Larry Page, Google

Google Knowledge Graph
Larry Page on Google’s Knowledge Graph

570 millions d'objets et
18 milliards de faits et les relations entre eux,
à partir de sources telles que le
CIA World Factbook, Wikipedia, et Freebase

Larry Page on Google’s Knowledge Graph

What to do in san francisco


popular movies of 2011


montreal canadians


Authorship

Photo par j-blocker

Authorship

matt cutts

Authorship

Tableau de bord des données structurées

Photo par N Stjerna

Trois vues
Site
Type d'élément
Page

Introduction au tableau de bord des données structurées

Site


Type d'élément


Page


Est-ce que ça fonctionne vraiment ?


Best Buy ont implémentés des données structurées
sur leur site, quelques mois plus tard,
ils ont constatés une augmentation de 30%
dans leurs résultats de recherche organique

An Interview with Jay Myers, lead Development Enineer for Best Buy

Yahoo! à découvert que ceux qui avaient des extraits
enrichis dans leurs résultats obtenaient une
augmentation de 15% du taux de clic

Yahoo! SearchMonkey Becomes More Mainstream

Qui les utilisent présentement?


Google Glass ?

Photo par zugaldia

Siri ?

Photo par topgold

Vous !

Photo par AJC1

Microdonnées
Résultats de recherche améliorés
28 février 2013, Rémy Savard

www: remysavard.com
Twiiter: @remysavard
LinkedIn: /remysavard

Microdonnées de Rémy Savard est mis à disposition selon les termes de la licence Creative Commons 70
Attribution - Pas d’Utilisation Commerciale - Pas de Modiﬁcation 3.0 non transposé.


Résultats de recherche améliorés avec les microdonnées HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Résultats de recherche améliorés avec les microdonnées HTML5