Donner du sens à vos pages web avec Schema.org

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

Donner du sens à vos pages web avec Schema.org

928b54a6ffa62a308e58b8fde460b74b?s=128

Audrey Garreau

October 19, 2017
Tweet

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