Embed Size (px)
Citation preview
PROFITER CONCRETEMENT DU BALISAGE SEMANTIQUE
SCHEMA.ORGComment révolutionner votre contenu
TUNISEO 2016
ASLAMA!
Je suis Erlé ALBERTONResponsable SEO des Boutiques Online
Orange et Sosh et Ex-developpeur@cubilizer
INTERVIEWVoyons un peu qui se cache dans la salle
LEVEZ LA MAIN SI
◉vous êtes développeur◉vous avez une adresse physique pour votre entreprise◉vous envoyez des newsletters◉vous vendez des tickets pour des événements◉vous vendez des produits en ligne◉vos clients écrivent des avis sur ces produits◉vos clients ont une adresse Gmail
“Bouclez votre ceinture,éteignez vos smartphones vous n’aurez pas le temps de tweeter
*PNC aux portes
CECI EST UNE REVOLUTION !La phrase “OK Google” va devenir la phrase la plus utilisée dans le monde dans les années qui viennent
Place your screenshot here
Place your screenshot here
CECI EST LA VRAIE REVOLUTION !Schema.org (prononcez SKIMA) explique, définit et regroupe toutes les hierarchies des “entités” existantes
“J’ai fait un rêve dans lequel les ordinateurs deviennent capables d’analyser toutes les
données sur le Web - le contenu, les liens, et les transactions entre les personnes et les
machines. [...] où tous les aspects de nos vies quotidiennes seront traités par des machines
dialoguant avec d'autres machines.
Sir Tim Berners Lee
Introduction des concepts de
Sémantique WebReprenons du début 1
LE WEB SEMANTIQUE - WEB 3.0
◉Le Web de données à vu le jour dans les années 90 avec la structure RDF - Resource Description Framework
◉La norme Schema.org Juin 2011 (version actuelle 2.2)◉HTML 5 finalisé en Octobre 2014
Le WEB sémantique n’est pas une révolution,c’est son exploitation par Google qui en est une !
LA SEMANTIQUE C’EST :
l’étude de l’être en tant qu’être c'est-à-dire l'étude des propriétés générales de tout ce qui existe
l'ensemble structuré des termes et concepts représentant le sens d'un champ d'information, que ce soit par les métadonnées d'un espace de noms, ou les éléments d'un domaine de connaissances
COMMENT CA MARCHAIT AVANT ? RDFLe Triplet RDF est un Graph Orienté qui permet de lier deux concepts “entités”
Sujet
Objet
prédicat Shakespeare
Romeo et Juliettea écrit
Artiste
Oeuvre littéraire
est un
est une
BEURK ! LE SLIDE PLEIN DE CODE
Vocab:http://schema.org
Typeof:Restaurant
Property:Name, address, servesCuisine, priceRange, openingHour, …
! aggregateRating: Property & typeOf
La structure de l’exemple précédent
COMMENT CA MARCHE AUJOURD’HUI ? Microdata
Schema.org ce n’est pas un language c’est une collection de syntaxes et de vocabulaires, hierarchisée et structurée
itemScope
Déclare le début d’une nouvelle Entité
itemProp
Liste les propriétés de l’entité
itemType
Cadre le type de l’entité
C’EST TRES RESSEMBLANT AU PREMIER CODE
itemScope
itemType :http://schema.org/Restaurant
itemProp:Name, address, servesCuisine, priceRange, openingHour, …
! aggregateRating: itemProp & itemScope &
itemType
UNE VUE DU SITE SCHEMA.ORG
Un “Event” hérite de l’entité mère “Thing”
Il a des propriétés qui lui sont propres :Date, location, offers,Organizer, performers…
Et des entités filles qui sont des types d’événements particuliers
UNE ADOPTION QUI LAISSE BEAUCOUP DE PLACE
COMMENT CA MARCHERA DEMAIN (aujourd’hui) ?
COMMENT CA MARCHERA DEMAIN (aujourd’hui) ?
Le Json est le format le plus léger pour les échanges #M2M MachineToMachine
Il est massivement adopté par les développeurs pour créer des #API
Schema.org normalise la structure du langage
J’AI TOUTE VOTRE ATTENTION ?
Rassurez-vous ! vous faites déjà de la sémantique :)
Dans sa version 5, la spécification du langage HTML
permet d’ouvrir la porte à des balises purement
sémantiques comme main, header, footer, nav, aside, section. Elles viennent s’ajouter aux
balises h1...n, title, meta, em, strong, ul/li, ol/li, dd/dt, figure, blocquote, time, date, que les développeurs et aujourd’hui les
SEO doivent utiliser de façon optimale pour favoriser la
qualité du code source.
Puisque c'est bien de qualité dont il est question !Extrait de mon article sur abondance.com :http://recherche-referencement.abondance.com/2015/09/le-balisage-semantique-next-seo-big.html
Les nouveautés Le web évolue très vite 2
WEB 1 Read onlyXML / HTML
WEB 2 InteractAJAX
WEB 3 SemanticSCHEMA.ORG
LES NOUVEAUTES
Du coté de Google◉ Rich Snippets◉ Knowledge Graph◉ Direct Answers◉ Top box◉ Related Search◉ Google Now
Coté technique ◉ JSON-LD◉ API◉ Deep linking
Différentes sources de données un seul objectif la Connaissance globale et la compréhension du monde physique
Comprendre le monde c’est potentiellement mieux comprendre les requetes des utilisateurs
C’est la base des moteurs de réponses
La partie facile Les Rich Snippets 3
Les chemins de fer : breadcrumb
Sitelinks Search Box : commencer l’experience de votre site dès Google
Les avis clients ! Augmentation instantanée du CTR (kpi indirect pour le ranking)
Un balisage imbriqué
Product ReviewReview
Review...
Optimiser son KnowledgeGraph
Les événements : Avec cette méthode gratuite doubler la taille de votre réponse
Les pages de listing produitsCréer des tableaux JSON-LD
Soyons plus malins Trouver des idées grâce à schema.org 4
Je suis une agence de location à Tunis● J’ai donc une propriété adresse schema.org● un Knowledge Graph avec mon logo, mes comptes
sociaux, mes numéros de teléphone● mes clients peuvent laisser des avis sur mon
agence ou mes appartements
Comment enrichir mon contenu ?Je créé des événements liés à mon activité
Je peux créer une page sur la résidence dans lequel l’appartement est disponible
Une page sur ma ville avec les données disponibles Gratuitement grâce à l’open Data
Je peux envoyer des mails enrichis avec les données de réservation
“Quoi, des mails enrichis avec
schema.org ?
88 440 000 000
emails envoyés par jours (hors spam)
A quoi correspondra ce chiffre en 2017 ?
Google lit TOUS vos emails
ENRICHIR LES MAILS AVEC SCHEMA.ORG
GOOGLE NOWVotre assistant personnel intelligent#AI #M2M #MachineLearning
Place your screenshot here
Place your screenshot here GOOGLE INBOXL’enrichissement de vos mails devient une nouvelle manière de travailler votre image de marque et vous donne un avantage sur la relation client 3.0
Les best practices Il ne faut pas faire n’importe quoi attention à la
pénalité pour sur-optimisation5
#RTFM
Google tient à jour toute la documentation afin de faire adhérer les éditeurs de sites à la technologie
https://developers.google.com/structured-data/
HOW TO ?
La technique pour appliquer le balisage sémantique est assez simple :1. déterminer l’objet ou l’item à décrire, il sera le scope2. déterminer son type le plus précisément possible3. décrire les propriétés héritées de la définition par type4. n’hésitez pas à imbriquer les objets dès que cela est possible
CONTENU UNIQUE / SCHEMA UNIQUE
Comme pour la création de votre contenu :vous devez décrire une seule entité par page
elle peut imbriquer d’autres entités de contexte - ne pas trop les décrire
Donc on ne duplique pas le code Webiste du header sur toutes les pages
AJOUTEZ LES DONNEES NON VISIBLES
Utiliser au maximum la norme HTML5 - penser à nourrir le KnowledgeGraph <Meta /> en coeur de page
Test and Try and Learn and Test and
Try and Learn ... La qualité est un KPI important pour Google 5
EN TROIS TEMPS
En DEV/RECVous devez constamment savoir si votre intégration est correcte
Problème :Le code est en local
En PRODVous êtes certain de votre intégration, mais vous n’êtes pas Google
Problème :Google a-t-il bien compris ?
En RUNVous avez fait des mises à jour, changer l’équipe de DEV, votre client ne vous comprend pas
Problème : Comment suivre l’évolution de ma qualité ?
GARANTIR LA QUALITE DE SON CODE SOURCE DEV/REC
Tester son code grâce à l’outil “Structured Data Testing Tool”
avant de passer en Prod pour garantir la qualité du balisage
sémantique
Place your screenshot here
GOOGLE SEARCH CONSOLEVos données sémantiques vues par Google… C’est important de savoir ce qui est vraiment compris
GARANTIR LA QUALITE DE SON CODE SOURCE PROD
Tester Gratuitement OnCrawl avec le code : TUNISEO
Crawler de manière récurrente le site pour suivre les
changements éventuels
GARANTIR LA QUALITE DE SON CODE SOURCE RUN
Quel est le nom anglaisdes affichages enrichis ?
CREDITS
Special thanks to all the people who made and released these awesome resources for free:◉ Presentation template by SlidesCarnival◉ Photographs by Unsplash
