">

Données structurées : Le guide de balisage pour les ajouter à votre site internet

Données structurées : Le guide de balisage pour les ajouter à votre site internet

Les données structurées peuvent vous aider à envoyer les bons signaux aux moteurs de recherche à propos de votre entreprise et de votre contenu. Elles permettent également améliorer sa visibilité et son attractivité via des extraits enrichis et les résultats sélectionnés dans Knowledge Graph. Mais où commencer ?

Les données structurées sont un excellent moyen de créer des signaux favorables pour les moteurs de recherche. John Mueller de Google a déclaré que le moteur de recherche peut ajouter les données structurées comme un facteur de classement. Donc, cette donnée est de plus en plus importante pour Google, il faut vraiment faire l’effort de mettre en œuvre un schéma de balisage sur votre site.

Cependant, il peut être parfois difficile de déterminer quel schéma utiliser sur votre site. Il y en a beaucoup. Ci-dessous, vous trouverez énuméré une liste de schémas selon les types de sites spécifiques. Certains peuvent être utilisés pour tous les sites.

 

1. Tous les sites

Les types de schéma de balisage suivants doivent être présents dans tous les types de site.

 

Schéma de balisage pour les entreprises

Le schéma pour les entreprises aide Google à bien comprendre votre entreprise, ses services ou produits. Il aide également à générer des signaux qui peuvent améliorer votre entrée sur Knowledge Graph et la présence de votre extrait de site dans les pages de résultats des moteurs de recherche (SERPs).

Veillez à spécifier votre logo, des liens vers vos comptes sur les réseaux sociaux et des informations de contact des entreprises.

données structurées Organisation

Exemple (en utilisant JSON-LD) :

------

<script type="application/ld+json">

{ "@context" : "http://schema.org",

"@type" : "Organization",

"legalName" : "Elite SEM",

"url" : "http://elitesem.com/",

"contactPoint" : [{

"@type" : "ContactPoint",

"telephone" : "+1-646-350-2789",

"contactType" : "customer service"

}]

"logo" : "http://elitesem.com/wp-content/uploads/2014/03/Elite_SEM_Logo_2014.png",

"sameAs" : [ "http://www.facebook.com/EliteSEM",

"http://www.twitter.com/elitesem",

"http://plus.google.com/+Elitesem",

"https://www.youtube.com/user/EliteSEMInc",

"http://www.linkedin.com/company/elite-sem",

"https://www.wikidata.org/wiki/Q20736641"]

}

</script>

-----

Schéma de balisage Site Web

Le schéma de balisage Site Web permet de générer la fonction Sitelinks Search Box et les caractéristiques pour les SERPs. Il peut également aider le nom de votre site à apparaître dans les résultats de recherche. Vous devez, bien sûr, avoir une barre de recherche sur votre site Web pour incorporer l’élément Sitelinks Search Box.

 

sitelink search box

Exemple (en utilisant JSON-LD) :

-----

<script type="application/ld+json">

{

  "@context" : "http://schema.org",

  "@type" : "WebSite",

  "name" : "Elite SEM",

  "url" : "http://elitesem.com/",

  "potentialAction" : {

    "@type" : "SearchAction",

    "target" : "http://elitesem.com/?s={search_term}",

    "query-input" : "required name=search_term"

  }                    

}

</script>
-----

Fil d’Ariane

Un fil d'Ariane (ou BreadcrumbList) sur une page indique la position de cette page dans la hiérarchie du site. Un utilisateur peut naviguer tout au long de la hiérarchie du site, un niveau à la fois, en commençant par le dernier fil d'Ariane. Il est vivement conseillé pour le référencement d'intégrer un fil d'ariane à votre site.

Le schéma BreadcrumbList vous permet également de marquer le fil d’Ariane sur votre site pour générer quelques extraits enrichis pour vos pages dans les SERPs.

breadcrumb rich snippets

Exemple (en utilisant des micro-données)

-----

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

  <li itemprop="itemListElement" itemscope

      itemtype="http://schema.org/ListItem">

    <a itemprop="item" href="https://example.com/">

        <span itemprop="name">Home</span></a>

    <meta itemprop="position" content="1" />

  </li>

  ›

  <li itemprop="itemListElement" itemscope

      itemtype="http://schema.org/ListItem">

    <a itemprop="item" href="https://example.com/activewear/">

      <span itemprop="name">Activewear</span></a>

    <meta itemprop="position" content="2" />

  </li>

  ›

  <li itemprop="itemListElement" itemscope

      itemtype="http://schema.org/ListItem">

    <a itemprop="item" href="https://example.com/activewear/tops/">

      <span itemprop="name">Tops</span></a>

    <meta itemprop="position" content="3" />

  </li>

</ol>

-----

Autre exemple (en utilisant JSON-LD) :

-----

<script type="application/ld+json">

    {

      "@context": "https://schema.org",

      "@type": "BreadcrumbList",

      "itemListElement": [{

        "@type": "ListItem",

        "position": 1,

        "name": "Books",

        "item": "https://example.com/books"

      },{

        "@type": "ListItem",

        "position": 2,

        "name": "Science Fiction",

        "item": "https://example.com/books/sciencefiction"

      },{

        "@type": "ListItem",

        "position": 3,

        "name": "Award Winners"

      }]

    }

</script>

------

 

Schéma de balisage pour la navigation du site

Le schéma SiteNavigationElement peut aider à augmenter la compréhension des moteurs de recherche sur la structure et la navigation de votre site et peut être utilisé pour influencer les liens organiques.

organic sitelink

Exemple (en utilisant des micro-données)

-----

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-advantage">Our Advantage</a></li>

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-travel-experts">Travel Experts</a></li>

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/destinations">Destinations</a></li>

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/cruises">Cruises</a></li>

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/interests">Interests</a></li>

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/explore-your-world/interests/hotels-and-resorts">Hotels</a></li>

  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/travel-guides">Travel Resources</a></li>

</ul>

-----

 

Schéma de balisage pour vidéo

Un site avec un contenu vidéo intégré ou hébergé peut exploiter le schéma VideoObject. Google affiche principalement des extraits enrichis pour les vidéos YouTube, mais ce schéma vous aidera à faire apparaître les extraits de vos pages web dans les recherches vidéos de Google.

video schema

Exemple (en utilisant des micro-données)

-----

<div itemscope itemtype="http://schema.org/VideoObject">

 <link itemprop="url" href="http://www.ted.com/talks/boaz_almog_levitates_a_superconductor">

 <meta itemprop="name" content="The levitating superconductor" />

 <meta itemprop="description" content="How can a super-thin 3-inch disk levitate something 70,000 times its own weight? In a riveting demonstration, Boaz Almog shows how a phenomenon known as quantum locking allows a superconductor disk to float over a magnetic rail — completely frictionlessly and with zero energy loss. Experiment: Prof. Guy Deutscher, Mishael Azoulay, Boaz Almog, of the High Tc Superconductivity Group, School of Physics and Astronomy, Tel Aviv University." />

 <meta itemprop="uploadDate" content="2015-02-05T08:00:00+08:00" />

 <meta itemprop="duration" content="PT10M25S">

 <img itemprop="thumbnailUrl" src="https://tedcdnpi-a.akamaihd.net/r/tedcdnpe-a.akamaihd.net/images/ted/b9693798223a4101be834398af15df5560d3f25c_1600x1200.jpg?quality=95&amp;w=480" />

</div>

-----

 

Schéma de balisage pour logiciels et applications

Utilisez la balise SoftwareApplication sur vos applications pour permettre des extraits enrichis de cette dernière.

software app rich snippets

Exemple (en utilisant des micro-données)

-----

<div itemscope itemtype="http://schema.org/MobileApplication">

  <meta itemprop="url" content="https://play.google.com/store/apps/details?id=com.elitesem.calculator">

  <h1 itemprop="name">SEM Calculator 2.0</h1>

  Updated: <span itemprop="datePublished">September 3, 2014</span>

  Size: <span itemprop="fileSize">1.9M</span>

  Requires <span itemprop="operatingSystem">Android 2.3 and up</span>

  Category: <span itemprop="applicationCategory">Business</span>

  Rating:

    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">

      <span itemprop="ratingValue">4.0</span> (

      <span itemprop="ratingCount">1</span> rating )

    </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta content="0" itemprop="price"></div>

</div>

-----

 

2. Sites e-commerce

Schéma de balisage Produits & Offres

En utilisant ensemble les balises Offres et Produits, vous pouvez faire apparaître les informations des produits dans les SERPs, y compris les prix et le stock. Notez que le balisage de l’offre est nécessaire pour que le prix puisse apparaître dans les recherches Google.

product offer rich snippets

Exemple (en utilisant des micro-données)

-----

<div itemscope itemtype="http://schema.org/Product">

  <h1 itemprop="name">Back to the Future 1:1 Scale Hoverboard</h1>

  <span itemprop="description">Time traveling to 2015 and back is only the beginning of the adventures found in Back to the Future Part II. The coolest part…was finding the hoverboard! And now the future is finally here and you can have a hoverboard of your own! This replica prop is an exact recreation from the one seen in Back to the Future II. Sure, it doesn't truly hover (come on scientists!) but carrying it around will let everyone know that you've just come back... from the future! Just don't try to use it on water! <i>Back to the Future is a trademark and copyright of Universal Studios and U-Drive Joint Venture. Licensed by Universal Studios Licensing LLC. All Rights Reserved.</i></span>

  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">

    <meta itemprop="priceCurrency" content="USD" />

    Buy New: $<span itemprop="price">48.99</span>

    <link itemprop="availability" href="http://schema.org/InStock" />

  </span> 

</div>

-----

 

Schéma de balisage pour les notes

Le schéma pour la notation est principalement utilisé sur les sites e-commerce, mais peut aussi être utilisé pour un site d’entreprise locale, comme un restaurant. Quand un élément possède plusieurs évaluations qui ont été compilés dans une moyenne, vous devrez utiliser le schéma AggregateRating.

Exemple (en utilisant des micro-données) :

-----

<div itemscope itemtype="http://schema.org/Thing">

  <h2 itemprop="name"> Super Book </h2>

  <div itemprop="description">Ultra interesting. Super impressive.</div>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">

    <div>Book rating:

      <span itemprop="ratingValue">9</span>

      <meta itemprop="bestRating" content="10"/>

      <meta itemprop="worstRating" content="1"/>

      based on <span itemprop="ratingCount">20</span> ratings

    </div>

  </div>

</div>

-----

Remarque: Google suppose que vous utilisez une échelle sur cinq points, 1 étant le plus mauvais et 5 étant le meilleur. Si vous utilisez une autre échelle, vous aurez besoin d’indiquer la note la plus élevée possible avec la propriété « BestRating ». Vous pourrez ainsi obtenir une notation dans les extraits qui apparaissent dans les recherches Google. Ressource : Activation d’extraits enrichis pour avis et évaluations.

 

3. Sites Publisher

Schéma de balisage pour les articles Si vous avez un site qui publie des actualités ou des articles, les schémas NewsArticle ou BlogPosting sont recommandés (choisir l’un ou l’autre en fonction de votre site / contenu). Ces balises peuvent aider votre contenu à apparaître dans Google News et dans la suggestion d’articles. Propriétés requises :

  • Titre
  • Image
  • Date de publication

Exemple (en utilisant JSON-LD) :

-----

<script type="application/ld+json">

{

  "@context": "http://schema.org",

  "@type": "Article",

  "headline": "Emmys 2015: The 5 categories we're most excited to see",

  "image": "http://rack.1.mshcdn.com/media/ZgkyMDE1LzA5LzIwLzQ0L2YyOGFiZmM5NmNkLmQ5ZjgxLmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/418b1a9e/940/f28abfc9-6cd9-217b-8bc7-fd48dd3621a9_MM714-21.jpg",

"keywords": ["television","emmys","uncategorized","entertainment","tv","emmys-2015"],

  "datePublished": "2015-09-20T13:39:38Z",

  "articleSection": "entertainment",

  "creator": "Sandra Gonzalez",

  "author": "Sandra Gonzalez",

  "articleBody": "The 2015 Emmy Awards are upon us, and while television's biggest night has in several years etc....",

  "mainEntityOfPage": "True"

}

</script>

-----

 

4. Sites d’entreprise locale

chéma de balisage pour sites d’entreprise locale

Vous pouvez utiliser LocalBusiness et PostalAddress pour influer sur votre référencement local. Les schémas peuvent être utilisés pour indiquer votre adresse physique, vos heures d’ouverture, les modes de paiement acceptés, etc.

Remarque: gardez à l’esprit qu’il y a aussi des schémas spécifiques à chaque secteur, tels que AutomotiveBusiness, SelfStorage, TravelAgency et beaucoup plus.

local schema markup

Exemple (en utilisant des JSON-LD) :

-----

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "LocalBusiness",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Mexico Beach",
    "addressRegion": "FL",
    "streetAddress": "3102 Highway 98"
  },
  "description": "A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.",
  "name": "Beachwalk Beachwear & Giftware",
  "telephone": "850-648-4200"
}
</script>

-----

 

5. Sites événementiels

Schéma de balisage pour les sites événementiels

Le balisage Event peut être utilisé pour les sites qui organisent des événements, des concerts ou des festivals afin de générer des extraits enrichis.

event schema markup

Exemple (en utilisant JSON-LD)

-----

<script type="application/ld+json">

{

  "@context": "http://schema.org",

  "@type": "MusicEvent",

  "name": "AC/DC",

  "image": "http://s1.ticketm.net/tm/en-us/dbimages/199365a.jpg",

  "startDate": "2015-09-25T19:45:00-07:00",

  "url": "http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200",

  "location" : {

    "@type": "Place",

    "name": "AT&T Park",

    "sameAs": "http://www.ticketmaster.com/AT-T-Park-tickets-San-Francisco/venue/229585",

    "address" : {

      "@type": "PostalAddress",

      "streetAddress": "24 Willie Mays Plaza",

      "addressLocality":"San Francisco",

      "addressRegion":"CA",

      "postalCode":"94107",

      "addressCountry":"US"

      }

   },

  "offers" : {

    "@type" : "Offer",

    "url":"http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200"

  }

}

</script>

-----

Page de ressources Google : Activation d’extraits enrichis pour les événements

Remarque : vous pouvez également promouvoir vos événements dans Knowledge Graph de Google; obtenir plus d’infos ici : Lister vos événements dans Knowledge Graph.

 

6. Sites de recettes

Schéma de balisage pour sites de recettes

Les sites de recettes peuvent utiliser Recipe pour obtenir des extraits enrichis.

recipe rich snippets

Exemple (en utilisant des micro-données)

-----

<div itemscope itemtype="http://schema.org/Recipe">

  <link itemprop="url" href="http://allrecipes.com/recipe/12682/apple-pie-by-grandma-ople/" />

  <meta itemprop="mainEntityOfPage" content="True" />

  <img src="http://images.media-allrecipes.com/userphotos/720x405/736203.jpg" alt="Apple Pie by Grandma Ople" title="Apple Pie by Grandma Ople" itemprop="image" />

  <h1 itemprop="name">Apple Pie by Grandma Ople</h1>

  <div itemprop="description">"This was my grandmother's apple pie recipe.  I have never seen another one quite like it.  It will always be my favorite and has won me several first place prizes in local competitions.  I hope it becomes one of your favorites as well!"</div>




Prep Time: <time itemprop="prepTime" datetime="PT30M">30 min</time>

Cook Time: <time itemprop="cookTime" datetime="PT1H">1 hour</time>

Total Time: <time itemprop="totalTime" datetime="PT1H30M">1 hour 30 min</time>

Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>




Ingredients:

<span itemprop="ingredients">1 recipe pastry for a 9 inch double crust pie</span>

<span itemprop="ingredients">1/2 cup unsalted butter</span>

<span itemprop="ingredients">3 tablespoons all-purpose flour</span>

<span itemprop="ingredients">1/4 cup water</span>

<span itemprop="ingredients">1/2 cup white sugar</span>

<span itemprop="ingredients">1/2 cup packed brown sugar</span>

<span itemprop="ingredients">8 Granny Smith apples - peeled, cored and sliced</span>




  <ol itemprop="recipeInstructions">

    <li>Preheat oven to 425 degrees F (220 degrees C).</li>

    <li>Melt the butter in a saucepan. Stir in flour to form a paste.</li>

  ...

  </ol>

</div>

-----

 

Sites personnels

Schéma de balisage pour les sites personnels

Le balisage Person peut être un levier pour influencer les résultats sur Knowledge Graph à propos d’un individu.

person-schema

Exemple (en JSON-LD) :

-----

    <script type="application/ld+json">

    {

      "@context": "http://schema.org/",

      "@type": "Person",

      "name": "Albert Einstein",

      "hasOccupation": [

        {

          "@type": "Role",

          "hasOccupation": {

          "@type": "Occupation",

          "name": "Patent examiner",

            "occupationalCategory": "23-2099.00"

          },

          "startDate": "1901",

          "endDate": "1906"

        },

        {

          "@type": "Occupation",

          "name": "Professor of Physics",

          "educationRequirements": "PhD in Physics"

        }

      ]

    }

    </script

-----

 

Page de ressources Google : Person (sur Schema.org)

 

Veillez à utiliser les ressources suivantes pour surveiller et tester votre schéma de balisage et de vos données structurées.

Notez que votre site peut être frappé par une pénalité si vous ne suivez pas les directives de Google pour les données structurées.

Vous avez maintenant tout ce qu’il vous faut pour structurer correctement vos données et utiliser les balises adaptées à votre site personnel ou professionnel. N’hésitez pas à nous faire part de vos impressions, suggestions ou expériences en nous laissant un commentaire.

Retour

Partagez

S’inscrire à la newsletter

Inscription rapide et gratuite

Rédaction

Besoin d’un rédacteur pour créer ou optimiser vos contenus web ?

Contactez-nous pour commander rapidement vos textes

Flèche Rédaction Contactez-nous Rédaction

Graphisme

Logo,
Webdesign,
Identité visuelle

Contactez-nous pour recevoir un devis

Flèche Rédaction Contactez-nous Rédaction

Référencement

Besoin d’un expert SEO / SEA ?

Contactez-nous pour une meilleure position sur Google

Flèche Rédaction Contactez-nous Rédaction
Se connecter

Commentaires :

Il n'y a pas de Commentaires pour l'instant

écrire un commentaire

L'agence de Web marketing à Aix en provence

Dans le Web, la stratégie digitale est essentielle. C’est le fondement de votre réussite.
Contactez-nous pour créer des sites web engageants et optimisés pour le référencement

icone croissance
Les cookies assurent le bon fonctionnement de nos services. En utilisant ces derniers, vous acceptez l'utilisation des cookies.