Amin Bouraiss

Les données structurées : La langue des moteurs de recherche

Tout le monde le sait, les moteurs de recherche ont pour but de vous offrir l’information la plus pertinente possible en fonction de vos requêtes. Mais un même mot clé peut avoir plusieurs sens, et l’ambiguïté n’est pas (encore) le fort des robots. Prenons un exemple, vous faites une recherche autour du film Ratatouille, vous entrez la requête «ratatouille film» Google comprend que vous voulez des informations sur le film de Disney, pas la spécialité culinaire niçoise.

SERP ratatouille le film

Les choses se compliquent au sixième résultat, c’est une page de recette, mais elle a aussi pour thème le film de Disney. Son champ sémantique est donc moins clair pour le robot d’indexation.

SERP ratatouille le film

Les données structurées sont apparues en réponse à ce problème, elles vous permettent d’indiquer sans aucune ambiguïté aux moteurs de recherche la signification du contenu de votre site web. Elles sont en passe de devenir un outil incontournable de tout SEO et en lisant cet article, vous comprendrez très vite pourquoi.

Plan de l’article

Les données structurées, qu’est-ce que c’est?

C’est tout simplement une technique consistant à décrire le contenu de votre site web dans un format compréhensible par une machine. Vous placez des balises dans certains éléments de votre page pour les mettre en relation avec des documents de référence, des «pages du dictionnaire» pour moteurs de recherche.

Pourquoi les utiliser?

Les données structurées peuvent être utiles dans plusieurs domaines:

  • Favoriser les clics sur vos résultats de recherche
  • Influencer le Knowledge Graph pour gagner en visibilité
  • Rester à l’esprit de vos clients avec les cartes Google Now
  • Des campagnes courriel plus performantes

Favoriser les clics avec les extraits enrichis

Les extraits enrichis ou rich snippets sont des informations supplémentaires qui peuvent être ajoutées aux lignes de description des résultats de recherche. Leur utilisation nécessite la mise en place de données structurées.

Extraits enrichis

Avec les extraits enrichis, vous gagnez en visibilité par rapport à vos concurrents, cela se traduit par plus de trafic et des taux de clics supérieurs.

Exemples d’extraits enrichis

Article

Extrait enrichis d'article

Extrait enrichis d’article

Produit

Extrait enrichis de produit

Extrait enrichis de produit

Application

Extraits enrichis d'application

Extraits enrichis d’application

Avis

Extraits enrichis d'avis

Extraits enrichis d’avis

Vidéo

Extrait enrichis de vidéo

Extrait enrichis de vidéo

Recette

Extraits enrichis de recette

Extraits enrichis de recette

Dessinez votre Knowledge Graph

Un des principaux avantages des données structurées est de pouvoir influencer le Knowledge graph. Qu’est-ce que le knowledge graph ? C’est la base de connaissances de Google, une gigantesque cartographie des relations entre objets, faits, et personnes connus à partir des résultats du moteur de recherche et différentes sources d’informations, dont Wikipedia (par l’intermédiaire de Wikidata).

Lorsque vous effectuez certains types de recherches, Google tente de répondre à vos questions sans que vous ayez à cliquer sur un résultat. Un sommaire des informations compilées sur votre requête s’affiche sur la colonne de droite de la page de résultat. Le Knowledge graph opère en coulisse.

Panneau knowledge graph

Mais le Knowledge graph ne répond pas seulement à vos questions sur vos artistes favoris, il peut être un outil de branding! Les données structurées vous permettent d’indiquer à Google les informations à afficher sur votre panneau Knowledge graph. Vous pouvez spécifier:

  • Votre logo
  • Vos coordonnées
  • Vos pages médias sociaux

Types de panneaux knowledge graph

Mais vous pouvez aller infiniment plus loin et «dessiner» votre knowledge graph avec le schéma de micro-données schema.org (que nous étudierons plus loin dans cet article). Vous pointez Google dans la bonne direction en lui indiquant la signification des éléments de votre page et leurs relations.

À titre d’exemple voici la représentation graphique (à vue d’oiseau) des relations d’attributs que j’ai pu observer sur la page d’une clinique esthétique.

Exemple de relations d'attributs

NOTE: L’utilisation de données structurées ne vous garantit pas un panneau knowledge graph. Vous devrez être considéré comme une «entité connue» par Google. Si vous avez déjà une certaine notoriété dans votre domaine, créer votre page Wikipédia (et Wikidata) peut vous aider.

Créez vos cartes intelligentes Google Now

Google Now est l’assistant virtuel d’Android, son système prédictif génère des cartes personnalisées contenant les «bonnes informations au bon moment» sans avoir à effectuer de recherches sur son appareil. Ces cartes intelligentes peuvent par exemple vous prévenir des évènements à proximité, vous indiquer quand vos achats sont livrés ou même afficher votre carte d’embarcation de vol.

Types de cartes personnalisables

Réservation d’hôtel

Reservation d'hotel

Réservation d’évènement

Reservation d'évènement

Réservation de restaurant

Réservation de restaurant

NOTE: Afin de pouvoir générer vos propres cartes intelligentes, vous devrez marquer vos courriels avec les attributs schema.org spécifiés sur cette page.

Des courriels qui convertissent avec les boutons d’action rapide

Un des avantages moins connus des données structurées est de pouvoir mettre en place des appels à l’action auxquels vos clients peuvent répondre sans même ouvrir votre courriel. Ce sont les boutons d’action de Gmail.

Le bouton Go-to-actions: diriger votre client vers une page de votre site

Le bouton Go to actions

Consultez la page officielle de Google pour plus d’informations sur ces boutons.

Mettre en place des données structurées

Google, Bing, Yahoo et Yandex utilisent depuis 2011 le schéma de référence Schema.org. Il fonctionne comme une sorte de « traducteur humain-robot » des concepts auxquelles vous faites référence sur votre page web.

Graphique Schema.org

Vous pouvez voir ci-dessous le document de référence à utiliser pour décrire un produit.

Un document de référence Schema.org pour décrire un produit

Un document de référence Schema.org pour décrire un produit

Vous pouvez mettre en place vos données structurées de trois façons :

La première option est la plus laborieuse, mais elle offre le plus de possibilités. Vous aurez la liberté d’utiliser n’importe quelle catégorie schema.org pour décrire vos pages.

NOTE: Pour mettre en place vos données structurées sans avoir à modifier le code HTML de votre page, passez directement à cette section.

Schema.org comprend trois niveaux hiérarchiques de données :

  • Itemscope 
  • Itemtype
  • Itemprop

Itemscope est l’attribut que vous utilisez pour regrouper les éléments de votre page appartenant au même concept.

Itemtype vous permet de pointer vos données vers les URL de documents de référence schema.org (par exemple http://schema.org/Product).

Itemprop  permet de définir une valeur pour une des propriétés spécifiées dans un document de référence (nom d’une personne, modèle d’un produit, etc.).

Ce sera tout de suite plus clair avec un exemple, prenons cet extrait de code pour une page produit:

NOTE: L’exemple ci-dessous peut être réalisé sans codage ou presque, mais en marquant manuellement vos données vous pourrez décrire votre contenu avec plus de précision qu’avec les outils de balisage automatisés.

<h1>Nos pantalons</h1>
<div>
<h2>Pantalon jogger Slim Low</h2>
<p>Pantalon jogger 5 poches avec effet denim ciré. Modèle taille basse avec jambes fines aux coutures tournantes.</p>
<p>Note moyenne: 4 étoiles sur 5 (120 votes)</p>
<p>64 $</p>
</div>

<div>
<h2>Pantalon de costume texturé</h2>
<p>Pantalon de costume en tissu texturé. Modèle avec poches latérales de biais et poches passepoilées boutonnées dans le dos.</p>
<p>Note moyenne: 3.5 étoiles sur 5 (170 votes)</p>
<p>43 $</p>
</div>

<div>
<h2>Pantalon en molleton</h2>
<p>Pantalon en molleton avec élastique et lien de serrage à la taille. Modèle avec poches latérales et une poche dans le dos. </p>
<p>Note moyenne: 4.5 étoiles sur 5 (250 votes)</p>
<p>32 $</p>

</div>

Cette page comporte trois blocs div pour trois pantalons, donc trois produits.

Nous plaçons un attribut itemscope dans chaque div pour que le moteur de recherche comprenne que chacun de ces blocs est une entité distincte et que chaque bloc possède ses propres propriétés (prix, nom, description, etc.).


<h1>Nos pantalons</h1>
<div itemscope>
<h2>Pantalon jogger Slim Low</h2>
<p>Pantalon jogger 5 poches avec effet denim ciré. Modèle taille basse avec jambes fines aux coutures tournantes.</p>
<p>Note moyenne: 4 étoiles sur 5 (120 votes)</p>
<p>64 $</p>
</div>

<div itemscope>
<h2>Pantalon de costume texturé</h2>
<p>Pantalon de costume en tissu texturé. Modèle avec poches latérales de biais et poches passepoilées boutonnées dans le dos.</p>
<p>Note moyenne: 3.5 étoiles sur 5 (170 votes)</p>
<p>43 $</p>
</div>

<div itemscope>
<h2>Pantalon en molleton</h2>
<p>Pantalon en molleton avec élastique et lien de serrage à la taille. Modèle avec poches latérales et une poche dans le dos. </p>
<p>Note moyenne: 4.5 étoiles sur 5 (250 votes)</p>
<p>32 $</p>

</div>

Le moteur de recherche sait qu’il a affaire à trois entités, mais il ne sait pas encore à quels concepts elles sont liées. En faisant une recherche sur schema.org on trouve la page du dictionnaire (le document de référence) à utiliser pour décrire les produits. Elle se situe à cette adresse http://schema.org/Product.

Nous n’avons plus qu’à lier nos blocs itemscope à ce document de référence pour signifier aux robots d’indexation qu’il s’agit de produits. C’est à ce niveau qu’intervient l’itemtype.


<div itemscope itemtype="URL du document de référence">
Contenu du bloc
</div>

Pensez itemtype = Page du dictionnaire schema.org.


<h1>Nos pantalons</h1>
<div itemscope itemtype="http://schema.org/Product">
<h2>Pantalon jogger Slim Low</h2>
<p>Pantalon jogger 5 poches avec effet denim ciré. Modèle taille basse avec jambes fines aux coutures tournantes.</p>
<p>Note moyenne: 4 étoiles sur 5 (120 votes)</p>
<p>64 $</p>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2>Pantalon de costume texturé</h2>
<p>Pantalon de costume en tissu texturé. Modèle avec poches latérales de biais et poches passepoilées boutonnées dans le dos.</p>
<p>Note moyenne: 3.5 étoiles sur 5 (170 votes)</p>
<p>43 $</p>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2>Pantalon en molleton</h2>
<p>Pantalon en molleton avec élastique et lien de serrage à la taille. Modèle avec poches latérales et une poche dans le dos. </p>
<p>Note moyenne: 4.5 étoiles sur 5 (250 votes)</p>
<p>32 $</p>

</div>

Le moteur de recherche comprend maintenant que cette page contient trois produits. Nous n’avons plus qu’à lui décrire ces articles. Commençons par leurs noms, en nous rendant sur le document de référence des produits, on peut voir la propriété  name.

Itemprop

Cette propriété sera insérée dans l’élément H2 du titre de chaque article de la manière suivante:


<h2 itemprop="name">Nom de l'article</h2>

Nous obtenons ce balisage de page:


<h1>Nos pantalons</h1>
<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon jogger Slim Low</h2>
<p>Pantalon jogger 5 poches avec effet denim ciré. Modèle taille basse avec jambes fines aux coutures tournantes.</p>
<p>Note moyenne: 4 étoiles sur 5 (120 votes)</p>
<p>64 $</p>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon de costume texturé</h2>
<p>Pantalon de costume en tissu texturé. Modèle avec poches latérales de biais et poches passepoilées boutonnées dans le dos.</p>
<p>Note moyenne: 3.5 étoiles sur 5 (170 votes)</p>
<p>43 $</p>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon en molleton</h2>
<p>Pantalon en molleton avec élastique et lien de serrage à la taille. Modèle avec poches latérales et une poche dans le dos. </p>
<p>Note moyenne: 4.5 étoiles sur 5 (250 votes)</p>
<p>32 $</p>

</div>

Indiquer un prix est une affaire plus complexe, la propriété Price est imbriquée dans l’itemtype Offer lui-même étant la valeur attendue de la propriété offers. Cela peut paraître un peu compliqué, mais c’est très simple. Retournons à notre fiche référence product, on y voit la propriété offers qui a une description correspondant à celle d’un prix, on constate également que la valeur attendue est l’itemtype offer.

Itemtype

Lorsque l’on clique sur l’itemtype Offer, on atterrit sur son document de référence.

Itemtype offers

Et l’on peut y voir la propriété Price.

Itemprop price

Il faut donc signaler au robot d’indexation qu’il doit consulter le document de référence Offer et y chercher la propriété Price. Pour ce faire, nous utilisons les attributs itemscope et itemtype que nous insérons dans un élément span auquel sera spécifiée l’URL du document de référence.


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

Nous ajoutons un second span contenant l’attribut itemprop pour la valeur correspondant au prix ainsi qu’une balise meta pour y insérer l’attribut priceCurrency permettant de spécifier la devise.


<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">Prix affiché</span>$</p>

L’attribut description vous permet d’indiquer où se situe la description du produit.


<p itemprop="description">Description du produit.</p>

Voici notre nouveau code.


<h1>Nos pantalons</h1>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon jogger Slim Low</h2>
<p>Pantalon jogger 5 poches avec effet denim ciré. Modèle taille basse avec jambes fines aux coutures tournantes.</p>
<p>Note moyenne: 4 étoiles sur 5 (120 votes)</p>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">64</span>$</p>
</span>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon de costume texturé</h2>
<p>Pantalon de costume en tissu texturé. Modèle avec poches latérales de biais et poches passepoilées boutonnées dans le dos.</p>
<p>Note moyenne: 3.5 étoiles sur 5 (170 votes)</p>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">43</span>$</p>
</span>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon en molleton</h2>
<p>Pantalon en molleton avec élastique et lien de serrage à la taille. Modèle avec poches latérales et une poche dans le dos. </p>
<p>Note moyenne: 4.5 étoiles sur 5 (250 votes)</p>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">32</span>$</p>
</span>
</div>

Il ne nous reste plus qu’à indiquer la note d’avis de chaque produit. Sur le document de référence Product ont peut voir l’attribut aggregateRating lui-même ayant pour valeur attendue l’itemtype Aggregaterating.

Document de reference product - Aggregaterating

Il va donc falloir utiliser les propriétés du document de référence AggregateRating tout en les imbriquant dans le document de référence Product.

Document de référence Aggregaterating

Nous insérons les attributs dans le code HTML avec la technique d’imbrication utilisée précédemment pour le prix.


<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note moyenne:
<span itemprop="ratingValue">4</span> étoiles sur
<span itemprop="bestRating">5</span> (
<span itemprop="ratingCount">120</span> votes)</p>

Voici le code final.



<h1>Nos pantalons</h1>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon jogger Slim Low</h2>
<p>Pantalon jogger 5 poches avec effet denim ciré. Modèle taille basse avec jambes fines aux coutures tournantes.</p>
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note moyenne:
<span itemprop="ratingValue">4</span> étoiles sur
<span itemprop="bestRating">5</span> (
<span itemprop="ratingCount">120</span> votes)</p>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">64</span>$</p>
</span>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon de costume texturé</h2>
<p>Pantalon de costume en tissu texturé. Modèle avec poches latérales de biais et poches passepoilées boutonnées dans le dos.</p>
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note moyenne:
<span itemprop="ratingValue">3.5</span> étoiles sur
<span itemprop="bestRating">5</span> (
<span itemprop="ratingCount">170</span> votes)</p>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">43</span>$</p>
</span>
</div>

<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Pantalon en molleton</h2>
<p>Pantalon en molleton avec élastique et lien de serrage à la taille. Modèle avec poches latérales et une poche dans le dos. </p>
<p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note moyenne:
<span itemprop="ratingValue">4.5</span> étoiles sur
<span itemprop="bestRating">5</span> (
<span itemprop="ratingCount">250</span> votes)</p>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="CAD" />
<p><span itemprop="price">32</span>$</p>
</span>
</div>

Le verdict final

L’outil de verification du balisage de Google nous indique que tout fonctionne!

Outil de vérification du balisage

Les formats de données : Microdata et Json-LD

Vous pouvez baliser vos pages en utilisant un de ces trois formats de données:

  • Microdata
  • RDFa
  • JSON-LD

L’exemple que nous venons d’étudier utilisait le format Microdata (recommandé par Google). L’exemple ci-dessous décrit une recette dans les trois formats et avec les propriétés schema suivantes:

PropriétéDéfinition
NameNom du plat
RecipeCategoryCatégorie de plat (entrée, dessert, etc.)
ImageImage du plat préparé
DatePublishedDate de plublication de la recette au format ISO
DescriptionCourte description du plat
ReviewUn avis sur le plat
PreptimeDurée de préparation du plat exprimée au format ISO
Cook timeDurée de cuisson du plat exprimée au format ISO
NutritionValeur nutritive de la recette
ServingSizeTaille des portions
CaloriesNombre de calories
FatContentTeneur en matière grasse en grammes
IngredientsUn ingrédient utilisé dans la recette (sucre, farine, ail, etc.)
RecipeInstructionsÉtapes requises à la préparation du plat
<div itemscope itemtype="http://schema.org/Recipe">
  <h1 itemprop="name">Grandma's Holiday Apple Pie</h1>
  <img itemprop="image" src="apple-pie.jpg" />
  By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
       <span itemprop="name">Carol Smith</span>
     </span>
  Published: <time datetime="2009-11-05" itemprop="datePublished">
    November 5, 2009</time>
  <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a
    dash of nutmeg.</span>
  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews </span>
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span>
    Calories per serving: <span itemprop="calories">250 cal</span>
    Fat per serving: <span itemprop="fatContent">12 g</span>
  </span>
  Ingredients:
    Thinly-sliced <span itemprop="ingredients">apples</span>:
     6 cups
      <span itemprop="ingredients">White sugar</span>:
      3/4 cup
  ...

  Directions:
    <div itemprop="recipeInstructions">
      1. Cut and peel apples
      2. Mix sugar and cinnamon. Use additional sugar for tart apples.
      ...
    </div>
</div>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Grandma's Holiday Apple Pie",
  "image": "http://www.example.com/apple-pie.jpg",
  "author": {
    "@type":"Person",
    "name":"Carol Smith"
  },
  "datePublished": "2009-11-05",
  "description": "This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.0",
    "reviewCount": "35"
  },
  "prepTime": "PT30M",
  "cookTime": "PT1H",
  "totalTime": "PT1H30M",
  "recipeYield": "1 9\" pie (8 servings)",
  "nutrition": {
    "@type": "NutritionInformation",
    "servingSize": "1 medium slice",
    "calories": "250 cal",
    "fatContent": "12 g"
  },
  "ingredients": [
    "apples",
    "White sugar"
  ],
  "recipeInstructions": "1. Cut and peel apples\n 2. Mix sugar and cinnamon. Use additional sugar for tart apples.\n..."
}
</script>
<div vocab="http://schema.org/" typeof="Recipe">
  <h1 property="name">Grandma's Holiday Apple Pie</h1>
  <img property="image" src="apple-pie.jpg" />
  By <span property="author" typeof="Person">
       <span property="name">Carol Smith</span>
     </span>
  Published: <time datetime="2009-11-05" property="datePublished">
    November 5, 2009</time>
  <span property="description">This is my grandmother's apple pie recipe. I like to add a
    dash of nutmeg.</span>
  <span property="aggregateRating" typeof="http://schema.org/AggregateRating">
    <span property="ratingValue">4.0</span> stars based on
    <span property="reviewCount">35</span> reviews </span>
  Prep time: <time datetime="PT30M" property="prepTime">30 min</time>
  Cook time: <time datetime="PT1H" property="cookTime">1 hour</time>
  Total time: <time datetime="PT1H30M" property="totalTime">1 hour 30 min</time>
  Yield: <span property="recipeYield">1 9" pie (8 servings)</span>
  <span property="nutrition" typeof="http://schema.org/NutritionInformation">
    Serving size: <span property="servingSize">1 medium slice</span>
    Calories per serving: <span property="calories">250 cal</span>
    Fat per serving: <span property="fatContent">12 g</span>
  </span>
  Ingredients:
    Thinly-sliced <span property="ingredients">apples</span>:
     6 cups
      <span property="ingredients">White sugar</span>:
      3/4 cup
  ...

  Directions:
    <div property="recipeInstructions">
      1. Cut and peel apples
      2. Mix sugar and cinnamon. Use additional sugar for tart apples.
      ...
    </div>
</div>

Cet exemple est extrême, mais il montre l’étendue des possibilités, vous pouvez décrire une recette dans les moindres détails!

Les données structurées au format JSON-LD peuvent être placées n’importe où dans votre HTML alors que le format microdata se fond au code HTML du corps de votre page.

NOTE: Le format JSON-LD est le plus simple, mais il n’est pas encore totalement pris en charge par Google. Le format microdata est recommandé dans plupart des cas (à l’exception des extraits enrichis d’évènements.

Placer vos balises sans coder (ou presque)

Vous êtes allergique au HTML? Réjouissez-vous, deux options sont possibles :

  • Le marqueur de données pour sélectionner avec votre souris les données à baliser (requiert un compte search console).
  • L’outil d’aide au balisage pour générer automatiquement vos balises de données (il vous faudra accéder au code source de vos pages).

Première méthode: Le balisage à la souris

Avec le marqueur de données, il vous suffit de rentrer l’URL d’une de vos pages et de surligner les champs de données que vous souhaitez. Google interprètera ces données sans que vous ayez à toucher une seule ligne de code.

Pour y accéder :
Connectez-vous à votre search console, puis accédez au menu marqueur de données.

Marqueur de données

Entrez l’URL de la page à baliser, sélectionnez un type d’information et balisez vos données.

Entrer URL

Pour plus d’informations sur le marqueur de données, consultez les pages d’aide Search console.

Deuxième méthode: Le balisage assisté

Si vous ne voulez pas utiliser la Search console, ou si vous avez besoin d’une base pour commencer à mettre en place vos balises manuellement, l’outil de balisage génèrera vos balises.

Allez à l’outil d’aide au balisage, sélectionnez un type de données puis entrez l’url de votre page ou collez directement son code source.

Outil d'aide au balisage

Surlignez les éléments à baliser, puis sélectionnez une propriété.

outil d'aide au balisage étape 2

Cliquez sur le bouton Créer le HTML pour générer vos balises.

outil d'aide au balisage étape 3

Remplacez le code source de votre page avec le nouveau code balisé.

Outil d'aide au balisage étape 4

NOTE: Ces deux méthodes sont certes plus pratiques que le balisage manuel, mais vous pourrez décrire vos pages avec moins de précision.

Un critère de l’algorithme de classement? Un jour peut être…

Les données structurées sont déjà bien utiles, mais elles risquent de le devenir davantage. Lors d’un hangout du 11 septembre 2015, John Mueller (un Web trend analyst de Google) à déclaré qu’elles pourraient être «un jour» intégrées dans l’algorithme de classement de résultats de Google.

Over time, I think it [structured markup] is something that might go into the rankings as wellJohn Mueller, Google Web trend analyst

Voir la vidéo ci-dessous à la minute 19:57.

Les données structurées sont donc définitivement here to stay.

Boîte à Outils

Utiliser Schema.org

  • Schema.org
  • Le site de référence des attributs schema.org.
  • getSchema
  • Un wiki que vous pouvez utiliser en compléments pour plus d’informations sur certaines propriétés.

Créer vos balises

  • Schema creator
  • Cet outil de Raven SEO demande plus d’efforts, il génèrera des balises standard que vous devrez intégrer à votre code source.

Tests et débogages

  • Structured data linter
  • En plus de valider vos balises, cet outil vous permet de prévisualiser vos extraits enrichis.
  • Meta SEO inspector
  • Une extension chrome pour afficher les meta données de n’importe quelle page web, très pratique pour vos tests et pour la veille concurrentielle!