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 ...
Pourquoi schema.org
Schema.org est une norme qui a
vu le jour en juin 2011 grâce à un
rapprochement entre Google, Bing
et ...
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 c...
Le
lexique
Schema.org ce n’est pas un language c’est une
collection de syntaxes et de vocabulaires hierarchisée
et structu...
Principe de base
itemScope
Déclare le début
d’une nouvelle
Entité
itemType
Définit le type de
l’entité
itemProp
Liste les ...
Trois choses importantes à noter :
l’itemProp peut être un itemScope / les urls absolues / la meta
http://example.com pour...
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, creativeW...
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/sc...
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 convers...
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 info...
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...
https://www.google.fr/search?q=définition+intelligence+artificielle
Domaines de recherche
Langage naturel - sémantique
Rec...
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 pr...
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
Test...
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 g...
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...
Focus schema.org et sémantique SEOCamp Nice Sophia-Antipolis
Focus schema.org et sémantique SEOCamp Nice Sophia-Antipolis
Prochain SlideShare
Chargement dans…5
×

Focus schema.org et sémantique SEOCamp Nice Sophia-Antipolis

904 vues

Publié le

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

Publié dans : Données & analyses
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
904
Sur SlideShare
0
Issues des intégrations
0
Intégrations
25
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Focus schema.org et sémantique SEOCamp Nice Sophia-Antipolis

  1. 1. Focus Schema.org La sémantique au secours des moteurs
  2. 2. Erlé ALBERTON #dev Orange Digital Factory #seo Voila.fr @cubilizer Erlé Alberton
  3. 3. Au programme ◎Introduction ◎Les différents markups ◎Les avantages - Richsnipets ◎Outils et bonnes pratiques ◎Concrètement sur voila.fr, ça marche ? ◎Conclusion
  4. 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. 5. Un effet Boum ! https://www.similartech.com/technologies/blog-schema-entity
  6. 6. http://www.evolutionoftheweb.com/?hl=fr 1 read only 2 interact 3 semantic
  7. 7. Les moteurs ont un point commun (au moins)
  8. 8. “ Un seul input pour des millions de requêtes !
  9. 9. 1. Introduction aux concepts Commençons par comprendre les fondamentaux
  10. 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. 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. 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. 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. 14. Analysons la page http://schema.org/Event Concrètement - Hiérarchie et structure
  15. 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. 16. Pouvez-vous les citer tous ? Antisèches
  17. 17. 95 531 285 Sites utilisant le balisage schema.org source https://www.similartech.com/categories/schema
  18. 18. QUESTION Quel est le nombre total de sites web en activité ? http://www.internetlivestats.com/total-number-of-websites/
  19. 19. Répartition des Things Blog 35% BlogPost 32% Person 25% Autres 18%
  20. 20. 2. Trois markups pour un même résultat… ...Ou pas !
  21. 21. JSON-LD Les trois syntaxes sont reconnues et peuvent être utilisées en même temps sur une page RDFa Microdata
  22. 22. Chaque type de Thing est décrit dans les trois markups https://developers.google.com/webmasters/business-location-pages/schema.org-examples
  23. 23. 3. Avantages les rich snipets La carotte pour nourrir les moteurs
  24. 24. Mais on est au #SEOCAMP #NICE06 on en veut plus !
  25. 25. https://developers.google.com/schemas/gmail/action s Et si on ajoute des Thing/Action dans les mails ? C’est de la conversion ?
  26. 26. https://developers.google.com/gmail/markup/highlights
  27. 27. 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
  28. 28. Ok Google… “NOW !”
  29. 29. 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
  30. 30. 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
  31. 31. Answer - Converse - Anticipate
  32. 32. 42 L’age de Obama La formule de la dopamine Le cours de l’action Tesla une démo ?
  33. 33. 4. Outils et bonnes pratiques Vous n’êtes pas seuls
  34. 34. Bonne pratique : copier/coller du code source pendant le développement http://www.google.com/webmasters/tools/richsnippet
  35. 35. https://www.bing.com/webmaster/diagnostics/markup/validat or Moins flatteur : mais tout à fait verbeux pour les urls en prod.
  36. 36. Le Knowledge Graph https://developers.google.com/webmasters/structured-data/events/?&hl=fr
  37. 37. https://developers.google.com/webmasters/structured-data/testing- tool/
  38. 38. 5. En pratique dans un projet L’exemple de voila.fr
  39. 39. Place your screenshot here Mes sorties avec Voila.fr Sémantiquement très “rich”
  40. 40. 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
  41. 41. 5. En conclusion Finalement le SEO dans tout ça ?
  42. 42. 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 ?
  43. 43. Merci ! Des questions ? Contactez-moi @cubilizer erle.alberton@orange.com
  44. 44. 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

×