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

Post on 04-Dec-2014

1.127 views 0 download

description

Les microdonnées HTML5 permettent d’associer des libellés à des contenus afin de décrire un type d'information spécifique (événement, personne, etc.) et aident les moteurs de recherche à mieux comprendre les pages Web, d'où de meilleurs résultats. Présentation, avantages, utilisations et exemple de codes seront les contenus de cet présentation.

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

Rémy Savard

jeudi 28 février 13

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

Photo par Robert Scoble

Beaucoup de données

jeudi 28 février 13

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

Photo par jose.jhg

Dans le HTML, les données perdent leurs structure

jeudi 28 février 13

Ok, j'aime conduire des Jaguars

jeudi 28 février 13

Mon frère à vu une maman couguar!

jeudi 28 février 13

Photo par dracobotanicus

Peut-être...

jeudi 28 février 13

XFemme qui cherche des relations sexuelles avec des

hommes considérablement plus jeunes

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

Document web

jeudi 28 février 13

Document web

<p>

jeudi 28 février 13

Document web

<p>

<ul>

jeudi 28 février 13

Document web

<p>

<ul>

<ol>

jeudi 28 février 13

Document web

<p>

<ul>

<ol><div>

jeudi 28 février 13

Document web

<p>

<a>

<ul>

<ol><div>

<article>

<section>

<span>

<form>

<input><time>

<link>

<meta>

<img>

<table>

<figure>

<video>

<h1>

jeudi 28 février 13

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

jeudi 28 février 13

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

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

Un vocabulaire partagéPhoto par lars hammar

jeudi 28 février 13

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

jeudi 28 février 13

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

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

Personnes

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

Personnes

Organisations

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

Personnes

Organisations

Lieux

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

Personnes

Organisations

LieuxCritiques

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

Personnes

Organisations

LieuxCritiques

Restaurants

jeudi 28 février 13

Les typesCatégorie de personnes ou de choses ayant des

caractéristiques communes

Produits

Événements

Films

Recettes

Personnes

Organisations

LieuxCritiques

Restaurants

Applications

jeudi 28 février 13

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

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

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

RDFa est extensible et très expressif, mais la complexité de la langue a contribué

au ralentissement de l'adoption

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

Les microdonnées sont la plus récente normeà grande diffusion, créée avec HTML5.

Bien équilibré entre l'extensibilité et de la simplicité

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

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

jeudi 28 février 13

<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

jeudi 28 février 13

<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

jeudi 28 février 13

schema.org/Moviejeudi 28 février 13

schema.org/Moviejeudi 28 février 13

<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

jeudi 28 février 13

<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

jeudi 28 février 13

<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"  value="1954-­‐04-­‐16">August  16,  1954)</span>

</div><span  itemprop="genre">Science  fiction</span><a  href="../movies/avatar-­‐theatrical-­‐trailer.html"  itemprop="trailer">Trailer</a>

</div>

value

jeudi 28 février 13

datetime

<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  <time  itemprop="birthDate"  datetime="1954-­‐04-­‐16">August  16,  1954)</time>

</div><span  itemprop="genre">Science  fiction</span><a  href="../movies/avatar-­‐theatrical-­‐trailer.html"  itemprop="trailer">Trailer</a>

</div>

jeudi 28 février 13

<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  itemprop="genre">Science  fiction</span><a  href="../movies/avatar-­‐theatrical-­‐trailer.html"  itemprop="trailer">Trailer</a>

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

itemref

jeudi 28 février 13

Représenter les donnéescontenus dans les sites Web

Photo par \!/_PeacePlusOnejeudi 28 février 13

1. Extraits enrichis2. Google Knowledge Graph

3. Authorship

jeudi 28 février 13

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

Google, Extraits enrichisjeudi 28 février 13

Extraits enrichisjeudi 28 février 13

Extraits enrichisjeudi 28 février 13

cake

Extraits enrichisjeudi 28 février 13

Extraits enrichisjeudi 28 février 13

Outil de test des données structurées

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

Outil de test des données structurées

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

Outil de test des données structurées

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

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

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.

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

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, À propos du marqueur de donnéesjeudi 28 février 13

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

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

Google Knowledge Graphjeudi 28 février 13

Google Knowledge Graphjeudi 28 février 13

Google Knowledge Graphjeudi 28 février 13

popular movies of 2011

Google Knowledge Graphjeudi 28 février 13

Google Knowledge Graphjeudi 28 février 13

Google Knowledge Graphjeudi 28 février 13

montreal canadians

Google Knowledge Graphjeudi 28 février 13

Google Knowledge Graphjeudi 28 février 13

Photo par j-blocker

Authorship

jeudi 28 février 13

Authorshipjeudi 28 février 13

matt cutts

Authorshipjeudi 28 février 13

Authorshipjeudi 28 février 13

Tableau de bord des données structurées

Photo par N Stjernajeudi 28 février 13

Trois vuesSite

Type d'élémentPage

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

Est-ce que ça fonctionne vraiment ?

jeudi 28 février 13

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

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

Qui les utilisent présentement?

jeudi 28 février 13

jeudi 28 février 13

Photo par zugaldia

Google Glass ?

jeudi 28 février 13

Photo par topgold

Siri ?

jeudi 28 février 13

Vous !

Photo par AJC1jeudi 28 février 13

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

jeudi 28 février 13