Donner du sens à vos pages web avec Schema.org

928b54a6ffa62a308e58b8fde460b74b?s=47 Audrey Garreau
October 19, 2017
0
170

Donner du sens à vos pages web avec Schema.org

928b54a6ffa62a308e58b8fde460b74b?s=128

Audrey Garreau

October 19, 2017
Tweet

Want more?

928b54a6ffa62a308e58b8fde460b74b?s=48 agarreau
0
21
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
9
460
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
240
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
160
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
300
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
6
210
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
290
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
540
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
160
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
250
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
810

Transcript

  1. 1.

    Schéma.org Donner du sens à vos pages web avec Schéma.org

  2. 2.
    None
  3. 3.

    Knowledge panel Résultats organiques Rich snippets

  4. 4.

    Knowledge Graph

  5. 5.

    Knowledge panel Résultats organiques Rich snippets

  6. 6.

    Qu’est-ce que Schéma.org ?

  7. 7.

    Exemple sans Schéma.org <h1>Cinquante nuances de Pug</h1> <p>Une romance romantique

    dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> <span>Réalisateur : Ridley Scott</span> <span>Acteur : Doug the Pug</span> index.html
  8. 8.

    Exemple avec Schéma.org <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante nuances de

    Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  9. 9.

    Pourquoi utiliser Schéma.org ?

  10. 10.

    Comment mettre en place Schéma.org ?

  11. 11.

    1. Identifiez la section portant sur le même sujet index.html

    <h1>Cinquante nuances de Pug</h1> <p>Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> <span>Réalisateur : Ridley Scott</span> <span>Acteur : Doug the Pug</span>
  12. 12.

    2. Ajoutez itemscope <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante nuances de

    Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  13. 13.

    3. Précisez le type d’ élément avec itemtype <div itemscope

    itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante nuances de Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  14. 14.

    4. Précisez les propriétés avec itemprop <div itemscope itemtype="http://schema.org/Movie"> <h1

    itemprop="name">Cinquante nuances de Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  15. 15.

    . Les éléments sont imbricables <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante

    nuances de Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  16. 16.

    . Les éléments sont imbricables <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante

    nuances de Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  17. 17.

    ✨ Mais tout ceci n’est pas magique !!! ✨

  18. 18.

    Full Hierarchy schema.org/docs/full.html

  19. 19.

    Type = Movie http://schema.org/Movie itemtype propriétés

  20. 20.

    Propriété Name héritée

  21. 21.

    Types imbriqués et propriétés héritées <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante

    nuances de Pug</h1> <p itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  22. 22.

    Schéma.org, un site très complet donc : RTFM...

  23. 23.

    Exemples

  24. 24.

    Microdatas <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Cinquante nuances de Pug</h1> <p

    itemprop="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div itemprop="director" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Ridley Scott</span> </div> Acteur : <div itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Doug the Pug</span> </div> </div> index.html
  25. 25.

    RDFa <div vocab="http://schema.org/" typeof="Movie"> <h1 property="name">Cinquante nuances de Pug</h1> <p

    property="description">Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.</p> Réalisateur : <div property="director" typeof="Person"> <span property="name">Ridley Scott</span> </div> Acteur: <div property="actor" typeof="Person"> <span property="name">Doug the Pug</span> </div> </div> index.html
  26. 26.

    JSON-LD <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Movie", "name": "Cinquante

    nuances de Pug", "description": "Une romance romantique dans laquelle Doug, le célèbre carlin, découvre l’existence du jardin des plaisirs.", "director": { "@type": "Person", "name": "Ridley Scott" }, "actor": { "@type": "Person", "name": "Doug the Pug" } } </script> index.html
  27. 27.

    Microdata, RDFa or JSON-LD… That is the question...

  28. 28.

    Recette <div itemscope itemtype="http://schema.org/Recipe"> <span itemprop="name">La tarte aux pommes selon

    Doug</span> Par <span itemprop="author">Doug the Pug</span> <img itemprop="image" src="dougapplepie.jpg" alt="La tarte aux pommes de Doug" /> <span itemprop="description">Doug présente la recette de la tarte aux pommes qu’il détient de sa grand-mère.</span> Temps de total : <meta itemprop="cookTime" content="PT5M">5 minutes /> Ingredients : - <span itemprop="recipeIngredient">3 oeufs</span> - <span itemprop="recipeIngredient">3 pommes</span> ... Instructions : <p itemprop="recipeInstructions"> Étaler la pâte pré-faite. Disposer les pommes pré-découpées. Au four ! </p> </div> index.html
  29. 29.

    Recette : Rich Snippets

  30. 30.

    Événement <div itemscope itemtype="http://schema.org/Event"> <div itemprop="startDate" content="2017-10-19T08:00">19 octobre 2017 8h00</div>

    <div itemprop="name">Le Pugfest</div> <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">La Cité</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">5 Rue de Valmy</span> <span itemprop="addressLocality">Nantes</span> <span itemprop="postalCode">44000</span> </div> </div> <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div itemprop="price" content="90.00">€90.00</div> <span itemprop="priceCurrency" content="EUR" /> <a itemprop="url" href="http://www.pugfest.com/purchase/myticket">Billets</a> </span> </div> index.html
  31. 31.

    Événement : Rich Snippets

  32. 32.

    Autres exemples avec Schéma.org - BreadcrumbList, - SoftwareApplication, - VideoObject,

    - etc. - Volcano… - MovieRentalStore...
  33. 33.

    Il existe des outils !

  34. 34.

    Outils disponibles Hiérarchie Schéma.org : http://schema.org/docs/full.html Outil Google : https://search.google.com/structured-data/testing-tool

    Rapport dans Google Search Console : https://www.google.com/webmasters/tools/structured-data Kalicube.pro : (Serp Simulator, Knowledge Graph Explorer, Schema Markup Generator) https://www.google.com/webmasters/tools/structured-data
  35. 35.

    https://search.google.com/structured-data/testing-tool

  36. 36.
    None
  37. 37.

    Attention ! A ne pas faire...

  38. 38.

    Ça ne passera pas inaperçu !

  39. 39.

    Schema.org c’est super, pas (encore) convaincu ? (ou déjà parti

    ?)
  40. 40.
    None
  41. 41.

    searchAction : Rich Snippets

  42. 42.

    searchAction <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "https://www.pugbay.fr/",

    "potentialAction": { "@type": "SearchAction", "target": "https://www.pugbay.fr/catalogsearch/result/?q={search_term}", "query-input": "required name=search_term" } } </script> index.html
  43. 43.

    Schéma.org dans votre Gmail !

  44. 44.

    Gmail - ViewAction TrackAction https://developers.google.com/gmail/markup/reference

  45. 45.

    Gmail - ConfirmAction SaveAction https://developers.google.com/gmail/markup/reference

  46. 46.

    Gmail - RsvpAction https://developers.google.com/gmail/markup/reference

  47. 47.

    Gmail - ReviewAction https://developers.google.com/gmail/markup/reference

  48. 48.

    Gmail - ParcelDelivery https://developers.google.com/gmail/markup/reference

  49. 49.

    Gmail - Order https://developers.google.com/gmail/markup/reference

  50. 50.

    Gmail - EventReservation https://developers.google.com/gmail/markup/reference

  51. 51.

    Gmail - FlightReservation https://developers.google.com/gmail/markup/reference

  52. 52.

    Outils disponibles Documentation Google : https://developers.google.com/gmail/markup/ Outil d'aide au balisage

    de données structurées (+ général) : https://www.google.com/webmasters/markup-helper/ Outil de test Google : https://www.google.com/webmasters/markup-tester/
  53. 53.

    Aller + loin en contribuant !

  54. 54.

    Contribuer à Schéma.org Sources et tickets : https://github.com/schemaorg/schemaorg Mailing list

    : https://lists.w3.org/Archives/Public/public-schemaorg/ Groupe W3C : https://www.w3.org/community/schemaorg/
  55. 55.

    À vous de jouer !!!

  56. 56.

    Merci pour votre attention AUDREY GARREAU Co-fondatrice de Yumigo @garreau_audrey