2026-03-28

Checklist : Taille d'image et prévisualisation pour les cartes Twitter

Choisissez la taille d'image Twitter card, métadonnées, export WebP et vérifications de dépannage pour que les liens partagés s'affichent parfaitement sur X et autres réseaux sociaux.

Checklist : Taille d'image et prévisualisation pour les cartes Twitter

Mis à jour le: June 28, 2026

Une image de carte Twitter est l'image de prévisualisation qui apparaît lorsqu'une personne partage une URL sur X. Elle doit être suffisamment grande pour paraître nette, assez petite pour que les crawlers puissent la récupérer rapidement, et déclarée avec des métadonnées qui fonctionnent même si une plateforme revient aux balises Open Graph.

Ce guide vous fournit une liste de contrôle pratique avant publication : dimensions, balises, format de fichier, vérifications CDN et corrections pour les cartes qui refusent de se mettre à jour.

Réponse rapide : quelle image de carte Twitter utiliser ?

Utilisez un WebP ou JPEG de 1200 par 630 pixels pour la plupart des liens partagés, surtout lorsque vous souhaitez une grande carte d'image. Gardez le sujet principal éloigné des bords, rendez le texte lisible en taille miniature et utilisez une URL HTTPS absolue à la fois dans twitter:image et og:image.

Pour X, définissez twitter:card sur summary_large_image lorsque l'image est l'élément principal. Maintenez le fichier confortablement en dessous des limites documentées pour les images de carte et vérifiez que l'URL CDN finale renvoie un HTTP 200 avant la publication.

La configuration fiable est simple :

  • Exportez une image de 1200 par 630 pixels pour la prévisualisation.
  • Utilisez une URL CDN finale, pas un chemin relatif.
  • Ajoutez twitter:title, twitter:description et twitter:image.
  • Ajoutez les correspondances og:title, og:description et og:image comme mécanisme de repli (fallback).
  • Testez l'URL en direct après le déploiement, puis actualisez les caches des plateformes si l'ancienne image apparaît toujours.

Qu'est-ce qu'une image de carte Twitter ?

Une image de carte Twitter est l'URL d'image déclarée dans les métadonnées de la page afin que X puisse créer une prévisualisation riche. Ce n'est pas la même chose que la première image de votre article. Un crawler lit le <head> du HTML, trouve les balises de carte, récupère l'image et stocke une prévisualisation mise en cache pour l'URL partagée.

Les exemples de balisage de cartes d'X décrivent toujours les types de cartes summary et summary_large_image dans leur documentation développeur et leurs exemples. La différence pratique est la taille de la prévisualisation : summary_large_image donne à l'image suffisamment d'espace pour porter un lien vers un blog, un produit, un outil ou une campagne.

Open Graph est important car de nombreuses plateformes sociales, applications de chat et systèmes de prévisualisation de liens lisent og:image. Le protocole Open Graph définit og:title, og:type, og:image et og:url comme métadonnées de base. Utilisez à la fois les balises Twitter/X et les balises Open Graph afin qu'un analyseur manquant ne casse pas toutes les prévisualisations.

Champ de métadonnées À quoi l'utiliser Note pratique
twitter:card Choisit la mise en page résumé ou grande image Utilisez summary_large_image pour la plupart des partages d'articles et de pages de destination
twitter:image Image de prévisualisation X principale Utilisez une URL d'image HTTPS absolue
og:image Image de prévisualisation de repli pour les applications sociales et de messagerie Généralement, faites correspondre twitter:image sauf si une plateforme nécessite un recadrage différent
og:url URL canonique pour la page partagée Faites correspondre l'URL de page canonique publique
Balises title et description Contexte du navigateur et de recherche Maintenez-les cohérents avec les métadonnées sociales

Pour un travail lié aux métadonnées d'image, associez ceci au guide Image Optimization for SEO et à la Complete Image Optimization Checklist.

Quelle taille doit avoir une image de carte Twitter ?

Commencez par 1200 par 630 pixels. Cela correspond au recadrage social courant de 1.91:1, donne aux plateformes suffisamment de pixels pour redimensionner proprement et fonctionne bien lorsque la même image est réutilisée comme og:image.

Évitez de concevoir une carte qui ne fonctionne qu'à pleine taille. Les flux recadrent, redimensionnent et placent du texte autour de l'image. Les petites étiquettes, les captures d'écran UI minces et les arrière-plans chargés ont souvent l'air bien dans un outil de conception, mais deviennent illisibles dans une carte de partage réelle.

Graphique montrant une image de carte Twitter de 1200 par 630 pixels avec WebP, la taille du fichier, HTTPS et des notes de conception sécurisées

Cas d'utilisation Image recommandée Pourquoi cela fonctionne À surveiller
Article de blog ou guide 1200 x 630 WebP Recadrage de prévisualisation large, compatibilité plateformes étendue Texte de titre trop petit
Lancement de produit 1200 x 630 WebP ou JPEG Le produit reste visible après redimensionnement Recadrage du bord du produit
Page d'outil Graphique basé sur une capture d'écran de 1200 x 630 pixels Montre ce que fait l'outil avant le clic Texte UI trop petit pour être lu
Page avec logo uniquement 1200 x 630 avec un rembourrage généreux Empêche au logo de paraître encombré Prévisualisation qui semble vide
Campagne adaptée aux carrés Variante séparée de 1200 x 1200 si nécessaire Utile pour les plateformes avec des recadrages carrés Ne pas la réutiliser aveuglément comme carte X

Utilisez l'article Best Image Resizer for Social Media lorsque vous avez besoin de plusieurs recadrages pour différentes plateformes, et utilisez Facebook Ad Image Sizes lorsque le même visuel alimente également les publicités sociales payantes.

Comment écrire les métadonnées ?

Placez les balises dans du HTML rendu côté serveur, à l'intérieur de la <head> de la page. Ne comptez pas sur JavaScript côté client pour injecter des balises sociales après le chargement. Les crawlers de prévisualisation de liens peuvent ne pas exécuter votre application de la même manière qu'un navigateur.

Diagramme de métadonnées en trois lignes montrant les balises twitter card, twitter image et open graph image pour les prévisualisations sociales

Utilisez ce modèle pour un article ou une page d'outil normale :

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Gardez ces vérifications dans la revue de code :

  1. L'URL de l'image est absolue et commence par https://.
  2. L'URL de l'image est l'URL CDN finale, pas un chemin de construction local.
  3. Le titre de la page et le titre social décrivent la même page.
  4. La description sociale est assez courte pour être parcourue dans une prévisualisation.
  5. L'URL canonique et og:url pointent vers la même page publique.
  6. L'image de carte n'est pas bloquée par robots.txt, l'authentification ou les règles hotlink.
  7. La réponse du serveur inclut un type de contenu d'image correct.

Les conseils SEO d'image de Google recommandent également un contexte d'image descriptif, des URL d'images crawlables et des formats pris en charge dans Google Images best practices. Ce conseil n'est pas spécifique à Twitter, mais il s'agit de la même discipline de publication : rendre l'image importante facile à découvrir, récupérer et comprendre pour les crawlers.

Faut-il utiliser WebP, JPEG ou PNG pour une image de carte Twitter ?

Utilisez WebP lorsque votre plateforme et vos cibles de prévisualisation le prennent en charge, surtout pour les graphiques d'articles, les aperçus de produits et les captures d'écran avec des couleurs mélangées. Utilisez JPEG pour une large compatibilité ou les cartes riches en photos. N'utilisez PNG que si la transparence ou les bords sans perte sont suffisamment importants pour justifier le fichier plus volumineux.

Le guide des types de fichiers image de MDN explique que WebP prend en charge à la fois la compression avec pertes et sans pertes. Cette flexibilité est utile pour les cartes sociales car une seule image peut contenir de la texture photo, une couleur de marque plate et du texte.

Pour cet article, j'ai encodé et testé quatre graphiques WebP de 1200 par 630 pixels localement avec ImageMagick et vérifié les tailles de sortie avant la publication. Ils se sont situés entre 14 KB et 28 KB car ce sont des graphiques propres avec une texture limitée. Les vraies photos de produits et les captures d'écran détaillées seront généralement plus volumineuses.

Format Bon usage Risque typique Point de départ pratique
WebP La plupart des graphiques de prévisualisation sociale et cartes images mélangées Certains outils plus anciens peuvent ne pas prévisualiser les brouillons locaux Exporter un WebP avec pertes autour d'une qualité 80-85
JPEG Aperçus riches en photos et besoins de compatibilité conservateurs Pas de transparence, possible halo autour du texte Exporter autour d'une qualité 82-88
PNG Logos, transparence, graphiques plats nets Grande taille de fichier Utiliser uniquement lorsque le sans perte est nécessaire
AVIF Images modernes très petites L'écosystème de prévisualisation peut être moins prévisible Tester attentivement avant d'utiliser comme seule image de carte

Si l'image de carte est également une bannière (hero) de page, suivez le guide Image Compression Ratio pour que la prévisualisation soit nette sans alourdir la page. Si vous comparez des formats modernes, lisez AVIF vs WebP Comparison.

Comment rendre l'image lisible dans le flux ?

Concevez la carte pour le plus petit endroit où elle sera vue, pas pour la planche de dessin de votre éditeur. Une prévisualisation de flux peut être plus étroite que l'originale, et l'interface utilisateur environnante entre en compétition pour l'attention.

Utilisez ces règles de conception :

  • Placez le sujet principal ou le titre au centre sécurisé.
  • Laissez un rembourrage autour des visages, produits, logos et textes.
  • Utilisez un message court unique, pas un titre d'article complet plus sous-titre plus badge.
  • Vérifiez l'image à 600 pixels de large avant de l'approuver.
  • Évitez les captures d'écran avec des étiquettes minuscules, sauf si l'UI elle-même est l'histoire.
  • Maintenez un contraste suffisamment élevé pour un coup d'œil rapide.
  • N'utilisez pas une image de stock générique lorsque la page concerne un outil, un produit ou un flux de travail technique.

Une bonne image de carte doit répondre à la question "de quoi parle ce lien ?" avant que le lecteur ne lise le titre. Pour un article de blog, il peut s'agir d'un simple diagramme. Pour un guide e-commerce, cela peut être un exemple photo de produit. Pour un convertisseur ou redimensionneur, cela peut être une capture d'écran d'outil recadrée.

Pourquoi mon image de carte Twitter n'apparaît-elle pas ?

La plupart des images de cartes cassées proviennent de l'une des quatre causes : le crawler ne peut pas récupérer l'URL, les métadonnées pointent vers la mauvaise image, la plateforme a mis en cache une ancienne version, ou l'image est techniquement valide mais un mauvais candidat pour la prévisualisation.

Graphique de dépannage montrant les URL d'images relatives, les blocages par crawler, les cartes mises en cache périmées et les fichiers surdimensionnés

Exécutez cette séquence avant de modifier le visuel :

  1. Ouvrez la source finale de la page et confirmez que la balise twitter:image existe.
  2. Copiez l'URL d'image exacte à partir du HTML rendu.
  3. Exécutez curl -I contre l'URL d'image et confirmez un HTTP 200.
  4. Confirmez que le type de contenu de la réponse est un type d'image.
  5. Vérifiez que l'URL de l'image n'est pas redirigée par un mur d'authentification.
  6. Assurez-vous que le fichier image n'est pas énorme.
  7. Confirmez que robots.txt ne bloque ni l'image ni la page.
  8. Changez le nom du fichier image lorsque vous devez forcer un cache frais.
  9. Retester la page déployée, et non une URL de prévisualisation locale.
  10. Vérifiez les balises Open Graph si la carte fonctionne dans une application mais pas dans une autre.
Symptôme Cause probable Correction
Aucune image n'apparaît twitter:image manquant ou relatif Utiliser une URL CDN HTTPS complète
Ancienne image apparaît Prévisualisation mise en cache Publier un nouveau nom de fichier et actualiser l'URL partagée
L'image apparaît mal recadrée Composition non sécurisée Réexporter avec plus de rembourrage et un sujet central
Le titre de prévisualisation est faux Désaccord des métadonnées Aligner twitter:title, og:title et le titre de la page
Fonctionne localement mais pas en direct Chemin local, authentification ou CDN bloqué Tester l'URL de production avec curl -I

Le Crop Image Online Guide est utile lorsque le sujet nécessite un recadrage plus sûr, et Image Aspect Ratio Changer couvre le changement de visuel de carré ou portrait vers un cadre de prévisualisation social.

Liste de contrôle avant publication

Avant de publier une page qui dépend du partage social, révisez l'image et les métadonnées ensemble. Un fichier WebP parfait échouera toujours si la balise pointe vers l'URL d'hier. Des métadonnées parfaites seront tout de même décevantes si l'image est illisible dans un flux.

Utilisez cette liste de contrôle finale :

  • Le frontmatter ou l'image CMS est la même image utilisée pour les métadonnées sociales.
  • L'image est unique à la page ou clairement pertinente pour la page.
  • L'URL de l'image est HTTPS et publique.
  • L'extension de fichier correspond au format de réponse réel.
  • L'image renvoie un HTTP 200 depuis le CDN.
  • Le titre et la description ne sont pas bourrés de mots-clés.
  • L'image de prévisualisation a un texte alternatif descriptif là où elle apparaît dans le corps de l'article.
  • L'image est vérifiée visuellement aux tailles de prévisualisation bureau et mobile.
  • La page possède une URL canonique stable.
  • La carte est retestée après le déploiement.

Une bonne image de carte Twitter est un petit système de publication : un visuel clair, des métadonnées stables, une URL CDN rapide et une vérification finale de récupération. Une fois ces éléments en place, la prévisualisation a beaucoup moins de chances de tomber en panne lors d'un lancement ou d'une actualisation de contenu.

Utilisez nos outils gratuits en suivant le guide.

Compresser une imageSupprimer un arrière-plan

Continuer la lecture