Image Open Graph

Une image Open Graph est l'image d'aperçu que les réseaux sociaux, les applications de messagerie et les outils de collaboration affichent lorsqu'un lien est partagé. La page la déclare avec la balise meta og:image du protocole Open Graph, que Facebook a présenté en 2010.

La valeur de la balise est une URL absolue vers l'image. Des balises facultatives indiquent la largeur, la hauteur, le type MIME et le texte alternatif : og:image:width, og:image:height, og:image:type et og:image:alt. X, anciennement Twitter, lit ses propres balises twitter:image et utilise les balises Open Graph lorsqu'elles sont absentes.

Les services récupèrent et mettent en cache l'image au premier partage du lien, si bien qu'une modification peut ne pas apparaître avant le rafraîchissement du cache.

Pourquoi les images OG comptent

Un lien accompagné d'une image d'aperçu claire occupe plus de place dans un fil ou une conversation qu'une URL nue, et montre au lecteur le sujet de la page avant le clic. Sans og:image, les services choisissent une image dans la page, ou n'affichent aucune image.

Spécifications des images OG

Propriété	Pratique courante
Taille	1200×630 pixels
Ratio d'aspect	Environ 1,91:1
Format	PNG ou JPG
URL	Absolue, accessible publiquement en HTTPS
Texte	Tenu à l'écart des bords, que certains services recadrent

Chaque plateforme publie ses propres recommandations et les modifie dans le temps. Consultez la documentation actuelle des plateformes qui comptent pour vous.

Créer des images OG efficaces

1. Partez d'un canevas de 1200×630 pixels.
2. Ajoutez un titre court en gros caractères et une capture d'écran du produit ou un visuel clair.
3. Gardez le contenu important dans la zone centrale.
4. Exportez en PNG pour les visuels riches en texte, ou en JPG pour les photos, et gardez le fichier léger.
5. Testez le lien dans l'aperçu ou l'outil de débogage de chaque plateforme.

Dans un flux de publication réel

Les équipes génèrent souvent des images OG à partir d'un modèle pour chaque article de blog ou page de documentation. Une capture d'écran du produit placée dans le modèle montre l'interface réelle. Capturez-la à une taille supérieure à l'emplacement, puis réduisez-la pour garder un texte net.

Erreurs courantes

• Utiliser une URL relative dans og:image.
• Placer du texte près des bords, là où certaines plateformes recadrent.
• Oublier le cache après la mise à jour de l'image.
• Utiliser une capture haute qui est recadrée en une bande illisible.

Une image à corriger tout de suite ?

Créez un aperçu de 1200×630 à partir d'une capture d'écran avec Social Image Composer, puis vérifiez le ratio avec Aspect Ratio Calculator.

Questions fréquentes

L'image OG est-elle la même chose que le favicon ?

Non. Le favicon est une petite icône du site. L'image OG est un grand aperçu pour les liens partagés.

Puis-je utiliser le SVG pour og:image ?

De nombreux services n'affichent pas les aperçus SVG. Utilisez le PNG ou le JPG.

Sources

• The Open Graph protocol

Ressources associées

• Favicon : la petite icône affichée dans les onglets du navigateur.
• Image Compressor : garder le fichier d'aperçu léger.