Qu'est-ce que Open Graph ? Un guide complet du débutant
Vous partagez un lien sur les réseaux sociaux. L'aperçu a l'air terrible. Voici pourquoi et comment les balises Open Graph corrigent ce problème.
Vous voulez voir à quoi ressemblent réellement vos liens ?
Vérifiez gratuitement vos balises Open Graph avec Proovd — collez une URL et voyez l'aperçu sur X, LinkedIn, Slack, Discord, WhatsApp et Reddit avant de partager.
Réponse rapide
- Open Graph est un ensemble de balises méta HTML qui contrôlent l'apparence des liens sur les réseaux sociaux
- Balises principales :
og:title, og:description, og:image, og:url
- Sans balises OG, les plateformes devinent – et elles devinent mal
- Définissez les balises OG + les balises Twitter Card pour une couverture complète
Qu'est-ce que Open Graph est réellement
Open Graph est un protocole inventé par Facebook en 2010. Avant Open Graph, lorsque quelqu'un partageait un lien sur Facebook, l'aperçu était imprévisible. Facebook parcourait la page à la recherche d'images et de texte, et le résultat était souvent aléatoire – parfois une petite favicon, parfois une photo aléatoire de la page, parfois rien du tout.
Facebook a déclaré : "Donnons aux webmasters un moyen standard de nous dire quoi afficher." Ils ont introduit un ensemble de balises méta que n'importe quel site Web pourrait ajouter à son code HTML. D'autres plates-formes — X, LinkedIn, Slack, Discord, WhatsApp, Reddit — ont adopté la même norme. Aujourd'hui, Open Graph est le langage universel pour les aperçus de liens sur Internet.
Ce n'est pas une technologie que vous installez. Il ne s'agit que de balises méta HTML dans la section
Le noyau Open Graph Tags
Chaque page partagée sur les réseaux sociaux doit avoir au moins ces quatre balises :
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
Voici ce que chacun fait :
- og:title — Le titre qui apparaît dans la carte d'aperçu. Généralement le titre de la page ou le titre de l’article.
- og:description — Un bref résumé (2-3 phrases) qui apparaît sous le titre.
- og:image — L'image d'aperçu. Taille recommandée : 1200×630 pixels (rapport 1,91:1).
- og:url — L'URL canonique de la page. Aide les plateformes à identifier l'URL correcte.
Il existe des balises facultatives supplémentaires telles que og:type (généralement « site Web » ou « article »), og:site_name (le nom de votre marque) et og:locale (langue). Mais les quatre ci-dessus sont ceux qui comptent le plus pour les aperçus de liens.
Comment fonctionne Open Graph – étape par étape
Voici ce qui se passe lorsque quelqu'un partage un lien :
- Quelqu'un colle une URL dans X, LinkedIn, Slack, Discord ou n'importe où.
- Le bot de la plateforme récupère l'URL et lit le HTML de haut en bas.
- Il recherche og: tags dans la section
- Il crée une carte d'aperçu en utilisant les valeurs og:title, og:description et og:image.
- La carte est affichée à toute personne voyant le lien partagé.
Si la plate-forme ne trouve pas de balises og:, elle revient à sa propre heuristique : sélection d'images aléatoires, utilisation de la balise </code>, etc. Ce comportement de repli est la raison pour laquelle tant de liens partagés semblent terribles.</p>
<h2 data-i18n="b.what-is-open-graph.31">Open Graph contre Twitter Cards</h2>
<p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter a créé son propre système de balises appelé « Twitter Cards » avant que Open Graph n'existe. Twitter Cards utilisez les attributs <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> et <code>twitter:image</code> au lieu de <code>og :</code> préfixes.</p>
<p data-i18n="b.what-is-open-graph.33" data-i18n-html>Aujourd’hui, la plupart des plateformes prennent en charge les deux. Mais X/Twitter préfère toujours les balises <code>twitter:card</code> aux balises OG. C'est pourquoi la meilleure pratique consiste à définir <strong>both</strong> :</p>
<pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<!-- Twitter/X (works on X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre>
<h2 data-i18n="b.what-is-open-graph.34">Pourquoi c'est important pour votre site Web</h2>
<p data-i18n="b.what-is-open-graph.35">Si vous partagez votre contenu n'importe où sur les réseaux sociaux (ce que vous faites probablement si vous avez un site Web), vos aperçus de liens sont votre première impression. Un aperçu bien conçu avec un titre clair, une description convaincante et une bonne image augmente considérablement les taux de clics.</p>
<p data-i18n="b.what-is-open-graph.36">Un aperçu cassé (image manquante, titre tronqué ou description tronquée) donne à votre contenu un aspect non professionnel. Les gens défilent devant.</p>
<p data-i18n="b.what-is-open-graph.37">Les balises Open Graph sont la différence entre les deux. Ils prennent 5 minutes à configurer et ont un impact disproportionné sur les performances de votre contenu sur les réseaux sociaux.</p>
<h2 data-i18n="b.what-is-open-graph.38">Liste de contrôle rapide</h2>
<div class="checklist">
<ol>
<li data-i18n="b.what-is-open-graph.39" data-i18n-html>Ajoutez <code>og:title</code>, <code>og:description</code>, <code>og:image</code> et <code>og:url</code> à chaque page</li>
<li data-i18n="b.what-is-open-graph.40" data-i18n-html>Ajoutez <code>twitter:card</code> et <code>twitter:image</code> pour la compatibilité X/Twitter</li>
<li data-i18n="b.what-is-open-graph.41">Définir la taille de l'image sur 1200 × 630 pixels</li>
<li data-i18n="b.what-is-open-graph.42">Utilisez des URL absolues (https://...) pour tous les chemins d'image</li>
<li data-i18n="b.what-is-open-graph.43" data-i18n-html>Testez avec <a href="https://proovd.in/fr/">Proovd</a> pour voir à quoi ressemble votre page sur toutes les plateformes</li>
</ol>
</div>
<h2 data-i18n="b.what-is-open-graph.44">Foire aux questions</h2>
<div class="faq-item">
<h3 data-i18n="b.what-is-open-graph.45">Ai-je besoin de balises Open Graph si je ne partage pas sur les réseaux sociaux ?</h3>
<p data-i18n="b.what-is-open-graph.46">Si vous ne partagez de liens nulle part, vous n’en avez pas besoin. Mais si vous avez un site Web et que vous le partagez ne serait-ce qu'une seule fois sur les réseaux sociaux, les balises OG sont essentielles.</p>
</div>
<div class="faq-item">
<h3 data-i18n="b.what-is-open-graph.47">Les balises Open Graph affectent-elles le classement Google ?</h3>
<p data-i18n="b.what-is-open-graph.48">Pas directement. Google n'utilise pas les balises OG comme facteur de classement. Mais ils peuvent affecter les taux de clics sur les résultats de recherche et les partages sociaux, ce qui a un impact indirect sur le trafic et la visibilité.</p>
</div>
<div class="faq-item">
<h3 data-i18n="b.what-is-open-graph.49">Puis-je définir différentes balises OG pour différentes pages ?</h3>
<p data-i18n="b.what-is-open-graph.50">Oui. Chaque page doit avoir ses propres balises OG qui correspondent à son contenu. Un article de blog sur les chiens doit avoir des og:title et og:image différents de ceux d'une page sur les chats.</p>
</div>
<div class="internal-links">
<h3 data-i18n="b.what-is-open-graph.51">Articles connexes</h3>
<ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/fr/blog/discord-link-preview-not-working">Discord L'aperçu du lien ne fonctionne pas ? 7 correctifs à essayer (2026)</a></li>
<li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/fr/blog/how-to-add-open-graph-tags">Comment ajouter Open Graph des balises à n'importe quel site Web</a></li>
<li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/fr/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card : quelle est la différence ?</a></li>
<li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/fr/blog/og-image-size-guide">Open Graph Taille de l'image : le guide complet 2026</a></li>
</ul>
</div>
<div class="cta">
<p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>Vérifiez vos Open Graph tags en quelques secondes</strong></p>
<p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Vérifiez gratuitement vos balises Open Graph avec <a href="https://proovd.in/fr/">Proovd</a> — collez une URL et voyez l'aperçu sur X, LinkedIn, Slack, Discord, WhatsApp et Reddit.</p>
</div>
</article>
</div>
<script src="/i18n/apply.js" defer></script>
</body>
</html>