Ajoutez les balises Twitter / X Card

Ce que vérifie ce contrôle

Scanne le <head> de la page à la recherche de <meta name="twitter:card" content="…"> et (le cas échéant) twitter:image, twitter:title, twitter:description et twitter:site. Le contrôle échoue quand aucun twitter:card n’est présent et que X doit retomber sur un type d’aperçu plus petit — ou sur aucun aperçu du tout.

Pourquoi c’est important

X (anciennement Twitter) rend les URL publiées dans l’un de trois formats d’aperçu :

summary_large_image — une carte pleine largeur avec image, titre et description en dessous. Le format à forte conversion que toute marque veut.
summary — une petite carte avec vignette. Le défaut si aucun twitter:card n’est défini mais que des balises Open Graph sont présentes.
Pas de carte du tout — une URL nue, sans aperçu. Ce qui se passe quand ni OG ni Twitter ne sont présents.

Une carte summary_large_image génère un taux de partage et de clic significativement supérieur à un summary ; les deux écrasent une URL nue. La différence : une balise meta.

Comment le corriger

Mettez quatre balises meta dans <head>. Trois peuvent refléter vos balises Open Graph — X retombe sur les valeurs OG si les équivalents Twitter sont manquants, mais des balises Twitter explicites vous laissent définir une image différente pour X si vous le souhaitez :

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Audit SEO gratuit en 60 secondes — MetricSpot">
  <meta name="twitter:description" content="Voyez ce que les agents IA et Google voient sur votre site. 91 contrôles, sans inscription.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

Le minimum dont vous avez besoin est twitter:card. Si votre page a déjà les balises Open Graph essentielles, X les lit pour le titre/description/image. La seule balise twitter:card indique à X d’afficher la mise en page grand format au lieu d’une petite vignette.

Règles pour l’image (identiques aux règles d’image OG) :

1200×630 (2:1) ou plus large — minimum 300×157, maximum 5 Mo.
PNG ou JPG. WEBP fonctionne sur la plupart des plateformes mais le renderer de X est inconstant — restez sur PNG/JPG.
Voir la page dédiée Image Open Graph pour les détails de taille et de génération dynamique.

Astro / Next.js — générez depuis le frontmatter aux côtés d’OG :

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress — Yoast SEO, Rank Math et SEOPress émettent tous les balises Twitter Card automatiquement. Dans Yoast : SEO → Social → Twitter → « Add Twitter card meta data » → On.

Types de cartes à connaître.

summary_large_image — ce que vous voulez 95 % du temps.
summary — petite vignette + texte. Utile pour les articles très textuels où l’image n’est pas l’essentiel.
player — lecteur vidéo/audio embarqué. Niche ; nécessite une mise en liste blanche par X.
app — promouvoir l’installation d’une appli mobile. Utilisez les champs d’ID App Store.

L’ancien Card Validator a été déprécié en 2023. Pour vérifier, publiez l’URL en brouillon (sans publier) et X montrera la carte rendue — ou utilisez un outil tiers comme opengraph.xyz qui affiche les aperçus Twitter et OG.

Questions fréquentes

Faut-il à la fois des balises Open Graph et Twitter Card ?

X retombe sur Open Graph si aucune balise Twitter n’est présente, donc OG seul vous donne une carte — mais seulement une petite carte. Pour forcer la mise en page grand format, vous avez besoin au minimum de <meta name="twitter:card" content="summary_large_image">. Tout le reste peut retomber sur OG.

L’aperçu de ma carte est cassé — comment le rafraîchir ?

X met en cache les scrapes d’aperçu jusqu’à 7 jours. Le cache se vide quand vous changez l’URL canonique ou quand l’entrée cachée expire. Il n’y a plus d’outil public « refresh » — le contournement est d’ajouter un paramètre de cache-busting (?v=2) à l’URL une fois, de publier l’URL bustée une fois, puis de revenir à l’URL propre.

Et Mastodon, Bluesky, LinkedIn ?

Ils utilisent tous Open Graph, pas Twitter Cards. Si vous avez OG correct, ils s’afficheront correctement automatiquement. Voir balises Open Graph essentielles et Image Open Graph.