Ai-je besoin à la fois des balises OG et des balises Twitter ?

Techniquement non — la plupart des plateformes retournent vers les balises og: si les balises twitter: sont absentes. Mais Twitter/X ne montre pas le format d'image large sans la balise twitter:card définie à summary_large_image, donc ajoutez-la tout de même.

Quelle taille d'image dois-je utiliser pour og:image ?

1200×630px est la recommandation standard. Slack nécessite au moins 600px de large pour afficher une image. Sous 200×200px et la plupart des plateformes l'ignore entièrement.

Mes étiquettes sont correctes mais le prévisualisation est encore en panne. Que faire maintenant ?

Les plateformes conservent les données OG de manière agressive. Utilisez le Facebook Debugger (developers.facebook.com/tools/debug) ou l'inspecteur de publication LinkedIn pour forcer une nouvelle extraction. Pour Slack, ajoutez un paramètre de requête pour rompre l'URL cachée.

Puis-je définir des balises OG différentes par page dans une application mono-page ?

Oui, mais cela nécessite un rendu côté serveur ou un service de pré-rendu. Les modifications apportées aux balises meta par JavaScript côté client ne sont pas détectées par la plupart des robots — ils récupèrent le HTML brut avant que le JavaScript ne s'exécute.

Les pubs vous déplaisent ? Aller Sans pub Auj. 

Balises Open Graph Arrêtez que vos liens soient horribles sur Slack

Mis à jour le 15 mai 2026

Vous avez passé des semaines à construire l'application. Le prévisualisation du lien dans Slack affiche « Inconnu » et un icône corrompue. C'est un problème Open Graph. Voici comment le corriger en 10 minutes.

Balises Open Graph : Arrêtez que vos liens soient terribles sur Slack 1

ANNONCE · Supprimer ?

Vous avez passé trois semaines à construire l'application. Le prévisualisation du lien dans Slack affiche « Inconnu » et une miniature de votre logo de pied de page. C'est un problème Open Graph et il faut environ 10 minutes pour le corriger.

Qu'est-ce que les balises Open Graph ?

Open Graph (og:) est un protocole introduit en 2010 par Facebook, que toutes les grandes plateformes utilisent aujourd'hui pour générer les prévisualisations des liens. Lorsque Slack, Twitter, LinkedIn ou iMessage déplie votre URL, ils récupèrent la page, cherchent <meta> des balises avec le og: préfixe, et utilisent ces balises pour construire la carte.

Aucune balise → ils devinent. Ils se trompent généralement.

Les balises qui comptent vraiment

Balise	Obligatoire ?	Ce que fait la balise
`og:title`	Oui	Le titre affiché dans la carte prévisualisée
`og:description`	Oui	Le sous-titre / texte de synthèse (gardez sous 200 caractères)
`og:image`	Oui	L'image prévisualisée. Doit être une URL absolue.
`og:url`	Oui	L'URL canonique de la page
`og:type`	Recommandé	Utilisez `website` pour la plupart des pages, `article` pour les publications
`twitter:card`	Recommandé	Contrôle la taille de la carte Twitter/X. Utilisez `summary_large_image`.
`twitter:title`	Facultatif	Fait recours à `og:title` sur la plupart des clients
`twitter:description`	Facultatif	Fait recours à `og:description`
`twitter:image`	Facultatif	Fait recours à `og:image`

La balise qui dérange le plus les utilisateurs est og:image. Elle doit être une URL absolue (aucun chemin relatif), idéalement 1200×630px, et sous 8 Mo. Slack, en particulier, ignore silencieusement les images ne respectant pas ses exigences de taille. Visez au moins 600 px de large, sinon l'image ne s'affichera pas.

Un ensemble complet de balises OG

Insérez cela dans la <head> de votre page. Remplacez les valeurs de placeholder :

<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />

Pour un article ou une publication, modifiez og:type à article et ajoutez l'auteur et la date de publication :

<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />

Comment vérifier vos balises sans déployer

La méthode la plus rapide : collez votre URL dans IO Tools Open Graph Checker. Il récupère la page, analyse les balises et vous montre exactement ce que Slack (ou toute autre plateforme) verra — y compris une prévisualisation de la manière dont la carte sera affichée. Aucune connexion requise, aucun extension à installer.

Si vous souhaitez vérifier une URL locale ou un environnement de staging non accessible publiquement, le vérificateur ne pourra pas l'atteindre. Dans ce cas, consultez la source de votre page et vérifiez manuellement que les balises sont présentes dans la <head>. Une fois déployé, exécutez à nouveau le vérificateur pour confirmer que la version en ligne correspond.

Vérificateurs spécifiques aux plateformes (dans les cas où vous devez forcer une mise à jour du cache) :

Facebook/Meta : developers.facebook.com/tools/debug — également efface le cache de Facebook concernant vos balises OG
LinkedIn : linkedin.com/post-inspector — utile lorsque votre prévisualisation est obsolète après une mise à jour
Twitter/X : cards-dev.twitter.com/validator — plus lent à mettre à jour mais bon pour confirmer le format de la carte

Slack cache activement. Si vous corrigez vos balises et que la prévisualisation ancienne persiste, vous pouvez forcer une rechargement en ajoutant une chaîne de requête (par exemple ?v=2) à l'URL avant de la partager — pas idéal pour les liens en production, mais acceptable pour les tests.

Génération des balises

Si vous souhaitez générer un ensemble complet de balises de manière interactive plutôt que de les écrire manuellement, le IO Tools HTML Meta Tag Generator couvre les balises OG, les cartes Twitter et les balises standard en une seule fois. Copiez le résultat dans votre <head>.

Erreurs courantes à éviter

Des URLs d'images relatives. /images/og.png Ne fonctionnent pas. Chaque plateforme récupère les balises OG depuis un serveur externe qui n'a pas de contexte sur votre URL de base. Utilisez toujours le chemin absolu. https:// path.
Utiliser la même image pour tout. Un avatar de 300×300 pixels comme image OG apparaîtra techniquement — en tant que miniature petite et maladroite. Créez une image de 1200×630 pixels pour chaque page clé.
Oublier de définir og:url. Sans cela, certaines plateformes utilisent l'URL qu'elles ont récupérée, d'autres en créent une de leur propre initiative. Définissez-la explicitement.
Oublier de vider les caches. La plupart des plateformes conservent les balises OG pendant 24 à 72 heures. Si vous modifiez les balises sur une page en ligne, utilisez les vérificateurs des plateformes ci-dessus pour forcer une récupération fraîche.
Mélanger property et name attributs. Les balises OG utilisent property=. Les balises Twitter utilisent name=. Mélanger ces attributs fait ignorer certaines analyses.

Les balises Open Graph prennent cinq minutes à ajouter et semblent embarrassantes lorsqu'elles sont absentes. Corrigez-les une fois, vérifiez avec le Vérificateur Open Graph, puis passez à autre chose.

Vous aimerez peut-être aussi

Signatures des webhooks : <span class="heading-styled"> Vérifier les charges et arrêter les demandes falsifiées</span>

Nouveau

Signatures des webhooks : Vérifier les charges et arrêter les demandes falsifiées

En savoir plus "

Mis à jour le 6 juin 2026

Nouveau

Pourquoi P@ssword1 n'est pas vraiment sécurisé

En savoir plus "

Mis à jour le 6 juin 2026

Nouveau

TOML vs YAML vs JSON — Formats de configuration classés selon la quantité de frustration qu'ils vous causent

En savoir plus "

Mis à jour le 5 juin 2026

Schémas GraphQL : <span class="heading-styled"> Écrire, Formater et Comprendre SDL sans code répétitif</span>

Nouveau

Schémas GraphQL : Écrire, Formater et Comprendre SDL sans code répétitif

En savoir plus "

Mis à jour le 5 juin 2026

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

Sur

恵 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 ?