English

<meta>

Utiliser meta, link ou style dans le body : microdonnées, resource hints, CSS inline

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique

<meta> + <link> + <style> — Dans le body

Les balises <meta>, <link> et <style> vivent normalement dans le <head>. Mais le standard autorise certains usages dans le <body> : <meta> avec itemprop pour les microdonnées Schema.org, <link> avec itemprop ou rel pour les resource hints et feuilles de style, et <style> pour du CSS en ligne.

Quand l'utiliser

Tu veux ajouter des microdonnées Schema.org à un composant spécifique avec <meta itemprop>. Tu veux charger une feuille de style conditionnelle au plus près du composant qui en a besoin. Tu veux injecter du CSS critique directement dans le <body> pour un composant isolé.

Ce que tu gagnes

Accessibilité : <meta itemprop> n'a aucun impact visuel ni sur les technologies d'assistance. C'est une annotation invisible pour les machines.

SEO : les microdonnées Schema.org via <meta itemprop> enrichissent les résultats de recherche avec des rich snippets (documentation Google).

Exemple de code

<article itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Wireless headphones</h2>
  <meta itemprop="sku" content="WH-1000XM5" />
  <link itemprop="image" href="/images/headphones.webp" />
  <p itemprop="description">Noise-cancelling wireless headphones.</p>
</article>
 
<style>
  .critical-banner {
    background-color: hsl(0 70% 50%);
    color: hsl(0 0% 100%);
    padding: 1rem;
  }
</style>

Pour aller plus loin