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

Microdonnées

Résultats de recherche améliorés28 février 2013, Rémy Savard

www: remysavard.comTwiiter: @remysavardLinkedIn: /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 Modification 3.0 non transposé.

jeudi 28 février 13

http://remysavard.com/


http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr




Rémy Savard


Photo par luc.viatour

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

Photo par luc.viatourjeudi 28 février 13

http://www.flickr.com/photos/luc_viatour/

http://www.flickr.com/photos/luc_viatour/

Photo par Robert Scoble

Beaucoup de données


http://www.flickr.com/photos/scobleizer/

http://www.flickr.com/photos/scobleizer/

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

Photo par jose.jhgjeudi 28 février 13

http://www.flickr.com/photos/4st4roth/


Photo par jose.jhg

Dans le HTML, les données perdent leurs structure




Ok, j'aime conduire des Jaguars


Photo par spellgagejeudi 28 février 13

http://www.flickr.com/photos/spellgage/

http://www.flickr.com/photos/spellgage/

Mon frère à vu une maman couguar!


Photo par dracobotanicus

Peut-être...


http://www.flickr.com/photos/dracobotanicus/

http://www.flickr.com/photos/dracobotanicus/

XFemme qui cherche des relations sexuelles avec des

hommes considérablement plus jeunes

Wikipedia, Cougar (slang)jeudi 28 février 13

http://en.wikipedia.org/wiki/Cougar_(slang)

http://en.wikipedia.org/wiki/Cougar_(slang)

Document web


Document web

<p>


Document web

<p>

<ul>


Document web

<p>

<ul>

<ol>


Document web

<p>

<ul>

<ol><div>


Document web

<p>

<a>

<ul>

<ol><div>

<article>

<section>

<span>

<form>

<input><time>

<link>

<meta>

<img>

<table>

<figure>

<video>

<h1>


Create future friendly contentDescribe and structure the data to put

the content at the right place andlet 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 2013jeudi 28 février 13

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

afin de mettre en évidence certains types de contenu dans les résultats de recherche

Introducing the Structured Data Dashboardjeudi 28 février 13

http://googlewebmastercentral.blogspot.ca/2012/07/introducing-structured-data-dashboard.html


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

Photo par zzpzajeudi 28 février 13

http://www.flickr.com/photos/zzpza/

http://www.flickr.com/photos/zzpza/

Un vocabulaire partagéPhoto par lars hammar


http://www.flickr.com/photos/7603557@N08/

http://www.flickr.com/photos/7603557@N08/

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


Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes




Produits




Produits

Événements




Produits

Événements

Films




Produits

Événements

Films

Recettes




Produits

Événements

Films

Recettes

Personnes




Produits

Événements

Films

Recettes

Personnes

Organisations




Produits

Événements

Films

Recettes

Personnes

Organisations

Lieux




Produits

Événements

Films

Recettes

Personnes

Organisations

LieuxCritiques




Produits

Événements

Films

Recettes

Personnes

Organisations

LieuxCritiques

Restaurants




Produits

Événements

Films

Recettes

Personnes

Organisations

LieuxCritiques

Restaurants

Applications


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

Photo par f-l-e-xjeudi 28 février 13

http://www.flickr.com/photos/f-l-e-x/

http://www.flickr.com/photos/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 conflits avec les CSS

Frequently asked questions | schema.orgjeudi 28 février 13

http://schema.org/docs/faq.html%2314


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 Foxjeudi 28 février 13

http://en.wikipedia.org/wiki/20th_Century_Fox

http://en.wikipedia.org/wiki/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>


<div itemscope><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 itemtype="http://schema.org/Movie">

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

itemtype


schema.org/Moviejeudi 28 février 13

http://schema.org/Movie

http://schema.org/Movie

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

itemprop


<div itemscope itemtype="http://schema.org/Movie"><h1 itemprop="name">Avatar</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 itemprop="genre">Science fiction</span><a href="../movies/avatar-‐theatrical-‐trailer.html" itemprop="trailer">Trailer</a>

</div>

Données imbriquées



Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate" value="1954-‐04-‐16">August 16, 1954)</span>


</div>

value


datetime


Director: <span itemprop="name">James Cameron</span> (born <time itemprop="birthDate" datetime="1954-‐04-‐16">August 16, 1954)</time>


</div>


<div itemscope itemref="a" itemtype="http://schema.org/Movie"><h1 itemprop="name">Avatar</h1><div itemprop="director" itemscope itemtype="http://schema.org/Person">

Director: <span itemprop="name">James Cameron</span> (born <time itemprop="birthDate" datetime="1954-‐04-‐16">August 16, 1954)</time>


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

itemref


Représenter les donnéescontenus dans les sites Web

Photo par \!/_PeacePlusOnejeudi 28 février 13

http://www.flickr.com/photos/dragonpreneur/

http://www.flickr.com/photos/dragonpreneur/

1. Extraits enrichis2. Google Knowledge Graph

3. Authorship


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

Google, Extraits enrichisjeudi 28 février 13

http://support.google.com/webmasters/bin/answer.py?hl=fr&hlrm=en&answer=99170

http://support.google.com/webmasters/bin/answer.py?hl=fr&hlrm=en&answer=99170

Extraits enrichisjeudi 28 février 13

cake


Outil de test des données structurées

Google, Outil de test des données structuréesjeudi 28 février 13

http://www.google.com/webmasters/tools/richsnippets

http://www.google.com/webmasters/tools/richsnippets

Le marqueur de données [...] permet à Google d'interpréter le format des données [...]

il vous suffit de baliser les champs de donnéessur votre site à l'aide de la souris

Google, À propos du marqueur de donnéesjeudi 28 février 13

http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=2692911

http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=2692911

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.


http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170


Utilisez le marqueur de données si ...Votre site affiche des données sur les événements.

Vous n'êtes pas encore prêt à engager des ressources pour la mise à jour des balises HTML.




Google Knowledge Graph

We’re still in the early stages.We’re still at 1 percent of where we should be.

- Larry Page, Google

Larry Page on Google’s Knowledge Graphjeudi 28 février 13

http://venturebeat.com/2013/01/22/larry-page-on-googles-knowledge-graph-were-still-at-1-of-where-we-want-to-be/


Google Knowledge Graph

570 millions d'objets et18 milliards de faits et les relations entre eux,

à partir de sources telles que leCIA World Factbook, Wikipedia, et Freebase

Larry Page on Google’s Knowledge Graphjeudi 28 février 13



Google Knowledge Graphjeudi 28 février 13

What to do in san francisco


popular movies of 2011


montreal canadians


Photo par j-blocker

Authorship


http://www.flickr.com/photos/jonathanblocker/

http://www.flickr.com/photos/jonathanblocker/

Authorshipjeudi 28 février 13

matt cutts


Tableau de bord des données structurées

Photo par N Stjernajeudi 28 février 13

http://www.flickr.com/photos/niklasstjerna/

http://www.flickr.com/photos/niklasstjerna/

Trois vuesSite

Type d'élémentPage

Introduction au tableau de bord des données structuréesjeudi 28 février 13



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éessur 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 Buyjeudi 28 février 13

http://searchnewscentral.com/20110207129/Technical/rdfa-the-inside-story-from-best-buy.html

http://searchnewscentral.com/20110207129/Technical/rdfa-the-inside-story-from-best-buy.html

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 Mainstreamjeudi 28 février 13

http://searchengineland.com/yahoo-searchmonkey-becomes-more-mainstream-14498

http://searchengineland.com/yahoo-searchmonkey-becomes-more-mainstream-14498

Qui les utilisent présentement?


Photo par zugaldia

Google Glass ?


http://www.flickr.com/photos/azugaldia/

http://www.flickr.com/photos/azugaldia/

Photo par topgold

Siri ?


http://www.flickr.com/photos/topgold/

http://www.flickr.com/photos/topgold/

Vous !

Photo par AJC1jeudi 28 février 13

http://www.flickr.com/photos/ajc1/

http://www.flickr.com/photos/ajc1/

Microdonnées

Résultats de recherche améliorés28 février 2013, Rémy Savard

www: remysavard.comTwiiter: @remysavardLinkedIn: /remysavard

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








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

Technology

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