Nouveau
Les pubs vous déplaisent ? Aller Sans pub Auj.
Balises Open Graph — Arrêtez que vos liens semblent terribles sur Slack
Publié le
Les balises Open Graph permettent de contrôler l'image, le titre et la description affichés lors du partage de liens sur Slack, LinkedIn, Twitter et Discord. Découvrez les 6 balises essentielles, la manière correcte de définir la taille de og:image et comment tester que vos prévisualisations fonctionnent effectivement.
ANNONCE · Supprimer ?
Vous collez une URL dans Slack. Au lieu d'une prévisualisation riche avec une grande image, un titre et une synthèse en deux lignes, vous obtenez un simple lien — ou une phrase tirée au hasard du milieu de la page. Vos collègues cliquent quand même, mais ils ne savaient pas ce qu'ils allaient voir.
Les balises Open Graph corrigent cela. Elles sont un ensemble de <meta> lignes dans votre page’s <head> qui indiquent à Slack, LinkedIn, Twitter, Discord et à chaque autre plateforme exactement ce qu'elles doivent afficher lorsqu'une URL est partagée. Les omettre et la plateforme devine — mal.
Qu'est-ce que les balises Open Graph ?
Open Graph (OG) est un protocole introduit par Facebook en 2010 afin que les pages web puissent contrôler leur apparence lorsqu'elles sont partagées sur la plateforme. L'idée était simple : ajouter des métadonnées structurées au HTML <head> et les plateformes peuvent alors extraire un titre, une description et une image appropriées au lieu de deviner.
Cela a fonctionné si bien que toutes les principales plateformes l'ont adopté. Aujourd'hui, Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp et Telegram lisent les balises OG lors de la génération des prévisualisations de lien. Facebook les utilise encore.
Les 6 balises Open Graph essentielles
Ces six balises doivent être présentes sur chaque page que vous souhaitez partager. Omettre l'une d'elles et les plateformes rempliront les blancs eux-mêmes — généralement de manière incorrecte.
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />- og:title — Le titre affiché dans la prévisualisation. Gardez-le sous 70 caractères. N'inscrivez pas simplement votre
<title>tag — les titres OG peuvent être plus percutants puisqu'ils n'ont pas besoin d'inclure le nom du site. - og:description — La synthèse en deux lignes sous le titre. 150 à 200 caractères est le bon équilibre. Faites-en une utile, pas vague.
- og:image — L'image affichée dans la carte de prévisualisation. C'est cette balise qui fait ou brise l'apparence de votre lien. Plus d'informations sur les dimensions ci-dessous.
- og:url — L'URL canonique de cette page. Utilisez toujours l'URL complète incluant
https://. Cela empêche les prévisualisations dupliquées lorsque le même contenu est lié depuis différentes URLs. - og:type — Utilisez
websitepour la plupart des pages. Utilisezarticlepour les articles de blog, accompagné dearticle:published_timeetarticle:author. - og:site_name — Le nom de votre marque. Certaines plateformes l'affichent séparément du titre, donc gardez-le court.
Les balises Twitter/X Card
Twitter a son propre système appelé Twitter Cards. Le bon côté : il reprend les balises OG si les balises Twitter Card sont absentes. Le mauvais côté : le retrait n'est pas parfait, et Twitter ne montre pas de cartes avec une grande image sauf si vous vous y engagez explicitement.
Ajoutez ces balises en parallèle à vos balises OG :
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />La balise essentielle est twitter:card. Définissez-la à summary_large_image et vous obtenez une grande carte. Définissez-la à summary et vous obtenez une miniature petite. Sans cette balise, Twitter reprend par défaut summary et votre image OG soigneusement conçue disparaît.
og:image — La balise qui fait le travail principal
Si une seule balise doit être correctement mise en place, c'est bien og:image. Une prévisualisation vide peut encore être cliquée. Une prévisualisation avec une image floue, étirée ou manquante ne l'est pas.
Dimensions recommandées
- 1200 × 630 pixels — la norme universelle qui fonctionne sur Facebook, LinkedIn, Twitter et Slack
- Minimum : 600 × 315 pixels — tout plus petit et certaines plateformes ne montrent pas l'image du tout
- Taille du fichier : sous 8 Mo — Facebook et la plupart des plateformes rejettent les fichiers plus grands
- Format : JPG ou PNG — JPG pour les photos, PNG pour les graphismes avec texte
Évitez de placer du contenu important près des bords
Les plateformes coupent les images OG différemment. Slack affiche une carte large, LinkedIn coupe en carré dans certains contextes, et les applications mobiles font leur propre chose. Gardez votre logo, votre texte et votre point focal dans une zone centrale sûre — environ le centre intérieur de 80% de l'image — pour éviter que tout ce qui est important ne soit coupé.
Comment ajouter des balises Open Graph à votre site
Sites HTML simples
Collez les balises dans le <head> de votre HTML, avant la fermeture du </head> tag :
<head>
<!-- your existing tags -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description." />
<meta property="og:image" content="https://yoursite.com/og.jpg" />
<meta property="og:url" content="https://yoursite.com/page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
<meta name="twitter:card" content="summary_large_image" />
</head>WordPress
Si vous utilisez WordPress, vous n'avez pas besoin de modifier le code. Des plugins comme Yoast SEO, Rank Math ou All in One SEO gèrent les balises OG par défaut. Après installation, recherchez la section « Social » dans l'éditeur de post/page — vous pouvez définir un titre, une description et une image personnalisés pour chaque contenu, indépendamment du titre SEO et de la description méta.
Applications Next.js et React
Dans Next.js App Router, utilisez la fonctionnalité intégrée metadata export dans votre page.tsx:
export const metadata = {
openGraph: {
title: 'Page Title',
description: 'Page description.',
images: ['https://yoursite.com/og.jpg'],
url: 'https://yoursite.com/page/',
type: 'website',
siteName: 'Site Name',
},
twitter: {
card: 'summary_large_image',
title: 'Page Title',
description: 'Page description.',
images: ['https://yoursite.com/og.jpg'],
},
};Comment tester vos balises Open Graph
Ne supposez pas que vos balises fonctionnent — les plateformes conservent les prévisualisations de manière agressive et la version en cache peut être de plusieurs jours. Utilisez ces outils pour vérifier et forcer une mise à jour :
- Débogueur de partage Facebook — montre exactement ce que Facebook lit et vous permet de vider le cache et de refaire le rafraîchissement
- Inspecteur du post LinkedIn — LinkedIn conserve les données de manière très rigoureuse, donc c'est la seule méthode fiable pour forcer un rafraîchissement
- Validateur des cartes Twitter — prévisualisez comment votre carte apparaîtra sur Twitter/X
- Vérificateur Open Graph — vérifiez directement les balises OG d'une URL depuis votre navigateur sans avoir besoin de vous connecter à une plateforme
Le Vérificateur Open Graph à IO Tools est utile pour les audits rapides — collez n'importe quelle URL et il récupère toutes les balises OG et Twitter Card en une seule vue, afin de repérer les balises manquantes sans passer d'un débogueur spécifique à l'autre.
Si vous devez générer des balises Open Graph propres et correctement formatées à partir de zéro, le Générateur de tag meta HTML produit le code HTML exact nécessaire pour toute page.
5 erreurs courantes avec les balises Open Graph
- Utilisation d'une URL relative pour l'image —
og:imagedoit être une URL absolue (https://yoursite.com/image.jpg). Les chemins relatifs comme/images/og.jpgéchouent silencieusement et l'image ne se charge pas. - Une seule image OG pour tout le site — Une image de fallback fonctionne bien pour la page d'accueil, mais les articles de blog, les pages produits et les pages d'entrée méritent chacune leur propre image. Une image générique pour tout le site élimine le sens de contexte qui rend les prévisualisations cliquables.
- Oublier
twitter:card— Sans elle, Twitter reprend par défaut une miniature petite même si vous avez une image OG parfaite de 1200×630. Ajoutez-la toujours explicitement. - Publier des modifications sans actualiser le cache — Les plateformes conservent les données OG de manière agressive. Après avoir mis à jour les balises, utilisez le débogueur de la plateforme pour forcer un rafraîchissement, ou la prévisualisation ancienne continuera à s'afficher pendant plusieurs jours.
- Écrire une description og:description qui ressemble à un titre — Utilisez le champ de description pour ajouter des informations qui ne sont pas dans le titre : ce que le lecteur apprendra, à qui elle s'adresse, quel problème elle résout.
Vous aimerez peut-être aussi
Nouveau
Nouveau
Envie d'une expérience sans pub ?
Passez à la version sans pub
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
ANNONCE · Supprimer ?
Outils essentiels
Tout voirANNONCE · Supprimer ?
Nouveautés
Tout voirMise à jour: Notre dernier outil a été ajouté le 13 juin 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
ANNONCE · Supprimer ?