Donner du sens à vos pages web avec Schema.org

Transcript

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

2. None

3. Knowledge panel Résultats organiques Rich snippets

4. Knowledge Graph

5. Knowledge panel Résultats organiques Rich snippets

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

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. 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. Pourquoi utiliser Schéma.org ?

10. Comment mettre en place Schéma.org ?

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. 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. 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. 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. . 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. . 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. ✨ Mais tout ceci n’est pas magique !!! ✨

18. Full Hierarchy schema.org/docs/full.html

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

20. Propriété Name héritée

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. Schéma.org, un site très complet donc : RTFM...

23. Exemples

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. 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. 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. Microdata, RDFa or JSON-LD… That is the question...

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. Recette : Rich Snippets

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. Événement : Rich Snippets

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

    - etc. - Volcano… - MovieRentalStore...

33. Il existe des outils !

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. https://search.google.com/structured-data/testing-tool

36. None

37. Attention ! A ne pas faire...

38. Ça ne passera pas inaperçu !

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

    ?)
40. None

41. searchAction : Rich Snippets

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. Schéma.org dans votre Gmail !

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

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

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

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

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

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

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

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

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. Aller + loin en contribuant !

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. À vous de jouer !!!

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