Donner du sens à vos pages web avec Schema.org

Transcript

1. Schéma.org Donner du sens à vos pages web avec Schéma.org
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
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 ?)
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