Les images Open Graph pour le site de votre app

Mis à jour le 30 octobre 2026

Une image Open Graph est l’image qui s’affiche quand quelqu’un partage un lien vers votre site sur X, LinkedIn, Facebook, Slack, iMessage et la plupart des autres apps. Faites-la en 1200 × 630 pixels (1.91:1), déclarez-la avec la balise og:image, ajoutez twitter:card réglé sur summary_large_image pour que X l’affiche en grand, éloignez le texte des bords, et testez-la avant de partager le lien.

Ce qu’est une image Open Graph

Open Graph est un ensemble de balises meta, lancé par Facebook, qui indique aux autres apps comment afficher un lien vers votre page : son titre, sa description, son URL et son image. Quand vous collez un lien dans un post ou une conversation, l’app récupère la page, lit ces balises et construit une carte d’aperçu.

Sans balise d’image, l’app devine. Elle peut prendre votre logo, une image au hasard de la page, ou rien du tout. Pour le site d’une app, cette carte est souvent la première chose que l’on voit de votre produit : mieux vaut la maîtriser.

La taille : 1200 × 630

Le protocole Open Graph lui-même ne fixe pas de taille en pixels. En pratique, le 1200 × 630, soit un ratio de 1.91:1, s’affiche en carte pleine largeur sur presque toutes les plateformes, et le 1200 × 627 de LinkedIn en est assez proche pour que la même image y fonctionne. Utilisez cette taille, et exportez en JPEG ou en PNG de quelques mégaoctets au plus, pour qu’elle se charge vite quand l’app la récupère.

Gardez une zone sûre

Chaque app rogne l’image un peu différemment, et certaines l’affichent plus petite, en vignette. Pour qu’elle reste lisible partout :

Gardez le texte et l’appareil à au moins 60 à 80 pixels de chaque bord.
Placez l’essentiel dans les deux tiers centraux.
Utilisez de grands caractères : un titre de cinq mots au plus, d’au moins 60 pixels de haut.
Ne répétez pas le titre de la page dans l’image. La carte l’affiche déjà en dessous.

Les balises à ajouter

Placez-les dans le <head> de chaque page. Le protocole Open Graph indique og:title, og:type, og:image et og:url comme obligatoires, et demande og:image:alt dès que vous définissez une image.

Balise	Exemple de valeur
`og:title`	VotreApp – Suivez vos habitudes
`og:description`	Une phrase sur ce que fait l’app.
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg (une URL complète, pas un chemin relatif)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	L’écran d’accueil de l’app sur un iPhone, sur fond bleu.
`twitter:card`	summary_large_image

En HTML, cela donne :

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

X lit les balises Open Graph pour le titre, la description et l’image quand ses propres versions twitter: sont absentes : twitter:card est donc généralement la seule balise propre à X dont vous avez besoin. Sans elle, X peut afficher une petite carte, ou aucune.

Une image par page

Votre page d’accueil reçoit l’image principale. Les autres pages peuvent avoir la leur :

Pages de fonctionnalités : l’écran de cette fonctionnalité, encadré.
Articles de blog et guides : le titre de l’article sur votre fond de marque, ou la capture dont parle l’article.
Journal des modifications ou notes de version : le nouvel écran de cette version.

Une image propre à la page donne à un lien partagé l’air d’avoir été fait pour cette conversation, et elle attire plus de clics que la même carte avec logo sur toutes les pages.

Testez l’aperçu

Les apps mettent les aperçus en cache, parfois pendant des jours : testez avant de diffuser un lien largement.

Ouvrez l’URL de l’image dans un navigateur. Si elle ne se charge pas publiquement, aucune app ne l’affichera.
Le débogueur de partage de Facebook montre ce que Facebook lit sur votre page, et son bouton Scrape Again actualise un aperçu en cache.
Le Post Inspector de LinkedIn fait de même pour LinkedIn.
X : collez le lien dans un nouveau post sans l’envoyer. L’éditeur affiche la carte que X utilisera.
Messages et Slack : envoyez-vous le lien.

Si une ancienne image s’affiche toujours, changez le nom du fichier image (par exemple og-2.jpg) et mettez à jour la balise. Une nouvelle URL contourne la plupart des caches.

Les erreurs courantes

Un chemin d’image relatif. /og.jpg fonctionne dans un navigateur mais pas dans une carte d’aperçu. Utilisez l’URL complète avec https://.
Une image bloquée pour les robots. Si votre robots.txt ou une page de connexion bloque l’image, les apps ne peuvent pas la récupérer.
Du texte trop petit. Dans une conversation, la carte peut s’afficher au tiers de sa taille. Tout ce qui fait moins d’environ 40 pixels de haut dans l’original devient illisible.
Une capture de téléphone haute, seule. Recadrée en 1.91:1, une capture de téléphone montre une tranche de barre d’état et pas grand-chose d’autre. Placez-la plutôt sur une toile large.

En créer une avec un appareil encadré

Pour une app, la meilleure image Open Graph est généralement l’app elle-même : votre meilleur écran dans un cadre d’appareil, sur la couleur de votre marque, avec un titre court. Comme le 1.91:1 est large, un seul téléphone au centre laisse beaucoup d’espace. Mettez-y un titre à côté du téléphone, ou montrez deux ou trois écrans en ligne.

FeatureFrame propose une toile prédéfinie en 1.91:1. Sur Mac :

Déposez votre capture. FeatureFrame reconnaît l’iPhone ou l’iPad à sa taille et l’encadre dans un modèle 3D de cet appareil.
Choisissez la toile 1.91:1, et une couleur unie, un dégradé ou votre propre image comme arrière-plan.
Inclinez un peu l’appareil, ou ajoutez jusqu’à trois captures avec la disposition Ligne.
Exportez en 720p au format JPEG. Une toile 1.91:1 sort en 1376 × 720, la même forme que 1200 × 630 et un peu plus nette. Utilisez-la telle quelle, ou redimensionnez-la à la taille exacte.

Gardez le titre pour un outil de design ou le modèle de votre site si vous en voulez un ; c’est l’appareil encadré qui est difficile à faire à la main.

Utilisez la même image comme visuel principal de vos posts de lancement : voir la checklist des images de lancement. Pour les autres tailles dont vous aurez besoin, voyez les tailles d’image pour partager des captures d’app, et pour des cadres d’appareils seuls, la bibliothèque de cadres d’appareils.