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

[Canonical HTML page](https://gradiently.design/fr/guide/open-graph-tags)

Chaque lien partagé devient une petite affiche pour votre page, construite à partir de quelques balises meta. Bien réglées, l’aperçu paraît conçu ; s’il en manque une, les plateformes devinent. Voici l’ensemble complet, avec le code à copier.

## The short version

- Les balises Open Graph sont des balises meta placées dans le head d’une page qui indiquent aux réseaux sociaux et aux messageries quel titre, quelle description et quelle image afficher quand le lien est partagé.
- Le protocole Open Graph considère og:title, og:type, og:image et og:url comme les balises de base obligatoires, et recommande vivement og:description et og:site_name.
- Une og:image de 1200×630 pixels, référencée par une URL https absolue, fonctionne bien sur Facebook, LinkedIn, X, Slack, iMessage et la plupart des autres applications.
- X lit twitter:card pour choisir la mise en page de l’aperçu et se rabat sur les balises Open Graph pour le titre, la description et l’image quand ses propres balises manquent.
- Les plateformes mettent les aperçus en cache : après avoir modifié les balises, il faut faire relire l’URL dans un outil de débogage comme le Sharing Debugger de Facebook ou le Post Inspector de LinkedIn.

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.

```html
<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>
```

Un ensemble complet et fonctionnel. X empruntera le titre, la description et l’image aux balises Open Graph ci-dessus.

| Balise | Rôle | Conseils |
| --- | --- | --- |
| `og:title` | Le titre en gras de l’aperçu | Moins de 60 caractères environ ; inutile d’ajouter le nom du site |
| `og:description` | Une ou deux lignes sous le titre | Environ 110 à 160 caractères ; certaines applications la masquent |
| `og:image` | L’image de l’aperçu | URL https absolue, 1200×630 |
| `og:url` | L’adresse canonique de la page | Identique à votre lien canonique, sans paramètres de suivi |
| `og:type` | La nature de la page | `website` pour la plupart des pages, `article` pour les billets |
| `og:site_name` | Votre marque, affichée en petit | La même sur toutes les pages |
| `og:image:alt` | Une description de l’image | Lue à voix haute par les lecteurs d’écran sur certaines plateformes |

Les balises qui comptent en pratique. La liste complète se trouve sur le site du protocole, ogp.me.

## 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](https://gradiently.design/fr/guide/open-graph-image-size). Éloignez les mots importants et le logo des bords, car certaines applications recadrent en carré ou arrondissent les coins.

- Open Graph 1200×630: 1200 × 630
- Image de lien LinkedIn 1200×627: 1200 × 627
- Recadrage carré 1200×1200: 1200 × 1200

La forme du grand aperçu et le carré auquel certaines messageries et la carte summary de X recadrent. Centrez le message pour qu’il survive aux deux.

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](https://gradiently.design/fr/guide/png-vs-jpeg) explique le choix, et [optimiser les images pour le web](https://gradiently.design/fr/guide/lighthouse-image-performance) traite de la compression.

Une image de partage large de 1200 sur 630 avec le nom d’un restaurant, un titre sur un menu de printemps et une ligne de réservation sur un dégradé doux

Une image de partage pensée pour l’aperçu : peu de mots, centrés, assez grands pour se lire à la taille affichée dans un fil.

> **L’image doit être accessible** Les plateformes récupèrent `og:image` depuis leurs propres serveurs. Un chemin relatif, une page derrière une connexion, un pare-feu qui bloque les robots inconnus ou une URL signée expirée vous donnent un aperçu vide.

## 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.

| Balise | Valeurs | Remarques |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` ou `summary` | Grande image, ou petite vignette carrée |
| `twitter:site` | `@yourbrand` | Le compte du site |
| `twitter:creator` | `@author` | L’auteur d’un article |
| `twitter:image:alt` | Texte | À utiliser quand l’image diffère de la version og |

Ajoutez seulement celles-ci et laissez Open Graph fournir le reste.

## 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.

```html
<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" />
```

Les dates suivent l’ISO 8601. Gardez modified_time honnête : ne le mettez à jour que lorsque le contenu change vraiment.

## 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.

```ts
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' },
}
```

Consultez la documentation de votre version du framework, car les API de métadonnées changent d’une version à l’autre. Pour des images générées par page, voir [les images OG dynamiques](https://gradiently.design/fr/guide/dynamic-og-images).

## Tester et corriger les aperçus de partage

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. **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. **Faites relire la page** Passez l’URL dans le Sharing Debugger de Facebook et le [Post Inspector de LinkedIn](https://www.linkedin.com/post-inspector/) pour vider leurs caches.
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. **Partagez-la en privé** Envoyez-vous le lien dans Slack ou une messagerie pour voir un véritable aperçu.

### Aperçu vide ou erroné

- Balises injectées par du JavaScript côté client
- Chemin og:image relatif
- og:url pointe vers une autre page
- Image minuscule ou aux proportions étranges
- Balises modifiées, aperçu inchangé

### Correctif

- Générer les balises côté serveur
- Utiliser une URL https complète
- Aligner og:url sur l’adresse canonique
- Exporter en 1200×630
- Faire relire la page, ou renommer l’image

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](https://gradiently.design/fr/guide/social-media-image-sizes).

## FAQ

### Que sont les balises Open Graph ?

Des balises meta placées dans le head d’une page, comme og:title et og:image, qui indiquent aux réseaux sociaux et aux messageries ce qu’il faut afficher quand le lien est partagé.

### Quelles balises Open Graph sont obligatoires ?

Le protocole cite og:title, og:type, og:image et og:url comme balises de base. Ajoutez og:description et og:site_name pour un aperçu complet.

### Quelle taille pour une og:image ?

1200×630 pixels fonctionne sur Facebook, LinkedIn, X et la plupart des messageries. Utilisez une URL https absolue et centrez le contenu essentiel.

### Faut-il des balises Twitter Card si j’ai déjà les balises Open Graph ?

Ajoutez `twitter:card`, généralement réglée sur `summary_large_image`. X se rabat sur Open Graph pour le titre, la description et l’image.

### Pourquoi l’aperçu de mon lien ne se met-il pas à jour ?

Les plateformes mettent les aperçus en cache. Faites relire l’URL dans le Sharing Debugger de Facebook ou le Post Inspector de LinkedIn, ou renommez le fichier image.

### Faut-il utiliser property ou name pour les balises og ?

Les balises Open Graph utilisent `property`, et les balises Twitter utilisent `name`. La plupart des analyseurs acceptent les deux, mais suivre la convention évite les surprises.