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

Pouvez-vous

les citer tous ?Antisèches

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 ?

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