Conférence sur l'application des vocabulaires sémantiques Schema.org au sein de projets web de grande ampleur

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

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

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

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

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

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

7. Les moteurs ont un point commun (au moins)

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

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

10. “
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...

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

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

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

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

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

16. Pouvez-vous
les citer tous ?
Antisèches

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

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

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

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

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

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

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

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

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

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

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

30. Ok Google… “NOW !”

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

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

33. Answer - Converse - Anticipate

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

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

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

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

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

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

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

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

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

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

44. 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 ?

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

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