HTML - Microdonnées

Introduction aux microdonnées

Les microdonnées sont une spécification qui vous permet d'ajouter des données structurées à vos documents HTML. Elles offrent un moyen d'étiqueter le contenu avec des types d'informations spécifiques, tels que des produits, des événements, des avis ou des recettes. En ajoutant des microdonnées à votre HTML, vous rendez votre contenu plus compréhensible pour les moteurs de recherche, les robots d'indexation et les autres applications qui traitent les données structurées.

L'utilisation des microdonnées dans votre HTML présente plusieurs avantages. Elle aide les moteurs de recherche à mieux comprendre le contenu de vos pages web, ce qui peut améliorer le classement dans les résultats de recherche et rendre ces résultats plus pertinents. Les microdonnées permettent également aux moteurs de recherche d'afficher des extraits enrichis, qui sont des listes améliorées incluant des informations supplémentaires, comme des étoiles de notation, des prix ou des dates. Les extraits enrichis font ressortir vos pages web dans les résultats de recherche et peuvent augmenter les taux de clics.

Les microdonnées fonctionnent avec HTML en utilisant des attributs pour annoter les éléments avec des types d'informations spécifiques. Pour ajouter des microdonnées à votre HTML, vous utilisez les attributs itemscope, itemtype et itemprop. L'attribut itemscope indique que le contenu à l'intérieur d'un élément concerne un élément particulier. L'attribut itemtype spécifie le type d'élément décrit, en utilisant une URL qui définit le vocabulaire. L'attribut itemprop est utilisé pour identifier les propriétés d'un élément, comme son nom, sa description ou son prix.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nom du produit</h1>
  <p itemprop="description">La description du produit va ici.</p>
  <span itemprop="price">99,99 €</span>
</div>

L'élément div est marqué avec l'attribut itemscope, indiquant qu'il contient des informations sur un élément. L'attribut itemtype spécifie que l'élément est un produit, en utilisant le vocabulaire de schema.org. Les attributs itemprop sont utilisés pour identifier le nom, la description et le prix du produit.

En ajoutant des microdonnées à votre HTML, vous permettez aux moteurs de recherche et aux autres applications d'extraire des données structurées de vos pages web, ce qui conduit à une meilleure visibilité dans les recherches, des extraits enrichis et une expérience utilisateur améliorée.

Syntaxe des microdonnées

La syntaxe des microdonnées comporte trois attributs principaux : itemscope, itemtype et itemprop. Ces attributs définissent la structure et la signification des données au sein des éléments HTML.

L'attribut itemscope indique que le contenu d'un élément concerne un élément particulier. C'est un attribut booléen, ce qui signifie qu'il n'a pas besoin de valeur. Lorsque vous ajoutez l'attribut itemscope à un élément, vous créez un nouvel élément qui peut avoir ses propres propriétés.

<div itemscope>
  <!-- Le contenu de l'élément va ici -->
</div>

L'attribut itemtype est utilisé avec l'attribut itemscope pour spécifier le type d'élément décrit. Il prend une URL comme valeur, qui pointe vers un vocabulaire définissant le type d'élément. Le vocabulaire le plus couramment utilisé est Schema.org, qui possède de nombreux types d'éléments, tels que Person, Product, Event, et bien d'autres.

<div itemscope itemtype="https://schema.org/Product">
  <!-- Le contenu du produit va ici -->
</div>

L'attribut itemprop identifie les propriétés d'un élément. Il est ajouté aux éléments dans un itemscope pour spécifier le nom et la valeur de chaque propriété. La valeur de l'attribut itemprop correspond à une propriété définie dans le vocabulaire spécifié par l'itemtype.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nom du produit</h1>
  <p itemprop="description">La description du produit va ici.</p>
  <span itemprop="price">99,99 €</span>
</div>

Les microdonnées permettent également d'imbriquer des éléments les uns dans les autres. Cela est utile pour les structures de données complexes qui incluent plusieurs éléments avec leurs propres propriétés. Pour imbriquer des éléments, vous ajoutez un autre attribut itemscope dans un itemscope existant.

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Jean Dupont</h1>
  <p itemprop="jobTitle">Ingénieur logiciel</p>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Rue Principale</span>
    <span itemprop="addressLocality">Villeexemple</span>,
    <span itemprop="addressRegion">IDF</span>
    <span itemprop="postalCode">75000</span>
  </div>
</div>

Dans cet exemple, l'élément Person inclut une propriété address, qui est un élément de type PostalAddress avec ses propres propriétés, telles que streetAddress, addressLocality, addressRegion et postalCode.

Vocabulaires de microdonnées courants

Lors de l'ajout de microdonnées à votre HTML, vous devez utiliser un vocabulaire qui définit les types d'éléments et leurs propriétés. Un vocabulaire est un ensemble de définitions pour les types d'éléments et leurs propriétés. Il existe plusieurs vocabulaires courants utilisés avec les microdonnées, notamment Schema.org, Dublin Core et Open Graph Protocol.

Schema.org est le vocabulaire le plus largement utilisé pour les microdonnées. Il a été créé par une collaboration entre les principaux moteurs de recherche, dont Google, Bing, Yahoo! et Yandex. Schema.org fournit une collection de vocabulaires partagés que les webmasters peuvent utiliser pour baliser leurs pages de manière à être compris par les principaux moteurs de recherche.

Le vocabulaire Schema.org comprend une large gamme de types d'éléments, tels que Person, Organization, Place, Product, Event, Review, et bien d'autres. Chaque type d'élément possède un ensemble de propriétés qui peuvent être utilisées pour décrire l'élément en détail. Par exemple, un élément Product peut avoir des propriétés comme le nom, la description, le prix, la marque et l'avis.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Ordinateur portable Acme</h1>
  <p itemprop="description">Un ordinateur portable haute performance pour le travail et les loisirs.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">1 199,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
  </span>
</div>

Dublin Core est un autre vocabulaire utilisé avec les microdonnées, particulièrement dans le contexte des métadonnées pour les ressources numériques. Le vocabulaire Dublin Core comprend des propriétés comme le titre, le créateur, le sujet, la description, l'éditeur, la date, le type, le format et l'identifiant. Ce vocabulaire est souvent utilisé par les bibliothèques, les musées et d'autres organisations qui gèrent des actifs numériques.

<div itemscope itemtype="http://purl.org/dc/terms/">
  <h1 itemprop="title">Gatsby le Magnifique</h1>
  <span itemprop="creator">F. Scott Fitzgerald</span>
  <span itemprop="date">1925</span>
  <span itemprop="format">Imprimé</span>
  <span itemprop="identifier">ISBN : 978-0-123-45678-9</span>
</div>

Le protocole Open Graph, créé par Facebook, est un vocabulaire utilisé pour décrire le contenu des pages web pour le partage sur les réseaux sociaux. Il inclut des propriétés comme og:title, og:type, og:url, og:image et og:description. Lorsque vous ajoutez des microdonnées Open Graph à vos pages, les plateformes de médias sociaux peuvent utiliser ces informations pour créer des aperçus riches lorsque votre contenu est partagé.

<head>
  <meta itemprop="og:title" content="Ma page web">
  <meta itemprop="og:type" content="website">
  <meta itemprop="og:url" content="https://www.monsiteweb.com/">
  <meta itemprop="og:image" content="https://www.monsiteweb.com/image.jpg">
  <meta itemprop="og:description" content="Une description de ma page web.">
</head>

Lorsque vous choisissez un vocabulaire pour vos microdonnées, prenez en compte le type de contenu que vous avez et le public que vous souhaitez atteindre. Schema.org est un excellent vocabulaire polyvalent que les moteurs de recherche comprennent bien, tandis que Dublin Core est préférable pour les ressources numériques dans des contextes académiques ou de patrimoine culturel, et le protocole Open Graph est idéal pour le contenu partagé sur les plateformes de médias sociaux.

Mise en œuvre des microdonnées

Pour mettre en œuvre les microdonnées dans votre HTML, ajoutez les attributs itemscope, itemtype et itemprop aux éléments appropriés. Identifiez d'abord le ou les éléments principaux de votre page, comme un produit, un événement ou une personne. Ensuite, ajoutez l'attribut itemscope à l'élément qui contient toutes les informations sur cet élément.

<div itemscope>
  <!-- Les informations sur le produit vont ici -->
</div>

Ensuite, ajoutez l'attribut itemtype au même élément, en indiquant le vocabulaire et le type d'élément que vous souhaitez utiliser. Par exemple, si vous décrivez un produit en utilisant le vocabulaire Schema.org, vous utiliseriez l'itemtype suivant :

<div itemscope itemtype="https://schema.org/Product">
  <!-- Les informations sur le produit vont ici -->
</div>

Maintenant, ajoutez l'attribut itemprop à chaque élément qui représente une propriété de l'élément. La valeur de l'attribut itemprop doit correspondre à une propriété du vocabulaire que vous avez spécifié dans l'itemtype.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nom du produit</h1>
  <img src="image-produit.jpg" itemprop="image" alt="Image du produit">
  <p itemprop="description">La description du produit va ici.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">99,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
  </span>
</div>

En plus d'utiliser les microdonnées directement dans votre HTML, vous pouvez également les utiliser avec JSON-LD (JavaScript Object Notation for Linked Data). JSON-LD est une façon d'encoder des données liées en utilisant JSON, et il peut être utilisé pour fournir des données structurées d'une manière facile à analyser pour les moteurs de recherche.

Pour utiliser les microdonnées avec JSON-LD, vous incluez un élément script avec l'attribut type défini sur "application/ld+json". À l'intérieur de l'élément script, vous définissez vos données structurées en utilisant la syntaxe JSON-LD.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Nom du produit",
  "image": "image-produit.jpg",
  "description": "La description du produit va ici.",
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "EUR"
  }
}
</script>

Lors de la mise en œuvre des microdonnées, suivez ces bonnes pratiques pour en tirer le maximum de bénéfices :

Microdonnées et SEO

Les microdonnées aident les moteurs de recherche à mieux comprendre le contenu de vos pages web. Les moteurs de recherche comme Google, Bing et Yandex utilisent les microdonnées pour extraire des données structurées de votre HTML, ce qui peut améliorer votre classement dans les résultats de recherche et votre visibilité.

Lorsque les moteurs de recherche parcourent vos pages web, ils recherchent des microdonnées pour comprendre le sens et le contexte de votre contenu. En utilisant des microdonnées pour baliser des informations importantes, telles que les détails des produits, les informations sur les événements ou les avis, vous facilitez le traitement et l'interprétation de votre contenu par les moteurs de recherche. Cela peut conduire à un meilleur classement dans les résultats de recherche pour les requêtes pertinentes, car les moteurs de recherche peuvent faire correspondre votre contenu aux recherches des utilisateurs avec plus de confiance.

L'un des principaux avantages des microdonnées pour le SEO est la possibilité d'obtenir des extraits enrichis dans les résultats de recherche. Les extraits enrichis sont des résultats de recherche améliorés qui incluent des informations supplémentaires, telles que des étoiles de notation, des prix ou des dates, en plus du titre, de l'URL et de la description standard. Lorsque vous balisez votre contenu avec des microdonnées, les moteurs de recherche peuvent utiliser ces informations pour afficher des extraits enrichis pour vos pages web.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nom du produit</h1>
  <p itemprop="description">La description du produit va ici.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">99,99 €</span>
  </span>
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4,5</span> étoiles basées sur
    <span itemprop="reviewCount">100</span> avis
  </div>
</div>

Dans cet exemple, le balisage en microdonnées inclut des informations sur le nom du produit, sa description, son prix et sa note moyenne. Les moteurs de recherche peuvent utiliser ces données pour afficher un extrait enrichi avec la note en étoiles et le nombre d'avis, rendant le résultat de recherche plus accrocheur et informatif pour les utilisateurs.

Les extraits enrichis peuvent augmenter vos taux de clics à partir des résultats de recherche, car ils font ressortir vos résultats et donnent aux utilisateurs plus d'informations sur votre contenu. Des taux de clics plus élevés peuvent, à leur tour, conduire à un meilleur classement dans les résultats de recherche, car les moteurs de recherche considèrent l'engagement des utilisateurs comme un signal de pertinence et de qualité.

Pour maximiser les avantages SEO des microdonnées, il est important de les utiliser correctement et de manière cohérente sur l'ensemble de votre site web. Suivez les meilleures pratiques pour l'implémentation des microdonnées, comme l'utilisation de types d'éléments et de propriétés spécifiques, la correspondance des microdonnées avec le contenu visible, et la mise à jour régulière de vos microdonnées. Testez vos microdonnées en utilisant des outils comme l'outil de test de données structurées de Google pour vous assurer qu'elles sont exemptes d'erreurs et qu'elles peuvent être analysées correctement par les moteurs de recherche.

Outils et tests pour les microdonnées

Lors de l'utilisation des microdonnées, plusieurs outils sont disponibles pour vous aider à générer, valider et tester votre balisage. Ces outils peuvent simplifier le processus d'ajout de microdonnées à votre HTML et détecter les erreurs ou problèmes avant la mise en ligne de vos pages.

Les générateurs de microdonnées sont des outils qui vous aident à créer un balisage de microdonnées sans écrire le code manuellement. Ces outils offrent souvent une interface conviviale où vous pouvez saisir vos données et sélectionner les types d'éléments et les propriétés appropriés. Voici quelques générateurs de microdonnées populaires :

Ces générateurs peuvent vous faire gagner du temps et des efforts, surtout si vous débutez avec les microdonnées ou si vous avez beaucoup de contenu à baliser. Cependant, il est important de vérifier le balisage généré pour vous assurer qu'il reflète précisément votre contenu et suit les meilleures pratiques.

Les validateurs de microdonnées sont des outils qui vérifient votre balisage de microdonnées pour détecter les erreurs ou les incohérences. Ils peuvent vous aider à repérer des problèmes tels que des balises manquantes ou mal imbriquées, des types d'éléments ou des propriétés invalides, ou des problèmes de formatage. Voici quelques validateurs de microdonnées populaires :

Ces validateurs peuvent être précieux pour déboguer vos microdonnées et vous assurer qu'elles sont correctement mises en œuvre. Il est recommandé de passer vos pages dans un validateur avant de les publier, afin de détecter rapidement les erreurs.

Tester vos microdonnées avec l'outil de test de données structurées de Google est particulièrement important, car Google est le plus grand moteur de recherche et utilise largement les microdonnées pour les extraits enrichis et d'autres fonctionnalités de recherche. L'outil de test de données structurées vous permet de saisir une URL ou de coller votre code HTML, puis affiche toutes les microdonnées qu'il trouve sur la page. Il met également en évidence les erreurs ou les avertissements, avec des explications sur ce qui ne va pas et comment le corriger.

Lors du test de vos microdonnées, soyez attentif aux erreurs ou avertissements, et corrigez-les avant de publier vos pages. Voici quelques problèmes courants de microdonnées à surveiller :

• Balises itemscope, itemtype ou itemprop manquantes ou mal imbriquées
• Utilisation de types d'éléments ou de propriétés invalides ou mal orthographiés
• Décalage entre les microdonnées et le contenu visible sur la page
• Répétition des mêmes informations plusieurs fois dans différents formats
• Inclusion de balisage pour des informations non visibles pour les utilisateurs

Si vous rencontrez des problèmes avec vos microdonnées, résolvez-les de manière systématique. Vérifiez que votre balisage suit les règles de syntaxe, correspond à votre contenu et utilise des types d'éléments et des propriétés valides de votre vocabulaire choisi. Utilisez les messages d'erreur et les avertissements des validateurs comme guide, et consultez la documentation de votre vocabulaire si nécessaire.

En utilisant des outils pour les microdonnées et en testant régulièrement votre balisage, vous pouvez vous assurer que vos microdonnées sont correctes, cohérentes et optimisées pour les moteurs de recherche. Cela peut vous aider à tirer le meilleur parti de vos microdonnées, en termes de meilleure visibilité dans les recherches, d'extraits enrichis et d'engagement des utilisateurs.

Exemples de Microdonnées

Vous pouvez utiliser les Microdonnées pour baliser différents types de contenu, tels que les produits, les événements, les personnes et les recettes. Voici quelques exemples d'utilisation des Microdonnées pour divers types de contenu :

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Ordinateur portable Acme</h1>
  <img src="laptop.jpg" itemprop="image" alt="Ordinateur portable Acme">
  <p itemprop="description">Un ordinateur portable haute performance pour le travail et les loisirs.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">1 199,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
    <link itemprop="availability" href="https://schema.org/InStock">En stock
  </div>
</div>

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Conférence Technologique 2023</h1>
  <p itemprop="description">Rejoignez-nous pour le plus grand événement technologique de l'année !</p>
  <time itemprop="startDate" datetime="2023-09-01T09:00">1er septembre 2023, 9h00</time> -
  <time itemprop="endDate" datetime="2023-09-03T17:00">3 septembre 2023, 17h00</time>
  <div itemprop="location" itemscope itemtype="https://schema.org/Place">
    <span itemprop="name">Centre de Congrès</span>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <span itemprop="streetAddress">123 Rue Principale</span>
      <span itemprop="addressLocality">Villequelconque</span>,
      <span itemprop="addressRegion">IDF</span>
      <span itemprop="postalCode">75000</span>
    </div>
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">299,99 €</span>
    <span itemprop="priceCurrency">EUR</span>
    <a itemprop="url" href="https://www.exemple.com/billets">Acheter des billets</a>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Jean Dupont</h1>
  <p itemprop="jobTitle">Ingénieur Logiciel</p>
  <div itemprop="affiliation" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Acme Inc.</span>
  </div>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">456 Rue des Chênes</span>
    <span itemprop="addressLocality">Villequelconque</span>,
    <span itemprop="addressRegion">IDF</span>
    <span itemprop="postalCode">75000</span>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Cookies aux Pépites de Chocolat Classiques</h1>
  <img itemprop="image" src="cookies.jpg" alt="Cookies aux Pépites de Chocolat">
  <p itemprop="description">Une recette de cookies aux pépites de chocolat faits maison.</p>
  <ul>
    <li itemprop="recipeIngredient">280 g de farine tout usage</li>
    <li itemprop="recipeIngredient">1 cuillère à café de bicarbonate de soude</li>
    <li itemprop="recipeIngredient">1 cuillère à café de sel</li>
    <li itemprop="recipeIngredient">230 g de beurre, ramolli</li>
    <li itemprop="recipeIngredient">150 g de sucre blanc</li>
    <li itemprop="recipeIngredient">165 g de cassonade</li>
    <li itemprop="recipeIngredient">1 cuillère à café d'extrait de vanille</li>
    <li itemprop="recipeIngredient">2 gros œufs</li>
    <li itemprop="recipeIngredient">340 g de pépites de chocolat noir</li>
  </ul>
  <ol itemprop="recipeInstructions">
    <li>Préchauffer le four à 190°C.</li>
    <li>Mélanger la farine, le bicarbonate de soude et le sel dans un petit bol.</li>
    <li>Battre le beurre, le sucre blanc, la cassonade et l'extrait de vanille dans un grand bol à mélanger jusqu'à obtenir une texture crémeuse.</li>
    <li>Ajouter les œufs un par un, en battant bien après chaque ajout.</li>
    <li>Incorporer progressivement le mélange de farine.</li>
    <li>Ajouter les pépites de chocolat.</li>
    <li>Déposer des cuillères à soupe bombées de pâte sur des plaques de cuisson non graissées.</li>
    <li>Cuire pendant 9 à 11 minutes ou jusqu'à ce que les bords soient dorés.</li>
    <li>Laisser refroidir sur les plaques de cuisson pendant 2 minutes, puis transférer sur des grilles pour refroidir complètement.</li>
  </ol>
  <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
    <span itemprop="calories">260 calories</span>,
    <span itemprop="fatContent">12 grammes de matières grasses</span>
  </div>
</div>