Comment utiliser : Générateur d’images OG
- Choisissez un modèle : « Gradient », « Split », « Minimal », « Spotlight » ou « Card ». Chacun propose des couleurs assorties que vous pouvez modifier.
- Saisissez votre titre et votre sous-titre. La taille de la police du titre s'ajuste automatiquement et le texte s'adapte à l'espace disponible pour tenir toujours dans la ligne.
- Ajoutez le nom de votre marque, un emoji, un logo ou une photo d'arrière-plan (avec un assombrissement réglable pour garantir la lisibilité du texte).
- Téléchargez le fichier PNG (ou un fichier JPEG plus léger pour les photos) et mettez-le en ligne sur votre site.
- Saisissez les URL de la page et de l'image, puis copiez les balises méta « og: » et « twitter: » générées dans le code source de votre page
<head>.
Qu'est-ce qu'une image OG ?
Une image OG (Open Graph) est l’image qui s’affiche lorsqu’un lien est partagé sur Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage et de nombreuses autres applications. Elle est définie à l’aide de la og:image balise méta issue du protocole Open Graph, créé à l’origine par Facebook et désormais pris en charge par la quasi-totalité des plateformes qui affichent des aperçus de liens. X prend également en charge twitter:card — définie sur summary_large_image elle affiche l’image en pleine largeur. Un aperçu clair et à l’image de votre marque permet à un lien partagé de se démarquer dans un fil d’actualité très chargé et indique aux utilisateurs ce qu’ils vont découvrir avant même de cliquer.
La bonne taille : 1 200 × 630
1 200 × 630 pixels (un rapport d’aspect de 1,91:1) est la taille recommandée par Facebook ; elle s’affiche avec netteté sur toutes les plateformes. La grande carte de résumé de X utilise un cadre au rapport 2:1 ; ainsi, quelques pixels en haut et en bas peuvent être rognés — ce générateur maintient le texte bien à l’intérieur d’une marge de sécurité. Veillez à ce que le fichier ne dépasse pas 5 Mo (limite imposée par X ; Facebook autorise 8 Mo) ; un fichier PNG généré par cet outil pèse généralement quelques centaines de Ko, et un fichier JPEG est plus léger pour les arrière-plans photo.
Les balises Meta dont vous avez besoin
<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">L’ og:image URL doit être absolue (y compris https://) et accessible au public — elle ne doit pas être protégée par un identifiant, bloquée par le fichier robots.txt ou hébergée sur localhost. La déclaration de la largeur et de la hauteur permet à Facebook d’afficher l’aperçu dès le tout premier partage, sans attendre que l’image soit chargée. Créez le reste de vos balises d’en-tête à l’aide du générateur de balises Meta et vérifiez le résultat en direct avec l’Open Graph Checker.
Conseils de conception pour les aperçus de liens
- Un texte court et en gros caractères. Les aperçus s’affichent souvent sur une largeur d’environ 500 px, voire moins, sur les téléphones. Privilégiez un titre de 4 à 10 mots ; la fonction d’ajustement automatique vous avertit lorsqu’elle doit tronquer le texte.
- Ne reprenez pas la barre d’URL. Les plateformes affichent déjà votre domaine et le titre de la page sous l’image ; utilisez donc l’image pour attirer l’attention, et non le titre complet accompagné de la description.
- Contraste élevé. Utilisez le curseur de fonçage sur les photos afin que le texte blanc reste lisible, et testez vos prévisualisations avec des thèmes d’application clairs et foncés.
- Une image par page. Les images OG uniques pour les pages importantes — articles de blog, fiches produits, documents — attirent nettement plus l’attention qu’un simple logo commun à l’ensemble du site.
- Actualisation du cache. Les plateformes mettent les aperçus en cache. Après avoir modifié une image, réanalysez l’URL dans le « Sharing Debugger » de Facebook ou le « Post Inspector » de LinkedIn, ou renommez le fichier.
Dans Webflow, définissez l’image par page dans Paramètres de la page → Paramètres Open Graph, ou associez-la à un champ d’image pour les pages de collection du CMS.
Aussi recherché comme : image og, image open graph, image à partager sur les réseaux sociaux, image de la carte twitter, image d’aperçu du lien, 1 200 × 630, aperçu des réseaux sociaux, og:image.
Outils complémentaires : Générateur d’images OG
- Code to Image — Paste a snippet and get a polished code screenshot in seconds: syntax highlighting for JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go and PHP, a choice of themes, a window frame with a file name, a gradient or transparent background, padding and line numbers.
- SERP Preview — Write a title tag and meta description and see exactly where Google is likely to cut them off — measured in pixels, not just characters, on desktop and mobile.
- Outil de redimensionnement d’images — Redimensionnez une photo selon des dimensions précises en pixels ou un pourcentage, recadrez-la pour l'adapter au format des réseaux sociaux, ou insérez-la dans un cadre avec une couleur d'arrière-plan — le tout directement dans votre navigateur.
- Compresseur d’images — Réduisez la taille de vos photos et de vos graphiques de 50 à 90 % sans perte de qualité visible.
Questions fréquentes
Quelle doit être la taille d’une image Open Graph ?
Dois-je utiliser le format PNG ou JPEG pour mon image OG ?
Pourquoi Facebook ou LinkedIn affiche-t-il toujours mon ancienne photo ?
Dois-je utiliser des balises Twitter (X) distinctes ?
twitter:card être configuré pour summary_large_image pour afficher la grande image. L'extrait de code inclut les deux configurations par mesure de sécurité.