Les microdonnées sont le balisage de données présent sur une page et un site web, utilisé pour aider les robots d’exploration des moteurs de recherche à mieux comprendre le contenu de votre site. Nous vous expliquons précisément leur fonctionnement et ce que vous devez savoir.
Les microdonnées sont le balisage de données présent sur une page et un site web, utilisé pour aider les robots d’exploration des moteurs de recherche à mieux comprendre le contenu de votre site. Pour mieux comprendre, imaginez une bibliothèque. Le visiteur ne sait pas où se trouve chaque livre ni de quoi il s’agit, mais le catalogue de la bibliothèque l’aide à s’orienter. Les microdonnées fonctionnent exactement de la même manière. Elles aident les robots d’exploration à trouver et à mieux comprendre les pages du site web.
Que fournissent exactement les microdonnées ?
À proprement parler, les microdonnées augmentent l’attractivité d’un site web pour les moteurs de recherche. Elles permettent aux robots d’exploration de mieux comprendre le contenu, la structure et le contenu du site. Bien sûr, l’utilisation des microdonnées ne vous permettra pas d’atteindre les premières positions dans les résultats de recherche uniquement grâce aux microdonnées ; vous devez travailler sur de nombreux autres aspects. Néanmoins, elles augmentent vos chances.
De plus, l’avantage ne réside pas seulement dans un meilleur positionnement potentiel, mais aussi dans l’apparence des extraits (la description des pages affichées dans les résultats de recherche).
Un extrait étendu attire davantage l’attention et semble plus avantageux pour l’utilisateur : il peut contenir une note, des liens directs vers d’autres pages du site, des catégories de produits, etc.
Types de microdonnées
Dans le contexte des microdonnées, deux concepts sont à considérer : les « dictionnaires » et la « syntaxe ». Pour plus de clarté, abordons-les dès maintenant.
Un dictionnaire de microdonnées est similaire à un dictionnaire classique, mais au lieu de mots et de leurs définitions, il contient des types de données et leurs propriétés, utilisables pour baliser une page web. Par exemple, un dictionnaire de microdonnées peut contenir le mot « Livre » et des propriétés telles que « nom », « auteur », « date de publication », etc.
La syntaxe des microdonnées correspond aux règles de structuration et d’enregistrement de ces informations. Elles aident les moteurs de recherche à comprendre où commencent et où se terminent les informations relatives à chaque type ou propriété.
Dictionnaires de microdonnées
Prenons l’exemple de deux des dictionnaires les plus populaires :
- Open Graph. Microdonnées développées par Facebook. Elles servent principalement à créer des extraits sur les réseaux sociaux (lors du partage de liens vers un site). Le dictionnaire Open Graph est utilisé par WhatsApp, Telegram, Viber, LinkedIn, Pinterest et Slack.
- Schema.org. Le balisage le plus répandu, permettant de décrire la plupart des produits et services.
Syntaxe des microdonnées
Il existe quatre types de syntaxe :
- RDFa permet de décrire diverses entités, qu’il s’agisse d’une personne, d’un objet ou d’un événement. L’utilisation de triplets de type « sujet-prédicat-objet » ou « sujet, prédicat, objet » permet de spécifier, par exemple, le prix d’un produit sur une page web. De même, cette méthode permet de déterminer les caractéristiques d’un produit telles que son poids, sa taille, sa description, etc. De plus, elle permet de spécifier une ressource, sa date de publication ou l’auteur d’un article.
- JSON-LD est une méthode d’échange de données basée sur le format texte JSON utilisé en JavaScript. Cette approche est employée lorsqu’il est nécessaire d’identifier des objets et de décrire leurs attributs en détail. Le plus souvent, cette syntaxe est utilisée pour le balisage dans le contexte du vocabulaire Schema.org, et la prise en charge par JavaScript rend ces informations accessibles au traitement automatique. JSON-LD facilite la structuration des données et l’interprétation des concepts par les robots d’exploration. Cette méthode permet également de placer plusieurs éléments sur une même page. Par exemple, un utilisateur peut trouver une recette non seulement par son nom, mais aussi par ingrédients, temps de cuisson, etc. Quel est l’avantage d’utiliser JSON ? Le principal avantage est que cette syntaxe n’est pas liée à la mise en page, ce qui permet d’intégrer facilement et rapidement des microdonnées.
- Les microdonnées sont une norme permettant de baliser les pages HTML à l’aide d’attributs et de balises descriptives. Elles permettent aux moteurs de recherche de lire le contenu du site et d’« extraire » automatiquement les données nécessaires. Lors du référencement d’un site, les microdonnées sont utilisées pour une indexation plus complète : elles ajoutent des informations sur le site aux bases de données des moteurs de recherche. Les microdonnées présentent un inconvénient majeur : il est impossible d’ajouter un fragment de code à une section ; chaque élément HTML doit être balisé individuellement.
Comment et où ajouter des microdonnées ?
Les microdonnées doivent être ajoutées directement au code HTML des pages à optimiser pour les moteurs de recherche. Elles peuvent être ajoutées à n’importe quelle partie du code HTML. Prenons un exemple pour simplifier.
Imaginons un site de vente de livres : souhaitons-nous y ajouter des informations sur un livre ? D’après le dictionnaire Schema.org, nous avons un type de données « Book » possédant les propriétés « title », « author » et « publication date ».
En utilisant la syntaxe JSON-LD, nous l’écrirons ainsi:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"name": "Book 1",
"author": "Author 1",
"datePublished": "2022-01-20"
}
</script>Dans cet exemple, @type, « name », « author » et « datePublished » sont des mots du dictionnaire (types et propriétés), et tout ce qui se trouve entre accolades correspond à la syntaxe JSON-LD, illustrant la structuration et l’écriture des informations.
Voyons maintenant où placer précisément les microdonnées.
Fil d’Ariane
Voici un exemple simple de fil d’Ariane utilisant Schema.org pour une boutique de vêtements pour femmes en ligne:
<nav aria-label="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<ol>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" href="http://example.com/dresses">
<span itemprop="name">Books</span>
</a>
<meta itemprop="position" content="1" />
</li>
>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" href="http://example.com/dresses/leather">
<span itemprop="name">Book about trees</span>
</a>
<meta itemprop="position" content="2" />
</li>
</ol>
</nav>Dans l’exemple ci-dessus, la liste de navigation globale (BreadcrumbList) est définie en premier, puis chaque élément de cette liste (ListItem). Chaque ListItem contient un lien vers la page et une balise méta indiquant sa position dans la liste globale.
Cet exemple illustre deux niveaux de navigation : « Robes » et « Robes en cuir ». Le premier élément, « Robes », occupe la position 1, et « Robes en cuir », la position 2. Cela reflète la structure du site et le parcours de l’utilisateur jusqu’à la page actuelle.
Il est important que chaque élément de navigation soit représenté à l’aide des balises appropriées itemprop="itemListElement" et itemscope itemtype="http://schema.org/ListItem", et que la position de chaque élément (itemprop="position") soit spécifiée dans l’ordre de la liste.
À noter ! Il existe une autre astuce concernant les microdonnées pour les fils d’Ariane. Même s’il n’y a pas de fil d’Ariane physiquement présent sur votre site, vous pouvez le spécifier via des microdonnées, soit par le biais de balises méta, soit via JSON.
Informations sur l’entreprise
Les informations sur l’entreprise peuvent générer des ventes même sans visite sur le site. Si les numéros de téléphone ou autres coordonnées sont immédiatement visibles dans l’extrait, l’utilisateur peut les utiliser sans perdre de temps à parcourir le site.
Voici un exemple de microdonnées:
<div itemscope itemtype="http://schema.org/Organization">
<h1 itemprop="name">Your company name</h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p>
<span itemprop="streetAddress">Street, address</span>,
<span itemprop="postalCode">Postal code</span>,
<span itemprop="addressLocality">City</span>,
<span itemprop="addressCountry">Country</span>
</p>
</div>
<p>Телефон: <span itemprop="telephone">+7 (999) 999-99-99</span></p>
<p>Email: <a href="mailto:[email protected]" itemprop="email">[email protected]</a></p>
<link itemprop="url" href="http://www.example.com" />
</div>Analysons les éléments de notre exemple:
- Nom de l’entreprise (name).
- Adresse de l’entreprise (address), incluant la rue (streetAddress), le code postal (postalCode), la ville (addressLocality) et le pays (addressCountry).
- Numéro de téléphone de l’entreprise (telephone).
- Adresse e-mail de l’entreprise (email).
- Site web de l’entreprise (url).
Il est essentiel que les informations fournies via les microdonnées correspondent à celles de la page web. N’oubliez pas non plus que les microdonnées ne doivent pas contenir d’informations importantes non affichées sur la page web.
Avis et évaluations
Il s’agit d’une des informations les plus importantes pour un utilisateur souhaitant effectuer un achat. Voici un exemple de balisage:
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product name</h1>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.5</span> from <span itemprop="bestRating">5</span> based on <span itemprop="ratingCount">301</span> reviews</div>
</div>Dans cet exemple:
- Le corps principal du balisage HTML décrit le « produit » à l’aide du balisage Schema.org (itemtype=”http://schema.org/Product”).
- À l’intérieur de ce bloc se trouve une section qui décrit la « note globale » ou « aggregateRating » du produit.
- « ratingValue », « bestRating » et « ratingCount » représentent respectivement la valeur de la note, la meilleure note possible et le nombre total d’avis.
Questions et réponses (FAQ)
Voici un exemple de microdonnées pour une FAQ (Foire aux questions) utilisant Schema.org et JSON-LD:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "What about cats?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Text about cats"
}
},{
"@type": "Question",
"name": "What microdata is?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Micro-markup helps search engines better understand the content of your site."
}
}]
}
</script>Ce code comporte deux composants principaux : les questions et les réponses. Chaque question possède un « nom » (le texte de la question) et chaque réponse contient un « texte » (le texte de la réponse). Le tout est intégré dans un contexte commun indiquant qu’il s’agit d’une page FAQ.
Fiches produits
Pour créer des microdonnées pour un produit, nous pouvons utiliser les éléments suivants:
- Produit : Informations générales sur le produit.
- Nom : Nom du produit.
- Image : Lien vers l’image du produit.
- Description : Description du produit.
- Marque : Marque du produit.
- Offres : Offres liées au produit, pouvant inclure le prix, la devise et la disponibilité.
Voici un exemple de microdonnées au format JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"name": "Умные часы Apple Watch",
"image": "http://www.example.com/apple-watch.jpg",
"description": "Smartphone",
"brand": {
"@type": "Brand",
"name": "Apple"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "1555.00",
"availability": "http://schema.org/InStock"
}
}
</script>Notez que toute information peut être plus détaillée. Par exemple, une offre peut être décrite plus en détail, en incluant des informations sur le vendeur, le prix proposé et la disponibilité du produit.
Articles
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">The title of my wonderful article</h1>
<h2 itemprop="alternativeHeadline">Alternative title of my article</h2>
<img itemprop="image" src="image.jpg" />
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Author's name</span>
</span>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="url" src="logo.jpg" />
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="Name">
</div>
<meta itemprop="datePublished" content="2023-01-20"/>
<meta itemprop="dateModified" content="2023-01-20"/>
<div itemprop="articleBody">
Text...
</div>
</div>Dans cet exemple, chaque élément d’article (titre, auteur, image, etc.) est balisé avec des attributs itemprop contenant les propriétés correspondantes de Schema.org.
Notez que les détails dépendent de votre contenu et de vos besoins spécifiques. Par exemple, vous pouvez inclure une section « articleBody » si vous souhaitez afficher le texte principal de l’article dans le balisage. Ou utiliser « NewsArticle » s’il s’agit d’un article d’actualité.
Comment automatiser le processus ?
Si votre site est créé à l’aide d’un constructeur, vous pouvez simplifier le processus grâce à des extensions qui permettent d’ajouter des données sans avoir à saisir manuellement toutes les balises.
Voici les principales:
- Google Structured Data. Extension multifonctionnelle pour Joomla.
- Schema.org Metatag. Extension pour Drupal.
- Schema. Extension payante pour WordPress.
