Balises Open Graph : Contrôlez l'apparence de votre contenu lors du partage

31 mars 2026 · 12 min de lecture

Qu'est-ce que le protocole Open Graph ?

Le protocole Open Graph, créé à l'origine par Facebook en 2010, est un ensemble de balises meta HTML qui indiquent aux plateformes de médias sociaux comment afficher votre page web lorsque quelqu'un la partage. Sans balises Open Graph, les plateformes devinent quoi afficher—choisissant souvent la mauvaise image, tronquant le titre ou affichant une description générique. Avec des balises OG appropriées, vous contrôlez exactement ce qui apparaît.

Pensez à la dernière fois que vous avez partagé un lien sur Facebook, LinkedIn ou dans une application de messagerie. Cette carte d'aperçu enrichie avec l'image, le titre et la description ? C'est Open Graph en action. La différence entre un aperçu OG bien configuré et un aperçu cassé peut faire la différence entre quelqu'un qui clique sur votre lien ou qui passe à côté.

Le protocole s'est étendu bien au-delà de Facebook. Aujourd'hui, Twitter, LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram et pratiquement toutes les plateformes qui génèrent des aperçus de liens lisent les balises Open Graph. Les implémenter une fois améliore l'apparence de votre contenu partout.

Pour les propriétaires de sites web et les spécialistes du marketing, les balises OG ne sont pas optionnelles—elles sont essentielles. Les pages partagées sur les médias sociaux sans balises OG semblent peu professionnelles et génèrent un engagement nettement inférieur par rapport au contenu correctement balisé. Les études montrent que les publications avec des aperçus enrichis reçoivent jusqu'à 40 % de clics en plus que celles sans.

Balises Open Graph essentielles

Chaque page web devrait inclure au minimum ces quatre balises Open Graph principales. Ce sont les fondations de l'apparence de votre contenu sur les plateformes sociales :

<meta property="og:title" content="Titre de votre page">
<meta property="og:description" content="Une description convaincante de votre page">
<meta property="og:image" content="https://votredomaine.com/og-image.jpg">
<meta property="og:url" content="https://votredomaine.com/page">

og:title

Le og:title est le titre qui apparaît dans la carte d'aperçu. Il doit être concis, convaincant et représenter fidèlement votre contenu. Gardez-le entre 60 et 90 caractères pour un affichage optimal sur toutes les plateformes.

Votre titre OG n'a pas besoin de correspondre exactement à la balise <title> de votre page. En fait, vous pourriez vouloir les optimiser différemment—le titre de page pour le SEO et les moteurs de recherche, le titre OG pour le partage social et l'engagement.

og:description

La description fournit un contexte sur votre page. La plupart des plateformes affichent 2 à 3 lignes, ce qui se traduit par environ 150 à 200 caractères. Faites en sorte que chaque mot compte—c'est votre argumentaire éclair pour les visiteurs potentiels.

Rédigez des descriptions qui créent de la curiosité ou promettent de la valeur. Au lieu de « Cet article traite des balises Open Graph », essayez « Apprenez à contrôler exactement ce qui apparaît lorsque votre contenu est partagé sur les médias sociaux. »

og:image

L'image est l'élément visuellement le plus proéminent de votre carte d'aperçu. C'est souvent la première chose que les gens remarquent et peut déterminer si quelqu'un clique sur votre lien ou non. L'URL de l'image doit être absolue (pas relative) et devrait être hébergée sur un CDN fiable.

Nous approfondirons l'optimisation des images dans la section suivante, mais la version courte : utilisez 1200×630 pixels, gardez la taille du fichier sous 1 Mo et assurez-vous que l'image soit belle à différentes tailles.

og:url

L'URL canonique de votre page. Ce devrait être l'URL permanente et préférée que vous souhaitez associer à ce contenu. Utilisez l'URL complète incluant le protocole (https://) et évitez les paramètres de suivi.

Le og:url aide les plateformes à dédupliquer le contenu et à consolider les métriques d'engagement. Si votre page est accessible via plusieurs URL, l'URL OG indique aux plateformes laquelle est la version « réelle ».

og:type

Bien que pas toujours requis, og:type indique aux plateformes quel type de contenu vous partagez. Les valeurs courantes incluent :

• website - Par défaut pour la plupart des pages
• article - Articles de blog et articles d'actualité
• video.movie - Pages de films
• music.song - Contenu musical
• product - Pages de produits e-commerce

Pour la plupart des sites web, vous utiliserez soit website soit article. Le type peut débloquer des propriétés supplémentaires spécifiques à ce type de contenu.

Propriétés Open Graph avancées

Au-delà des balises essentielles, Open Graph prend en charge des dizaines de propriétés supplémentaires qui fournissent un contexte plus riche et activent des fonctionnalités spécifiques aux plateformes. Voici les balises avancées les plus utiles :

Balises spécifiques aux articles

Lorsque vous utilisez og:type défini sur article, vous pouvez inclure des métadonnées supplémentaires :

<meta property="article:published_time" content="2026-03-31T10:00:00Z">
<meta property="article:modified_time" content="2026-03-31T15:30:00Z">
<meta property="article:author" content="https://votredomaine.com/auteur/nom">
<meta property="article:section" content="Technologie">
<meta property="article:tag" content="Open Graph">
<meta property="article:tag" content="Médias sociaux">

Ces balises aident les plateformes à comprendre le contexte et la fraîcheur de votre contenu. Certaines plateformes affichent les dates de publication dans les cartes d'aperçu, tandis que d'autres utilisent ces données pour le classement algorithmique.

Dimensions de l'image et texte alternatif

Fournissez des dimensions d'image explicites pour aider les plateformes à rendre les aperçus plus rapidement sans attendre les téléchargements d'images :

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Texte descriptif pour l'accessibilité">

La balise og:image:alt est cruciale pour l'accessibilité. Elle fournit un texte alternatif pour les utilisateurs qui ne peuvent pas voir les images, et certaines plateformes l'affichent lorsque les images ne se chargent pas.

Locale et langue

Spécifiez la langue et la variante régionale de votre contenu :

<meta property="og:locale" content="fr_FR">
<meta property="og:locale:alternate" content="fr_CA">
<meta property="og:locale:alternate" content="en_US">

Cela aide les plateformes à servir la bonne version aux utilisateurs dans différentes régions et peut améliorer l'apparence de votre contenu dans les fils d'actualité localisés.

Nom du site

Le og:site_name identifie le nom de votre marque ou site web, séparé du titre de la page :

<meta property="og:site_name" content="DLKit">

De nombreuses plateformes affichent ceci comme une signature ou une attribution, aidant à construire la reconnaissance de la marque à travers les partages.

Balises vidéo et audio

Si votre page contient du contenu vidéo ou audio, vous pouvez l'intégrer directement dans les aperçus sociaux :

<meta property="og:video" content="https://votredomaine.com/video.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

Des plateformes comme Facebook et LinkedIn peuvent lire des vidéos directement dans le fil d'actualité, augmentant considérablement l'engagement par rapport aux images statiques.

Optimiser votre image OG

Votre image Open Graph est l'élément visuel le plus important de votre aperçu social. Une image convaincante peut augmenter