Universite Nice Sophia Antipolis´ Institut Universitaire ...
Focus schema.org et sémantique SEOCamp Nice Sophia-Antipolis
46
Focus Schema.org La sémantique au secours des moteurs
-
Upload
erle-alberton -
Category
Data & Analytics
-
view
416 -
download
1
Transcript of Focus schema.org et sémantique SEOCamp Nice Sophia-Antipolis
Focus
Schema.orgLa 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
lexiqueSchema.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 ditaction, creativeWork, event,
intangible, medicalEntity,
organisation, person, place,
product
DataType
pour les valeurs des
propriétés textuellesboolean, date, number, text, url,
time
95 531 285Sites 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 ThingsBlog 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 ActionsGmail 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 InboxInbox 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
s
https://www.bing.com/webmaster/diagnostics/markup/validat
or
Moins flatteur :
mais tout à fait
verbeux pour les urls
en prod.
Le Knowledge Graphhttps://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’avenirLe Knowledge Graph est plus
que jamais au coeur des
réflexions de google.
Faites de la veille !
Tests et maitriseLa 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 fortS’il devait exister un signal de qualité
sémantique du code source.
Ce serait probablement celui la !
Things not stringOn 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% seulementDes sites sont passés aux
microdatas.
Qu’attendez-vous ?
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
