Que sont les balises Open Graph ? Un guide des aperçus de liens et du partage social

Lorsque vous partagez un lien sur Facebook, LinkedIn, Slack ou Twitter, une carte d'aperçu apparaît généralement — avec un titre, une description et une image. Ces aperçus ne sont pas magiques. Ils sont contrôlés par des balises Open Graph (OG) dans le HTML de votre page.

Bien configurer les balises Open Graph signifie que vos liens partagés auront une apparence professionnelle et obtiendront plus de clics. Les mal configurer signifie des aperçus désagréables, des images manquantes ou du texte générique par défaut.

Qu'est-ce que le protocole Open Graph ?

Open Graph est un protocole créé par Facebook en 2010 qui permet aux pages web de définir comment elles apparaissent lorsqu'elles sont partagées sur les plateformes sociales. Il utilise des balises meta dans la section <head> du HTML :

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Lorsqu'une plateforme sociale détecte une URL partagée, elle récupère la page et lit ces balises pour construire la carte d'aperçu.

Balises Open Graph essentielles

og:title

Le titre affiché dans la carte d'aperçu. Maintenez-le sous 60 caractères pour un meilleur affichage sur toutes les plateformes.

<meta property="og:title" content="How to Create Branded Short Links" />

Conseils :

Ne dupliquez pas simplement votre balise <title> — optimisez pour l'engagement social
Mettez les mots importants en avant
Évitez le clickbait (les plateformes peuvent le pénaliser)

og:description

Un bref résumé affiché sous le titre. Visez 120-160 caractères.

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

L'image affichée dans l'aperçu. C'est la balise la plus impactante — les publications avec images obtiennent beaucoup plus d'engagement.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Exigences d'image par plateforme :

Plateforme	Taille recommandée	Rapport d'aspect
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px min	N'importe lequel

Utilisez 1200 × 630 pixels pour couvrir toutes les plateformes.

og:url

L'URL canonique de la page. Cela indique aux plateformes quelle URL afficher et aide à prévenir le contenu en double.

<meta property="og:url" content="https://example.com/page" />

og:type

Décrit le type de contenu. Valeurs courantes :

website — pour les pages d'accueil et les pages générales
article — pour les articles de blog et les articles
product — pour les pages de produits

Balises Twitter Card

Twitter utilise ses propres balises meta (en plus d'Open Graph) pour les cartes d'aperçu :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Si les balises Twitter Card ne sont pas présentes, Twitter revient aux balises Open Graph. La plupart des sites définissent les deux pour un contrôle maximal.

Comment les plateformes sociales récupèrent les données Open Graph

Lorsque vous partagez une URL :

1Le robot d'exploration de la plateforme visite l'URL
2Il lit le <head> du HTML pour les balises OG
3Il met en cache les données de la carte d'aperçu
4Les partages suivants de la même URL utilisent la version en cache

Important : Les modifications apportées aux balises OG ne sont pas reflétées immédiatement. Les plateformes mettent en cache de manière agressive, vous devrez donc peut-être effacer manuellement le cache (voir le débogage ci-dessous).

Personnaliser les aperçus de liens avec Linkly

Que faire si vous partagez une URL que vous ne contrôlez pas — ou si vous voulez des cartes d'aperçu différentes pour différents contextes ?

La fonctionnalité aperçus sociaux personnalisés de Linkly vous permet de remplacer les données Open Graph pour n'importe quel lien raccourci :

Définissez un titre, une description et une image personnalisés
Différents aperçus pour différents publics
Pas besoin d'éditer le HTML de la page de destination
Fonctionne pour n'importe quelle URL, même les pages que vous ne possédez pas

Ceci est particulièrement utile quand :

Partager du contenu tiers avec votre propre marque
Tester A/B différentes cartes d'aperçu pour voir laquelle obtient plus de clics
La page de destination a de mauvaises balises OG manquantes ou absentes

Débogage des balises Open Graph

L'outil de Facebook vous permet de prévisualiser et d'actualiser les données OG mises en cache :

1Entrez votre URL
2Cliquez sur Debug
3Voyez ce que Facebook lit sur votre page
4Cliquez sur Scrape Again pour effacer le cache

Twitter Card Validator

Le validateur de Twitter montre comment votre carte apparaîtra et met en évidence les problèmes.

LinkedIn Post Inspector

L'outil de LinkedIn prévisualise votre carte de lien et actualise les données mises en cache.

Conseils généraux

Vérifiez la source : Affichez la source de votre page et recherchez og: pour vérifier que les balises sont présentes
Utilisez des URL absolues : Les URL d'image doivent être absolues (commençant par https://), pas relatives
Testez après les modifications : Effacez toujours le cache de la plateforme après la mise à jour des balises OG
Vérifiez le rendu JavaScript : Certaines plateformes ne peuvent pas exécuter JavaScript, les balises OG doivent donc être dans la réponse HTML initiale

Erreurs courantes

1Balise og:image manquante : Les publications sans images obtiennent 2-3 fois moins de clics
2Image trop petite : Utilisez au moins 1200 × 630 pixels
3Mauvais rapport d'aspect : Les images sont recadrées maladroitement
4Cache obsolète : Vous avez mis à jour vos balises OG mais oublié d'effacer les caches des plateformes
5Balises en double : Plusieurs balises OG du même type causent un comportement imprévisible
6Images HTTP : Utilisez HTTPS pour les URL d'image — certaines plateformes bloquent les images HTTP
7URL relatives : Les robots d'exploration des plateformes ne peuvent pas résoudre les chemins relatifs

Open Graph pour différents types de contenu

Articles de blog

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

Produits

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Vidéos

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Conclusion

Les balises Open Graph sont un petit ajout à votre HTML qui a un grand impact sur la façon dont votre contenu apparaît sur le web social. Les bien configurer — avec le bon titre, la bonne description et la bonne image — augmente directement les taux de clics lorsque vos liens sont partagés.

Voulez-vous des aperçus de liens personnalisés sans éditer le HTML ? Commencez avec Linkly et personnalisez la carte d'aperçu social pour n'importe quel lien raccourci — définissez votre propre titre, description et image.