Focus
Schema.org
La sémantique au secours des moteurs

Erlé ALBERTON
#dev Orange Digital Factory
#seo Voila.fr
@cubilizer
Erlé Alberton

Au programme
◎Introduction
◎Les différents markups
◎Les avantages - Richsnipets
◎Outils et bonnes pratiques
◎Concrètement sur voila.fr, ça marche ?
◎Conclusion

Pourquoi schema.org
Schema.org est une norme qui a
vu le jour en juin 2011 grâce à un
rapprochement entre Google, Bing
et Yahoo!
Il est aujourd'hui en train de devenir
un “must have” pour les sites et
applications.
La Sémantique

Un effet Boum !
https://www.similartech.com/technologies/blog-schema-entity

http://www.evolutionoftheweb.com/?hl=fr
1 read only 2 interact 3 semantic

Les moteurs ont un point commun (au moins)

“
Un seul input pour des millions
de requêtes !

1.
Introduction aux
concepts
Commençons par comprendre
les fondamentaux

“
Vos pages web ont une signification
sous-jacente comprise par les
internautes...
Mais les moteurs de recherche ont
une compréhension limitée de ce
qui est décrit sur ces pages...

Le
lexique
Schema.org ce n’est pas un language c’est une
collection de syntaxes et de vocabulaires hierarchisée
et structurée

Principe de base
itemScope
Déclare le début
d’une nouvelle
Entité
itemType
Définit le type de
l’entité
itemProp
Liste les propriétés
de l’entité

Trois choses importantes à noter :
l’itemProp peut être un itemScope / les urls absolues / la meta
http://example.com pour l’outil google
<div itemscope itemtype="http://schema.org/Event">
<a itemprop="url" href="http://www.example.com/seocamp-day-nice-sophia-antipolis....">
<span itemprop="name">SEOCamp Day Nice</span>
</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<a itemprop="url" href="http://www.example.com/nice-sophia/orange-labs.html">
<span itemprop="name">Orange Labs Sophia-Antipolis</span>
</a>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Valbonne</span>
</div>
<meta itemprop="startDate" content="2015-02-13T09:30">
</div>
</div>
Le code source est lisible

Analysons la page http://schema.org/Event
Concrètement - Hiérarchie et structure

Schema.org est structuré en deux hiérarchies :
DataType et Thing
Thing
pour les entités à
proprement dit
action, creativeWork, event,
intangible, medicalEntity,
organisation, person, place,
product
DataType
pour les valeurs des
propriétés textuelles
boolean, date, number, text, url,
time

Pouvez-vous
les citer tous ?
Antisèches

95 531 285
Sites utilisant le balisage schema.org
source https://www.similartech.com/categories/schema

QUESTION
Quel est le nombre total de
sites web en activité ?
http://www.internetlivestats.com/total-number-of-websites/

Répartition
des Things
Blog 35%
BlogPost 32%
Person 25%
Autres 18%

2.
Trois markups pour un
même résultat…
...Ou pas !

JSON-LD
Les trois syntaxes sont reconnues
et peuvent être utilisées en même temps sur une page
RDFa
Microdata

Chaque type de Thing est décrit dans les trois markups
https://developers.google.com/webmasters/business-location-pages/schema.org-examples

3.
Avantages
les rich snipets
La carotte pour nourrir les
moteurs

Mais on est
au #SEOCAMP #NICE06
on en veut plus !

https://developers.google.com/schemas/gmail/action
s
Et si on ajoute des Thing/Action dans les mails ?
C’est de la conversion ?

https://developers.google.com/gmail/markup/highlights

Gmail Actions
Gmail utilise le “markup” schema.org pour accélérer les actions utilisateur et pour mettre en avant les informations les
plus importantes pour un email utilisateur.
4 types d’action et 1 “interactive card”:
◎ RSVP Action for events
◎ Review Action for restaurants, movies, products and services
◎ One-click Action for just about anything that can be performed with a single click
◎ Go-to Action for more complex interactions
◎ Flight interactive cards
Highlights in Inbox
Inbox utilise le “markup” schema.org que Gmail pour mettre en avant les information les plus importantes et permettre
à l’utilisateur d’agir avec. Les actions RSVP, One-click et Go-to affichent également des mises en avant pour les types
de “markups” suivants:
◎ Flight Highlight
◎ Event Highlight for events with tickets
◎ Order and parcel delivery Highlights for shopping
◎ Hotel Highlight for hotel reservations
◎ Restaurant Highlight for restaurant reservations

Ok Google… “NOW !”

https://www.google.fr/search? q=translate+Qualité
https://www.google.fr/search?q=quel+est+l%27age+de+elon+musk
https://www.google.fr/maps/search/restaurant/@48.8710907,2.3498186,13z/
data=!3m1!5s0x47e66e36d5b3a1a7:0x6e3ce34bd2995e0c

https://www.google.fr/search?q=définition+intelligence+artificielle
Domaines de recherche
Langage naturel - sémantique
Reconnaissance vocale
Reconnaissance d’image
Recommendation - Contextualisation
Internet of Things
Open / Big / Huge Data
IA / Machine learning / Analyse Predictive

Answer - Converse - Anticipate

42
L’age de Obama
La formule de la dopamine
Le cours de l’action Tesla
une démo ?

4.
Outils et
bonnes pratiques
Vous n’êtes pas seuls

Bonne pratique :
copier/coller du
code source
pendant le
développement
http://www.google.com/webmasters/tools/richsnippet

https://www.bing.com/webmaster/diagnostics/markup/validat
or
Moins flatteur :
mais tout à fait
verbeux pour les urls
en prod.

Le Knowledge Graph
https://developers.google.com/webmasters/structured-data/events/?&hl=fr

https://developers.google.com/webmasters/structured-data/testing-
tool/

5.
En pratique dans
un projet
L’exemple de voila.fr

Place your screenshot here
Mes sorties avec Voila.fr
Sémantiquement très “rich”

Schema.org sur voila.fr
https://www.google.com/webmasters/tools/structured-data?hl=fr
Qualifier les types necessaires
Tester, tester et re tester
Être patient

5.
En conclusion
Finalement le SEO dans tout ça
?

Une pratique en avance sur son temps
Préparer l’avenir
Le Knowledge Graph est plus
que jamais au coeur des
réflexions de google.
Faites de la veille !
Tests et maitrise
La mise en oeuvre peut devenir
coûteuse, la phase de test en
cours de dev. doit être continue.
Les applications doivent être
sémantiques
Signal fort
S’il devait exister un signal de qualité
sémantique du code source.
Ce serait probablement celui la !
Things not string
On parle d’actions au travers
d’objets définis par des
propriétés, dans un langage
universel HTML via des
protocoles incontournables
HTTP/HTTPS
Ca marche...
Et on a maintenant toutes les
spécifications.
Les pages d’aide de Google sont
mise à jour constamment.
8% seulement
Des sites sont passés aux
microdatas.
Qu’attendez-vous ?

Merci !
Des questions ?
Contactez-moi
@cubilizer
erle.alberton@orange.com

Line Icons by Webalys, Virgil Pana and Mirko Monti are published under a Creative Commons Attribution license and Free for both personal and commercial use.
You can copy, adapt, remix, distribute or transmit them. If you use these sets on your presentation remember to keep the “Credits” slide or provide a mention
and link to these resources:
● Mirko Monti - Simple line icons
● Virgil Pana - E-commerce icons
● Webalys - Streamline iconset