Mode d’emploi
- Saisissez le og:title et le og:description que vous utilisez ou prévoyez d’utiliser sur la page.
- Collez l’URL complète de og:image. L’outil charge l’image et indique ses dimensions réelles en pixels.
- Ajoutez l’URL ou le domaine de la page, puis comparez les aperçus des grandes et petites cartes et corrigez les avertissements.
Fonctionnement
Lorsqu’une personne partage un lien, la plupart des réseaux sociaux et des applications de messagerie récupèrent la page et lisent ses balises Open Graph : og:title, og:description, og:image et og:url. Ils créent ensuite une carte. Une image au format paysage, d’environ 1,91:1, donne généralement une grande carte avec l’image en haut ; une image petite ou carrée donne souvent une carte compacte avec une vignette à côté du texte.
Cet outil affiche deux styles de cartes génériques pour vous aider à évaluer la longueur du texte et le cadrage de l’image. Il vérifie les dimensions naturelles de l’image une fois qu’elle est chargée dans le navigateur : en dessous de 200 × 200 px, de nombreuses applications ignorent l’image ; en dessous de 600 × 315 px, elles utilisent plutôt la mise en page compacte ; et un rapport largeur/hauteur très éloigné de 1,91:1 entraîne un recadrage. Le format 1200 × 630 px est largement recommandé, car l’image reste nette sur les écrans à haute densité.
L’aperçu ne peut pas montrer exactement ce qu’une application donnée affichera. Les applications diffèrent par le nombre de lignes de titre et de description qu’elles affichent ; certaines ignorent la description, et la plupart mettent l’aperçu en cache pendant un certain temps après le premier partage. Les modifications de vos balises peuvent donc ne pas apparaître tout de suite. De nombreuses plateformes proposent leur propre outil de débogage pour actualiser ce cache.
Exemples
Une capture d’écran utilisée comme og:image
Une capture d’écran de 1440 × 900 a un rapport de 1,6:1. L’outil signale ce rapport : dans une grande carte, le haut et le bas seraient recadrés. Exporter une version en 1200 × 630 évite les mauvaises surprises.
Un logo comme seule image
Un logo de 180 × 180 est en dessous de 200 × 200 px ; de nombreuses applications n’afficheraient donc aucune image. Utilisez plutôt une bannière plus grande et au format paysage, qui inclut le logo.
Vérifier la longueur du titre
Un og:title de 90 caractères passe sur trois lignes dans l’aperçu de la grande carte. En le raccourcissant à environ 60 caractères, la carte reste lisible dans la plupart des applications.
Foire aux questions
Pourquoi mon lien s’affiche-t-il différemment sur Facebook, LinkedIn et X ?
Chaque plateforme affiche les cartes selon sa propre mise en page, son propre recadrage et ses propres limites de texte. Certaines affichent la description, d’autres non. Cet aperçu est une approximation générique, et non une reproduction du design d’une plateforme.
J’ai modifié og:image, mais l’ancienne image s’affiche encore. Pourquoi ?
Les plateformes mettent les aperçus de liens en cache. Utilisez l’outil de débogage de partage de la plateforme pour récupérer à nouveau la page, ou attendez l’expiration du cache. Modifier le nom du fichier image peut aussi aider.
Puis-je utiliser une image SVG ou WebP ?
La plupart des plateformes ne prennent pas en charge SVG. WebP fonctionne dans de nombreuses applications, mais pas toutes ; JPG ou PNG reste le choix le plus sûr.
Pourquoi l’outil ne peut-il pas charger mon image ?
L’URL peut nécessiter une connexion, renvoyer vers une page HTML plutôt que vers une image, ou le serveur peut bloquer les requêtes provenant d’autres sites. Si le navigateur ne peut pas la charger ici, le robot d’exploration d’une plateforme sociale ne le pourra peut-être pas non plus.
Confidentialité
Le texte saisi reste dans votre navigateur. Pour vérifier l’image, votre navigateur la demande directement à l’URL saisie (sans envoyer de référent) ; le serveur reçoit donc une requête d’image normale. Rien n’est envoyé à TIG Tools.