Image Open Graph : une taille pour toutes les plateformes

Une image de 1200 par 630 pixels, en PNG ou JPEG, sous environ 1 Mo, avec le contenu important dans les 1080 par 600 du milieu. Ce fichier respecte les specs publiées par Meta et LinkedIn, et c'est toute la réponse à la question de la taille d'image Open Graph pour presque tous les sites.

Les dimensions sont la partie facile. Ce n'est d'ailleurs généralement pas ce qui casse. Ce qui casse, c'est du texte trop près d'un bord qu'une plateforme rogne, une image qui ne se met jamais à jour parce qu'un crawler a mis l'ancienne en cache il y a des mois, ou une carte qui s'affiche sans aucune image parce que le fichier pesait 4 Mo sur une origine lente. La question de la taille d'image OG est en réalité trois questions, et une seule concerne les pixels. Ce guide couvre la spec, la zone de sécurité, le comportement de cache qui fait croire que les balises sont fausses, et la façon dont les aperçus se résolvent quand ce qu'on partage est un lien court. Si votre aperçu est totalement absent plutôt que mal rogné, aperçu de lien qui ne s'affiche pas est le guide de diagnostic.

La taille, et pourquoi celle-là

Le rapport 1,91:1 apparaît dans la documentation de Meta comme dans celle de LinkedIn. Le protocole Open Graph lui-même (consulté le 2026-10-25) ne fixe aucune taille ; ses exemples sont 400x300 et 300x300, et il demande og:image:alt dès que vous spécifiez une image. Un standard de fait s'est formé autour des chiffres des plateformes.

Les sources sont les recommandations d'image de Meta et la page d'aide LinkedIn sur les aperçus de lien. X documente ses cartes séparément, mais nous n'avons pas pu charger cette documentation : vérifiez-la avant de vous fier à une taille pour X.

La zone de sécurité dont personne ne parle

Une carte est rarement affichée au rapport dans lequel vous l'avez conçue. La page de LinkedIn indique que les images carrées et verticales peuvent être rognées, et tout ce qui fait moins de 401 px de large devient une petite vignette. La zone de 1080 par 600 ci-dessous est notre règle empirique, pas un chiffre de plateforme.

Gardez tout ce qui doit survivre dans les 1080 par 600 du milieu, centrés, et traitez la bande extérieure comme une décoration que vous pouvez vous permettre de perdre. En pratique : le titre se place centre-gauche plutôt que collé au bord, le logo vit dans la marge plutôt que dans le coin, et il n'y a pas de bordure fine, car une bordure est le seul élément de design qui paraît cassé à l'instant où il est rogné.

Le contraste compte aussi. Les cartes s'affichent sur fond clair dans certains clients et sombre dans d'autres : une image qui compte sur son environnement pour se détacher peut perdre ses contours.

Les balises autour de l'image

Quatre balises font le travail. Deux d'entre elles sont celles qu'on saute.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

Utilisez une URL absolue avec schéma et hôte, car un crawler lit la balise sans contexte de page. Meta indique que la largeur et la hauteur permettent à son crawler d'afficher l'image dès le premier partage sans la récupérer d'abord. Et og:image:alt est la balise d'accessibilité qui ne coûte rien et manque presque partout.

Pourquoi votre nouvelle image ne s'affiche pas

C'est celle qui génère des tickets de support. Vous avez corrigé l'image, vous voyez le nouveau fichier à son URL, et la carte montre toujours le design du trimestre dernier.

La documentation de Meta indique que son crawler met les images en cache par URL, et que modifier l'image ne met pas à jour les aperçus des partages existants. Trois issues, dans l'ordre où je les essaierais :

• Forcer une nouvelle exploration avec le Sharing Debugger de Facebook. LinkedIn a aussi un Post Inspector, mais la page d'aide que nous avons lue ne décrit pas son cache.
• Publier l'image sous un nouveau nom de fichier, ce qui donne une autre URL sans entrée de cache. Meta le recommande, et c'est la voie fiable.
• Changer l'URL partagée elle-même, ce qui est très simple quand ce que vous partagez est un lien court que vous contrôlez plutôt qu'une adresse de page permanente.

Avant de publier, le vérificateur Open Graph gratuit récupère une URL et montre le titre, la description, l'image, le nom du site et un aperçu de carte Twitter qu'il trouve. Il lit seulement les balises. Il ne signale pas les dimensions de l'image et ne vide le cache d'aucune plateforme.

Les aperçus quand vous partagez un lien court

Un lien court n'a pas de balises Open Graph propres et n'en a pas besoin. Le edge d'Elido répond aux crawlers par la redirection ordinaire, car les aperçus de lien des applis de chat doivent la suivre, et il ne compte pas ces récupérations comme des clics (le filtre de bots est une liste d'user-agents : certaines récupérations scriptées peuvent donc passer). La carte est construite à partir des balises de la destination. Si elle est fausse, corrigez la destination.

Deux choses dépendent bien de la couche de lien. Une redirection côté serveur est le choix sûr, une raison de plus de garder la chaîne courte. Et repointer un lien court change son aperçu, même si les plateformes qui ont mis l'ancienne carte en cache continuent de l'afficher.

Une lacune : Elido n'a pas de remplacement d'image ou de titre OG par lien, donc un lien court ne peut pas porter une carte différente de sa destination. Les pages microsite ont bien un champ d'image OG. Si vous avez besoin de cartes par lien, dites-le-nous ; c'est dans notre backlog.

Pour avoir le lien et les données de clics au même endroit, créez un espace de travail sur votre propre domaine et vérifiez la carte avant l'envoi.

Une checklist à garder

• 1200 par 630, PNG ou JPEG, URL HTTPS absolue, sous 1 Mo selon notre habitude. C'est toute la décision sur la taille d'image OG.
• Rien d'important hors des 1080 par 600 du milieu (notre règle empirique), pas de bordures fines.
• og:image:width, og:image:height et og:image:alt présents.
• twitter:card réglé sur summary_large_image si vous voulez la grande carte sur X.
• Nouvelle image, nouveau nom de fichier, puis nouvelle exploration avant d'annoncer quoi que ce soit.

Réussissez ces cinq points une fois, mettez-les en modèle dans l'en-tête de vos pages, et les images Open Graph cessent d'être un sujet. C'est la bonne quantité d'attention à leur accorder.

Lire la série cornerstone

Cet article fait partie du cluster tutoriels. Pour les aperçus qui échouent complètement plutôt que de mal rogner, aperçu de lien qui ne s'affiche pas donne la correction plateforme par plateforme, et comment créer un lien cliquable couvre la couche en dessous.

À lire aussi sur le blog

• Aperçu de lien qui ne s'affiche pas ? Causes et corrections
• Raccourcir un lien pour X (Twitter) : ce que t.co lui fait
• Comment suivre les liens des réseaux sociaux : clics par canal
• Qu'est-ce qu'un lien de marque, et pourquoi il convertit mieux
• Comment rediriger une URL : six façons, et quand choisir chacune
• Liens courts sur domaine personnalisé : DNS, TLS et edge