Lorsque vous partagez un lien sur X (anciennement Twitter), la plateforme tente de générer un aperçu, ce que l'on appelle une Twitter Card. Sans les bonnes balises méta, votre lien apparaît comme une simple URL. Avec des Twitter Cards correctement configurées, en revanche, X récupère un titre, une description et une image, transformant votre lien partagé en un teaser visuel sur lequel les gens sont bien plus susceptibles de cliquer.
Comment les Twitter Cards génèrent les aperçus de liens
Une Twitter Card n'est pas quelque chose que vous téléversez ou concevez. Elle est générée automatiquement par X à partir des balises méta dans le HTML de la page liée. Lorsque quelqu'un colle votre URL dans un tweet, le robot d'exploration de X visite la page, lit les balises méta et assemble l'aperçu. Si les balises sont manquantes ou mal configurées, l'aperçu est soit incomplet, soit absent.
Summary Card vs Summary Card with Large Image
X prend en charge plusieurs types de cartes, mais en pratique vous ne rencontrerez que deux d'entre eux :
- Summary Card : Un aperçu compact avec une petite vignette à gauche et le titre et la description à droite. C'est ce qu'utilisent la plupart des articles de blog, articles et pages de documentation. La vignette est carrée, généralement d'au moins 144×144 pixels.
- Summary Card with Large Image : L'image occupe toute la largeur au-dessus du texte. Cela fonctionne bien pour les pages d'atterrissage, les pages produits, les pièces de portfolio ou toute page où le visuel est l'accroche principale. L'image doit être d'au moins 300×157 pixels, idéalement 1200×628 pour un affichage net sur les écrans haute résolution.
Il existait auparavant des types supplémentaires (Player Card pour audio/vidéo, App Card pour les applications mobiles), mais la plupart des sites n'en auront jamais besoin.
Balises méta Twitter Card requises
Placez-les dans la section <head> de votre page :
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Votre titre de page" />
<meta name="twitter:description" content="Une brève description de votre page." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@VotreCompte" />La balise twitter:card détermine la mise en page. La balise twitter:site est optionnelle mais ajoute votre identifiant en tant qu'attribution sous la carte.
Twitter Cards et Open Graph : comment fonctionne le repli
Voici quelque chose que de nombreux propriétaires de sites ne réalisent pas : X se rabattra sur les balises Open Graph (celles utilisées par Facebook, LinkedIn et WhatsApp) si les balises spécifiques à Twitter sont manquantes. Donc si vous avez déjà og:title, og:description et og:image définis, votre lien affichera tout de même un aperçu sur X, simplement sans le contrôle explicite que les balises Twitter Card vous donnent.
En pratique, cela signifie qu'une extension SEO bien configurée comme Yoast ou Rank Math s'occupe souvent automatiquement des bases. Mais s'appuyer sur le repli a des inconvénients : les dimensions de l'image peuvent ne pas être idéales pour la mise en page de X, et la description peut être tronquée différemment. Pour le résultat le plus propre, configurez les deux ensembles de balises.
Dépannage : l'aperçu Twitter Card ne s'affiche pas
Même lorsque les balises sont présentes, des choses peuvent mal tourner :
- Problèmes de cache : X met agressivement en cache les aperçus de cartes. Si vous corrigez une image cassée ou mettez à jour un titre, l'ancien aperçu peut persister pendant des jours. Vous pouvez forcer un rafraîchissement à l'aide de l'outil Card Validator de X.
- Image trop petite : Si votre image est en dessous de la taille minimale, X peut l'ignorer entièrement et n'afficher aucune image d'aperçu.
- URL relatives : La valeur
twitter:imagedoit être une URL absolue. Les chemins relatifs comme/images/header.jpgne fonctionneront pas. - Robots bloquant le crawler : Si votre
robots.txtbloque Twitterbot, X ne peut pas lire vos balises méta et ne générera pas de carte.
Configurer les Twitter Cards dans WordPress
WordPress lui-même n'émet pas les balises méta Twitter Card par défaut. Vous avez besoin soit d'une extension SEO (Yoast SEO, Rank Math, The SEO Framework), soit d'une extension dédiée aux réseaux sociaux pour les générer. La plupart de ces extensions vous permettent de définir un type de carte par défaut pour l'ensemble du site et de remplacer l'image et la description par article ou par page.
Si vous utilisez WooCommerce, vérifiez vos pages produits séparément. Elles nécessitent parfois une configuration supplémentaire car l'image et la description du produit doivent être tirées des données du produit, et non des champs génériques de la page.
Vérifiez vos balises Twitter Card avec InspectWP
InspectWP lit les balises méta de votre site WordPress et vous montre exactement quelles balises Twitter Card sont présentes (ou manquantes). Le rapport affiche le type de carte détecté, le titre, la description, l'URL de l'image et l'identifiant du site, afin que vous puissiez vérifier que l'aperçu aura l'apparence souhaitée avant de partager votre contenu.