Générateur de Twitter Cards
Choisissez un type de carte, saisissez le titre, la description et l’image, voyez la carte telle qu’elle apparaît dans un post sur X, puis copiez les balises meta twitter: pour le head de votre page.
- 4 types de carte
- Aperçu clair et sombre
- Contrôle de l’image
- Dans votre navigateur
Carte
Le @ est ajouté pour vous.
Facultatif – la personne qui a rédigé la page.
L’aperçu d’un site ne peut pas charger d’images provenant d’autres sites : choisissez donc le fichier sur votre appareil. Il est seulement affiché ici et mesuré – il ne quitte jamais votre appareil.
Lue à voix haute par les lecteurs d’écran. Jusqu’à 420 caractères.
Sert à la ligne du domaine dans l’aperçu et à og:url. X n’a pas de balise propre pour cela.
Lecteur
Une page https:// qui ne contient que le lecteur et fonctionne dans une iframe.
Facultatif : adresse directe du fichier vidéo ou audio (MP4 ou AAC).
Application
Code à deux lettres tel que US ou DE – nécessaire uniquement si l’application n’est pas dans la boutique américaine.
Aperçu
L’aperçu reprend la mise en page actuelle de X : les grandes cartes affichent le titre sur l’image et le domaine en dessous, et la description n’est pas affichée. X garde une carte en cache pendant environ une semaine après le premier post.
Liste de contrôle
Code HTML
X lit og:title, og:description et og:image lorsque twitter:title, twitter:description et twitter:image sont absentes. Avec cette option, ces trois informations sont écrites une seule fois sous forme de balises Open Graph, que Facebook, LinkedIn et WhatsApp utilisent aussi. twitter:card n’a pas de repli et reste toujours présente.
Importer depuis un code HTML existant
Le code collé est uniquement lu comme du texte dans votre navigateur. Les scripts qu’il contient ne s’exécutent jamais, rien n’est chargé à partir de ce code et rien n’est envoyé où que ce soit. L’import remplace le contenu actuel du formulaire.
Comment créer une carte X (Twitter)
Le code et l’aperçu se mettent à jour pendant la saisie.
- 1
Choisissez le type de carte
Grande image pour les articles et les pages d’atterrissage, summary pour une petite image carrée, player pour la vidéo ou l’audio, app pour une application mobile.
- 2
Remplissez la carte
Saisissez le compte X du site, le titre, la description, l’URL de l’image et le texte alternatif. Choisissez le fichier image sur votre appareil pour le prévisualiser et le mesurer.
- 3
Vérifiez et copiez
Corrigez ce que la liste de contrôle signale, puis collez le code dans le <code><head></code> de votre page.
Des balises de carte que X lit vraiment
Les quatre types de carte, avec leurs champs et leurs contrôles.
Aperçu dans les deux thèmes
Affiche la carte en mode clair et en mode sombre. Les grandes cartes suivent la mise en page actuelle de X : le titre est posé sur l’image, le domaine en dessous.
Contrôle de l’image selon la carte
Mesure l’image que vous choisissez sur votre appareil et avertit si elle est trop petite, dépasse 4096 × 4096 px, pèse plus de 5 Mo ou sera rognée.
Carte player
Des champs pour la page du lecteur, sa largeur et sa hauteur, et une adresse de flux facultative, avec la vérification que chaque adresse est en https.
Carte app
Nom, identifiant et lien profond de l’application pour iPhone, iPad et Google Play, ainsi que le pays de la boutique. Le format des identifiants est vérifié.
Repli Open Graph
Une seule option écrit le titre, la description et l’image sous forme de balises Open Graph, que X lit aussi – un code plus court, utile également aux autres réseaux.
Import d’un HTML existant
Collez le code source d’une page pour charger ses balises de carte actuelles dans le formulaire. Le code collé est seulement lu comme du texte.
Confidentiel par conception
Tout fonctionne dans votre navigateur. Ce que vous saisissez, collez ou ouvrez n’est pas envoyé à un serveur.
Gratuit, sans inscription
Pas de compte, pas de limite, pas de filigrane – sur téléphone, tablette ou ordinateur.
Comment fonctionnent les cartes X (Twitter)
Une carte est l’aperçu que X joint à un post contenant un lien. X récupère la page et lit les balises meta twitter: de son head. La balise clé est twitter:card, qui sélectionne l’un des quatre types : summary, summary_large_image, player ou app. Les balises portent toujours l’ancien nom du réseau ; rien n’a changé dans le balisage quand Twitter est devenu X, et les pages existantes n’ont donc pas besoin d’être mises à jour.
X se rabat sur Open Graph. Si twitter:title, twitter:description ou twitter:image manque, il utilise og:title, og:description et og:image à la place. Une page déjà dotée de balises Open Graph n’a donc besoin que de twitter:card, qui n’a pas de repli, et idéalement de twitter:site avec le compte du site. Attention : les balises de carte utilisent l’attribut name, alors que les balises Open Graph utilisent property. Cet outil sait écrire les deux formes : toutes les balises twitter:, ou le repli Open Graph, plus court.
Erreurs fréquentes : une adresse d’image relative ou en http ; une image SVG, que les cartes n’affichent pas ; une image large sur une carte summary, qui est rognée en carré ; un titre de plus de 70 caractères, qui est tronqué ; et l’absence de texte alternatif pour l’image. Les cartes player exigent une page https qui fonctionne dans une iframe et doivent être approuvées par X avant d’apparaître. X met aussi une carte en cache pendant environ une semaine : les modifications ne sont donc pas visibles tout de suite.
Les quatre types de carte
| Type de carte | Ce qu’elle montre | Image |
|---|---|---|
| <code>summary_large_image</code> | Une image large portant le titre – pour les articles et les pages d’atterrissage | Environ 2:1, 1200 × 628 px recommandés, au moins 300 × 157 px |
| <code>summary</code> | Une petite image carrée à côté du titre et de la description | Carrée, au moins 144 × 144 px |
| <code>player</code> | Une vidéo ou un son lu directement dans le post | Une image d’aperçu, plus la largeur et la hauteur du lecteur |
| <code>app</code> | Une application mobile avec nom, description et lien vers la boutique | Reprise de la boutique d’applications |
Conseils
- Créez le jeu complet de balises de partage pour Facebook, LinkedIn et les messageries avec le Générateur Open Graph.
- Réalisez une image de carte de 1200 × 628 px avec le Générateur d’image OG, ou recadrez une image existante avec l’outil Redimensionner pour les réseaux sociaux.
- Balisez les liens que vous publiez pour retrouver les visites dans vos statistiques – le Générateur d’UTM construit l’URL de campagne.
- Pour voir la vraie carte, collez le lien dans l’éditeur de post de X. Si une ancienne carte apparaît, elle est encore dans le cache d’un post précédent.
Questions fréquentes
Vous ne trouvez pas votre réponse ? Contactez-nous — nous répondons rapidement.
Quelle taille pour l’image d’une Twitter Card ?
Pour la carte grande image, visez environ 2:1, idéalement 1200 × 628 pixels et au moins 300 × 157. La carte summary affiche un carré d’au moins 144 × 144 pixels. Les fichiers doivent peser moins de 5 Mo et être au format JPG, PNG, WebP ou GIF.
Faut-il des balises Twitter Card si j’ai déjà des balises Open Graph ?
Une seule : twitter:card, pour choisir le type de carte. X reprend le titre, la description et l’image des balises Open Graph quand ses propres balises manquent. Il est recommandé d’ajouter twitter:site avec votre compte.
Les Twitter Cards s’appellent-elles toujours ainsi sur X ?
Le réseau s’appelle X, mais les balises meta gardent le préfixe twitter:. Il n’existe pas de nouveau préfixe x:, et les balises existantes continuent de fonctionner.
Pourquoi ma carte ne s’affiche-t-elle pas sur X ?
Vérifiez que twitter:card est présente, que l’adresse de l’image est une URL https:// complète accessible au robot de X, et que robots.txt ne la bloque pas. Une carte publiée auparavant reste en cache environ une semaine.
Quelle différence entre summary et summary_large_image ?
La carte summary affiche une petite image carrée à côté du titre et de la description. La carte grande image affiche une image large sur toute la largeur du post, avec le titre posé dessus et le domaine en dessous ; la description n’est pas affichée.
Mes données sont-elles envoyées à un serveur ?
Non. L’outil fonctionne entièrement dans votre navigateur. Votre saisie n’est ni envoyée, ni journalisée, ni stockée sur nos serveurs.
Plus d’outils SEO et web gratuits
Générez balises et fichiers, vérifiez codes de statut, redirections, DNS et certificats – gratuitement et sans compte.