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. 2.
  2. 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
  3. 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
  4. 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>
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 23.
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 36.
  19. 40.
  20. 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
  21. 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/
  22. 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/