Microformats et microdata en HTML5

Les données structurées permettent de décrire le sens d'un contenu pour les moteurs de recherche, au-delà de sa simple présentation. HTML5 a introduit la microdata, héritière des microformats, mais le paysage a évolué. Cet article retrace l'histoire de ces formats, explique la microdata pas à pas, puis présente le JSON-LD, désormais recommandé par Google. Si vous débutez, lisez d'abord l'introduction à HTML5 pour les bases du langage.

Les données structurées

Un navigateur sait afficher un titre, un paragraphe ou une image, mais il ne comprend pas que « Marie Dupont » est le nom d'une personne ou que « 29 € » est le prix d'un produit. Les données structurées ajoutent cette couche de sens, lisible par les machines, en s'appuyant sur un vocabulaire normalisé.

Leur intérêt principal est double :

• aider les moteurs de recherche à comprendre le contenu d'une page (qui, quoi, où, combien) ;
• déclencher des résultats enrichis dans les pages de résultats (étoiles d'avis, prix, fil d'Ariane, événements, recettes).

Un résultat enrichi attire l'œil et améliore le taux de clic. C'est la motivation concrète qui pousse à baliser ses pages, même si rien ne garantit l'affichage : Google reste seul juge de l'opportunité.

Les microformats

Les microformats sont la première approche populaire, apparue vers 2005, bien avant HTML5. L'idée : réutiliser les attributs class existants pour encoder du sens, sans inventer de nouvelle syntaxe. Une fiche de contact se balise avec le format hCard, une version plus récente s'écrit h-card (génération microformats2).

<div class="h-card">
  <span class="p-name">Marie Dupont</span>
  <a class="u-email" href="mailto:marie@exemple.fr">marie@exemple.fr</a>
  <span class="p-org">Studio Web</span>
</div>

Les microformats restent valides et simples, mais leur vocabulaire est limité (contacts, événements, avis) et propre à la communauté microformats. Ils ne s'appuient pas sur schema.org, ce qui réduit aujourd'hui leur usage face aux solutions plus riches.

La microdata HTML5

La microdata est une spécification HTML5 qui introduit des attributs dédiés, plus explicites que le détournement de class. Trois attributs forment le socle :

• itemscope : déclare qu'un élément (et son contenu) décrit un objet ;
• itemtype : indique le type de l'objet via une URL de vocabulaire (en général schema.org) ;
• itemprop : nomme une propriété de l'objet (nom, prix, adresse).

Voici une fiche de personne complète balisée avec le type Person de schema.org :

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Marie Dupont</span>
  <span itemprop="jobTitle">Développeuse web</span>
  <a itemprop="email" href="mailto:marie@exemple.fr">marie@exemple.fr</a>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="addressLocality">Lyon</span>,
    <span itemprop="addressCountry">France</span>
  </div>
</div>

Remarquez l'imbrication : la propriété address ouvre elle-même un itemscope de type PostalAddress. La microdata permet ainsi de décrire des objets liés. Certaines valeurs invisibles s'expriment avec <meta itemprop="..." content="...">, utile pour une date ou une devise non affichée à l'écran.

Le vocabulaire schema.org

schema.org est un vocabulaire commun lancé en 2011 par Google, Bing, Yahoo et Yandex. Il définit des types (Person, Product, Article, Organization, Recipe, Event, LocalBusiness) et leurs propriétés. La microdata, la RDFa et le JSON-LD sont des syntaxes différentes qui transportent toutes ce même vocabulaire.

Quelques types parmi les plus utilisés :

• Product et Offer : fiches produit, prix, disponibilité ;
• Article et BreadcrumbList : contenus éditoriaux et fil d'Ariane ;
• Organization et LocalBusiness : entreprises et établissements locaux ;
• Recipe, Event, Review : recettes, événements, avis notés.

Attention aux types dont le rendu enrichi a changé. Le type HowTo n'affiche plus de résultat enrichi dans Google depuis 2023 : le baliser reste possible mais n'apporte plus de gain visuel. Le type FAQPage est désormais restreint aux sites officiels et aux sites de santé reconnus : inutile de l'attendre sur un site classique.

Microdata vs RDFa vs JSON-LD

Trois syntaxes coexistent pour exprimer schema.org. Comparons-les rapidement :

• Microdata : attributs HTML5 (itemscope, itemprop) entrelacés au contenu visible. Lisible mais verbeux et fragile.
• RDFa : syntaxe issue du web sémantique, basée sur les attributs vocab, typeof et property. Très puissante mais plus complexe, surtout utilisée dans des contextes documentaires.
• JSON-LD : un bloc de données au format JSON, isolé du HTML, placé dans un <script>. Facile à générer, à valider et à maintenir.

Les trois sont comprises par Google, mais elles n'ont pas le même confort de maintenance. La microdata et la RDFa imposent de toucher au balisage existant ; le JSON-LD se gère comme un objet de configuration indépendant.

JSON-LD aujourd'hui

Le JSON-LD (JavaScript Object Notation for Linked Data) est le format recommandé par Google pour les données structurées. On l'insère dans la page via une balise script dédiée, généralement dans le <head> ou en fin de <body> :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Casque audio Nova",
  "image": "https://exemple.fr/nova.jpg",
  "description": "Casque sans fil à réduction de bruit.",
  "brand": { "@type": "Brand", "name": "Nova" },
  "offers": {
    "@type": "Offer",
    "price": "129.00",
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock"
  }
}
</script>

La clé @context pointe vers schema.org, @type nomme le type, et les propriétés suivent la même logique que la microdata, mais sous forme de paires clé/valeur. Les objets imbriqués (la marque, l'offre) se déclarent avec leur propre @type.

Les avantages du JSON-LD expliquent sa domination :

• séparation du contenu : le balisage est indépendant du HTML visible, donc moins fragile ;
• génération facile : un script serveur ou un CMS produit le bloc sans toucher au gabarit ;
• lisibilité et validation : un seul bloc à relire, testable avec l'outil de test des résultats enrichis de Google ;
• cohérence : plusieurs types peuvent cohabiter dans un même <script> via un tableau.

La microdata reste une partie valide de HTML5 et un bon exercice pédagogique pour comprendre les données structurées. Mais pour le référencement, le JSON-LD associé à schema.org offre la meilleure combinaison de simplicité, de robustesse et de support officiel.