SEO technique : Open Graph et données structurées

Contrôlez l'aperçu de vos pages sur les réseaux sociaux avec Open Graph et visez les résultats enrichis grâce à schema.org en JSON-LD.

8 min · 3 questions

Ouvrir cette leçon dans Kodokon

Quand une URL est partagée sur un réseau social ou une messagerie, un scraper lit le HTML pour construire la carte d'aperçu. Le protocole Open Graph pilote cette carte : og:title, og:description, og:type, og:url et surtout og:image, qui doit être une URL absolue (les chemins relatifs sont ignorés par la plupart des plateformes). Piège de métier : ces scrapers n'exécutent pas JavaScript. Si vos balises sont injectées côté client par votre framework, l'aperçu sera vide ; elles doivent être présentes dans le HTML servi initialement (SSR ou génération statique).

HTML

<meta property="og:title"
      content="Guide du café filtre">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios et techniques pour un café net.">

Le socle Open Graph, avec une og:image absolue

Deux compléments s'ajoutent au socle. <link rel="canonical"> désigne l'URL de référence quand une page est accessible par plusieurs adresses (paramètres de tracking, pagination) : c'est votre défense contre le contenu dupliqué. Et les balises Twitter Cards : la plateforme retombe sur Open Graph pour le contenu, mais twitter:card reste nécessaire pour choisir le format d'affichage, notamment summary_large_image.

HTML

<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">

Canonical et format de carte : deux lignes rentables

Les données structurées schema.org décrivent le sens de votre contenu aux moteurs de recherche : article, produit, recette, fil d'Ariane, FAQ. Trois syntaxes existent (microdata, RDFa, JSON-LD), mais Google recommande JSON-LD : un bloc autonome dans un <script type="application/ld+json">, découplé du balisage visuel, donc facile à générer et à maintenir. C'est ce balisage qui rend votre page éligible aux résultats enrichis : étoiles d'avis, prix, dates d'événement directement dans la page de résultats.

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Guide du café filtre",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>

Un Article en JSON-LD : lu par les moteurs, jamais rendu

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

Quelle contrainte s'applique à la valeur de og:image ?
- Elle doit être une URL absolue, domaine inclus
- Elle doit pointer vers un fichier au format WebP
- Elle doit être encodée en base64 dans la balise
Pourquoi Google recommande-t-il JSON-LD plutôt que les microdata ?
- JSON-LD est exécuté comme du JavaScript, donc plus rapide
- JSON-LD est un bloc autonome, découplé du balisage visible et facile à générer
- Les microdata ne sont plus lues par les moteurs de recherche
Que garantit un balisage schema.org valide et complet ?
- L'affichage systématique de résultats enrichis
- Une amélioration directe du classement de la page
- L'éligibilité aux résultats enrichis, sans garantie d'affichage