Balises Open Graph : le guide complet des aperçus de partage

Les balises Open Graph sont des balises <meta> placées dans le <head> d’une page qui décident de son apparence lorsqu’elle est partagée : le titre, la courte description, l’image et le lien. Facebook a créé le protocole, et aujourd’hui LinkedIn, X, Slack, Discord, WhatsApp, iMessage et la plupart des autres applications le lisent. Quatre balises en forment le cœur, og:title, og:type, og:image et og:url, et en ajoutant une description, la taille de l’image et une balise Twitter Card, vous couvrez presque toutes les plateformes.

Les balises Open Graph indispensables à chaque page

Collez ceci dans le head d’une page et remplacez les valeurs. Chaque balise utilise property, pas name, et chaque URL est absolue.

<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>

L’og:image : taille et format

L’image est ce que les gens remarquent vraiment. Utilisez 1200×630 pixels, un ratio d’environ 1,91:1, la taille attendue par les plateformes pour les grands aperçus et celle indiquée dans la taille d’une image Open Graph. Éloignez les mots importants et le logo des bords, car certaines applications recadrent en carré ou arrondissent les coins.

Enregistrez-la en PNG quand elle est surtout faite de texte et de dégradé, ou en JPEG de haute qualité pour les photos, et gardez un fichier léger, idéalement quelques centaines de kilo-octets, car les plateformes fixent leurs propres limites et les gros fichiers chargent lentement dans les fils. PNG ou JPG explique le choix, et optimiser les images pour le web traite de la compression.

Les balises Twitter Card pour X

X utilise ses propres balises twitter:, écrites avec name plutôt que property. Celle qui compte est twitter:card. Quand twitter:title, twitter:description ou twitter:image manquent, X se rabat sur les balises Open Graph correspondantes, il est donc rarement utile de les dupliquer.

Les balises Open Graph pour les articles

Les billets de blog et les pages d’actualité peuvent en dire plus sur eux-mêmes avec og:type réglé sur article et quelques propriétés supplémentaires. Certaines applications affichent la date ou l’auteur, et elles aident les plateformes à comprendre la page.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />

Définir les balises Open Graph dans un framework

La plupart des frameworks génèrent ces balises à partir de données. Dans Next.js, exportez un objet metadata depuis la page ou le layout et le framework écrit les balises pour vous. Définissez une fois metadataBase pour que les chemins d’image relatifs deviennent absolus.

export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}

Tester et corriger les aperçus de partage

1. 1

   Affichez le code source

   Ouvrez le code source de la page, pas l’inspecteur, et vérifiez que les balises figurent dans le HTML du serveur. Beaucoup de robots n’exécutent pas JavaScript.

2. 2

   Vérifiez l’URL de l’image

   Collez l’adresse de l’og:image dans une fenêtre privée. Elle doit se charger sans connexion.

3. 3

   Faites relire la page

   Passez l’URL dans le Sharing Debugger de Facebook et le Post Inspector de LinkedIn pour vider leurs caches.

4. 4

   Versionnez l’image

   Si une ancienne image persiste, changez son nom de fichier ou ajoutez un paramètre comme ?v=2, puis faites relire la page.

5. 5

   Partagez-la en privé

   Envoyez-vous le lien dans Slack ou une messagerie pour voir un véritable aperçu.

Les balises sont la partie facile ; l’image est le vrai travail de création, et elle doit se lire en taille de vignette. Dans Gradiently, l’aperçu de lien fait partie des formats intégrés en 1200×630, le Mark garde sa zone la plus calme derrière les mots, et le Designer peut créer l’image de partage d’une page à partir d’une phrase, puis les formats de publication assortis pour chaque plateforme.