Guide de prévisualisation sociale
Images Open Graph : testez le lien avant publication
Les images Open Graph déterminent l’apparence de votre page lors d’un partage de lien. Ce guide présente tailles, balises, vérifications, cache et checklist pour des prévisualisations efficaces.
Réponse rapide
Choisissez une image Open Graph et testez le lien avant partage
Pour la plupart des pages, commencez avec une image 1200 x 630, éloignez textes et logos des bords, utilisez des URLs HTTPS absolues, et testez l’URL finale avec les outils de débogage. Ce processus simple évite la plupart des prévisualisations cassées.
Rôle de la prévisualisation
Considérez l’image Open Graph comme un élément de la page
Une image Open Graph n’est pas une décoration. C’est l’image qui représente la page lorsque les crawlers créent une carte de lien pour les réseaux sociaux, applications de chat et outils professionnels. Elle doit correspondre au titre, à la description, au sujet visible de la page et à l’image des données structurées.
Elle incite au clic
L’image, le titre et la description forment la première impression avant que le visiteur n’atteigne votre page.
Elle doit correspondre au contenu
Une bonne image de prévisualisation correspond au titre de la page, au sujet visible et à la promesse principale pour l’utilisateur, plutôt qu’à un visuel générique de la marque.
Elle fait partie des données SEO
Les images Open Graph, Twitter cards, URLs canoniques et JSON-LD doivent décrire la même page.
Elle nécessite une règle de nommage
Un nom de fichier clair et une règle de mise à jour évitent que des caches obsolètes et d’anciennes images de campagne réapparaissent.
Plan de taille
Choisissez des dimensions adaptées aux prévisualisations réelles
Les plateformes recadrent et mettent en cache les prévisualisations différemment. Un fichier 1200 x 630 est un bon choix par défaut, mais il est plus sûr de concevoir avec une zone centrale protégée et de tester l’URL finale sur les plateformes clés.
| Plateforme ou usage | Plan d’image pratique | Surveillez | Vérification avant publication |
|---|---|---|---|
| Open Graph général | Utilisez 1200 x 630 comme taille par défaut pratique pour une grande image de partage. | Les petites images peuvent paraître floues ou s’afficher en miniatures plus petites. | Prévisualisez l’URL finale dans l’outil de débogage de la plateforme avant de partager. |
| Facebook et LinkedIn | Utilisez la même image au ratio 1,91:1 sauf si la page nécessite un élément spécifique à la plateforme. | Les bords peuvent être recadrés différemment selon les mises en page et appareils. | Gardez les textes importants et logos dans la zone centrale protégée. |
| Grande carte X | Utilisez summary_large_image et gardez le visuel centré ; X supporte une grande carte large. | Le texte minuscule et les détails en bordure peuvent disparaître lors du recadrage ou redimensionnement de la carte. | Définissez twitter:image et testez avec les outils de carte X. |
| Applications de chat et outils professionnels | Gardez le fichier léger et le design simple car les prévisualisations apparaissent souvent dans des cadres compacts. | Les captures d’écran chargées, titres longs et faible contraste deviennent vite illisibles. | Collez le lien final dans les outils utilisés par votre audience. |
Placez le message principal au centre de l’image. Les bords sont risqués car les cartes de flux, prévisualisations de chat et mises en page mobiles peuvent recadrer différemment.
HTML
Définissez les balises nécessaires aux crawlers avant la mise en ligne
Les balises Open Graph doivent être dans le head HTML. Utilisez des URLs d’image absolues, déclarez largeur et hauteur, ajoutez un alt utile, et maintenez l’URL canonique cohérente avec celle partagée.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Balise | Pourquoi c'est important | Erreur courante |
|---|---|---|
| og:image | Indique aux crawlers l’image qui doit représenter la page. | Utiliser un chemin relatif ou une image bloquée par login, redirections ou règles robots. |
| og:image:width / og:image:height | Indique aux plateformes la taille de l’image avant qu’elles ne la récupèrent et inspectent le fichier. | Omettre les dimensions et laisser chaque crawler deviner comment afficher la prévisualisation. |
| og:image:alt | Décrit l’image de prévisualisation pour l’accessibilité et fournit plus de contexte aux crawlers. | Répéter le titre de la page au lieu de décrire ce qui est visible dans l’image. |
| og:url | Relie la prévisualisation à l’URL canonique de la page à partager. | Utiliser une URL de tracking, staging ou avec une mauvaise culture comme identité permanente de la page. |
| twitter:card / twitter:image | Donne à X une instruction explicite pour une grande carte et une image spécifique à la plateforme en option. | Supposer que X affichera toujours l’image Open Graph exactement comme les autres plateformes. |
Si vous utilisez Blazor, le Composant métadonnées SEO Blazor regroupe les balises Open Graph, Twitter card, URLs canoniques et métadonnées JSON-LD.
Règles de conception
Concevez d’abord pour une petite carte de flux
La plupart ne verront pas l’image complète, mais une carte compressée dans un flux, message ou aperçu. Les mises en page simples gagnent : un sujet clair, un contraste lisible, pas de texte minuscule.
Processus
Un processus simple pour chaque page importante
- 1
Rédigez la promesse de prévisualisation
Décidez ce que la carte doit dire en un coup d’œil : sujet, avantage, produit ou angle de l’article.
- 2
Créez l’image au ratio prévu
Utilisez 1200 x 630 pour le fichier par défaut et gardez le contenu important centré.
- 3
Optimiser le fichier
Utilisez JPG ou PNG pour l’image sociale, gardez un fichier de taille raisonnable et évitez les artefacts de compression visibles.
- 4
Définir métadonnées et schéma
Mettez à jour ensemble les balises Open Graph, Twitter card, URL canonique et références d’image JSON-LD.
- 5
Publiez avec un nom de fichier stable
Utilisez un nom de fichier significatif et changez-le lors du remplacement si les caches des plateformes risquent de conserver l’ancienne version.
- 6
Testez l’URL finale
Passez l’URL publique de la page dans les outils de débogage et vérifiez la prévisualisation réelle, pas seulement le code source.
Info-bulle
Utilisez PixelPress après avoir défini la taille de la prévisualisation
Lorsque le plan d’image nomme les fichiers finaux, PixelPress peut aider à la conversion locale en WebP ou AVIF. Gardez les originaux intacts, vérifiez la sortie, puis mettez à jour l’URL Open Graph.
Débogage
Rafraîchissez les caches des plateformes avant de valider la prévisualisation
Les plateformes sociales mettent en cache les données de prévisualisation. Si vous remplacez une image en gardant la même URL, l’ancienne peut continuer à s’afficher. Utilisez les outils officiels et, si besoin, changez le nom de fichier ou ajoutez une URL versionnée.
Liste de contrôle
Checklist des images Open Graph avant publication
Utilisez cette liste avant la mise en ligne d’un article, page produit, outil ou landing page. Elle détecte les problèmes de prévisualisation coûteux à corriger après partage.
Questions fréquentes
Quelle taille doit avoir une image Open Graph ?
Utilisez 1200 x 630 comme valeur par défaut pratique pour la plupart des prévisualisations Open Graph. Cette taille est suffisante pour les écrans haute densité et proche du ratio 1,91:1 courant. Testez toujours l’URL finale car chaque plateforme peut recadrer ou mettre en cache différemment.
Puis-je utiliser la même image Open Graph pour chaque page ?
Vous pouvez, mais c’est généralement moins efficace. Une image générique de marque vaut mieux que pas d’image, mais les articles importants, pages produits et outils doivent avoir une image de prévisualisation spécifique à la page.
Pourquoi mon ancienne image Open Graph s’affiche-t-elle encore ?
La cause la plus fréquente est la mise en cache par la plateforme. Utilisez Facebook Sharing Debugger, LinkedIn Post Inspector ou les outils de carte X pour rafraîchir l’URL. Si l’ancien fichier revient, publiez la nouvelle image avec un nouveau nom ou une URL versionnée.
Quelle est la différence entre og:image et twitter:image ?
og:image est l’image Open Graph standard utilisée par de nombreuses plateformes. twitter:image est spécifique aux cartes X. Si vous fournissez twitter:image, X l’utilisera plutôt que og:image.
L’image JSON-LD doit-elle correspondre à l’image Open Graph ?
Elle n’a pas besoin d’être identique, mais doit raconter la même histoire de page. Métadonnées de recherche, balises Open Graph, Twitter cards et JSON-LD ne doivent pas pointer vers des images non liées ou obsolètes.
Où PixelPress s’intègre-t-il dans les images Open Graph ?
PixelPress intervient après avoir défini taille, nom et rôle de l’image. Il aide à convertir localement les fichiers finaux tout en conservant les originaux. La page nécessite toujours métadonnées correctes et tests de prévisualisation.