Que sont les Twitter (X) Cards ?
Les Twitter Cards, aujourd'hui évoquées dans le contexte de X, contrôlent l'affichage d'une URL lorsqu'un utilisateur publie votre lien sur la plateforme. Au lieu d'une simple adresse, une page correctement balisée peut montrer un titre, une description, le domaine et une image dans le post.
Marketers, développeurs, spécialistes SEO et éditeurs utilisent ces métadonnées pour protéger le taux de clic sur articles, fiches produit et landing pages partagés. Une og:image manquante ou une URL d'image en HTTP produit souvent un aperçu pauvre que l'utilisateur ignore dans le fil.
Le validateur ci-dessus récupère le HTML public de toute URL saisie, analyse les tags Open Graph et Twitter Card, signale les problèmes fréquents et affiche une maquette approximative de post X. Vous voyez les mêmes champs essentiels que le crawler examine avant la mise en ligne du lien en campagne ou en post organique.
Comment valider les meta tags Twitter Card
- Collez une URL de site public dans le champ de saisie. La page doit renvoyer du HTML sans mur de connexion pour que la requête fonctionne.
- Cliquez sur Aperçu pour demander la page et extraire les meta tags de la réponse.
- Consultez la maquette de post X, y compris la mise en page grande image lorsque
summary_large_imageest détecté. - Lisez les messages de validation par gravité : erreurs pour titre ou image manquants, avertissements pour HTTPS ou longueur de texte.
- Inspectez la liste complète des tags avec toutes les valeurs
twitter:*etog:*du code source. - Corrigez les métadonnées sur votre site, déployez si nécessaire et relancez Aperçu jusqu'à disparition des avertissements.
Utilisez le bouton de site de démonstration pour charger une URL d'actualités exemple et comparer une carte fonctionnelle à la page que vous déboguez. Les URLs de staging ne fonctionnent que si elles sont accessibles publiquement sur internet, sans authentification.
Comment X choisit titre, description et image
X prend en charge les tags Twitter Card dédiés, mais lit aussi Open Graph et les replis HTML standard. Quand les deux jeux existent, les valeurs spécifiques à Twitter ont généralement la priorité sur leurs champs, tandis qu'Open Graph comble les lacunes.
La logique de lecture de cet outil suit cet ordre :
title = og:title → twitter:title → HTML <title>
description = og:description → twitter:description → meta name="description"
image = og:image → twitter:image (résolue en URL HTTPS absolue)
card type = twitter:card → og:type → tend vers summary_large_image
Les URLs absolues comptent. Les chemins relatifs comme /images/hero.jpg doivent se résoudre contre l'URL de la page, sinon le crawler peut échouer à charger l'asset. Le validateur résout les chemins relatifs de la même façon et avertit quand l'URL finale de l'image n'utilise pas HTTPS.
Types de Twitter Card comparés
La plupart des pages marketing utilisent summary ou summary_large_image. Les cartes app et player exigent des tags supplémentaires pour applications mobiles ou médias intégrés.
| Type de carte | Mise en page | Usage typique | Orientation image minimale |
|---|---|---|---|
| summary | Miniature carrée à côté du texte | Documentation, posts simples | Minimum 144×144 px |
| summary_large_image | Image large au-dessus du titre et de la description | Articles, lancements, landing pages | Minimum 300×157 px, ratio 2:1 recommandé |
| app | Nom d'app, icône et liens store | Campagnes d'installation | Icône via twitter:image:src |
| player | Lecteur vidéo ou audio intégré | Pages média avec iframe | Requiert twitter:player et URL de stream |
Si twitter:card manque mais que og:image existe, X peut quand même afficher une carte grande image. Le validateur signale l'absence de twitter:card en avertissement pour que vous la définissiez explicitement plutôt que de compter sur le repli.
Limites recommandées de texte et d'image
Les règles de troncature ne sont pas toujours publiées avec précision pixel par pixel, mais ces limites correspondent à ce que le validateur applique et à ce que la plupart des templates de production visent.
| Champ | Maximum recommandé | Effet du dépassement |
|---|---|---|
| Titre | 70 caractères | Le texte peut être tronqué dans l'aperçu |
| Description | 200 caractères | Le copy supplémentaire peut être coupé |
| Largeur image (grande carte) | 1200 px en ratio 2:1 | Taille courante pour affichage retina net |
| Format de fichier | JPG, PNG, WEBP, GIF (non animé) | Formats non pris en charge peuvent échouer |
| Protocole URL image | HTTPS | Les URLs HTTP déclenchent un avertissement ici |
Les cartes grande image utilisent un ratio 1.91:1 dans la maquette d'aperçu, aligné sur le cadre approximatif que X affiche au-dessus du bloc titre.
Ce que ce validateur vérifie
Après analyse des tags, l'outil exécute des contrôles fixes alignés sur les erreurs de déploiement courantes :
- Titre manquant dans
twitter:titleetog:title - Description manquante (avertissement seulement, mais nuit à l'attrait du clic)
- Image manquante pour les aperçus enrichis
- Valeur
twitter:cardnon reconnue - Titre de plus de 70 caractères
- Description de plus de 200 caractères
- URL d'image sans HTTPS
Quand tous les contrôles essentiels passent, un message informatif rappelle que X met les cartes en cache séparément. Une page peut valider ici et paraître légèrement différente sur la plateforme jusqu'au rafraîchissement du cache.
Exemple minimal de tags pour une page marketing
La plupart des plugins CMS écrivent ces tags automatiquement. Si vous maintenez du HTML manuel ou une stack custom, une carte grande image commence souvent ainsi :
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Titre de votre page" />
<meta name="twitter:description" content="Proposition de valeur en une phrase." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta property="og:title" content="Titre de votre page" />
<meta property="og:description" content="Proposition de valeur en une phrase." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
Dupliquer les tags Open Graph aide Facebook, LinkedIn, Slack et d'autres crawlers à lire les mêmes valeurs. Si vous publiez la même URL sur plusieurs réseaux, combinez cette vérification avec l'Aperçu de Post LinkedIn pour confirmer la troncature dans le fil professionnel également.
Foire aux questions
Pourquoi X affiche un aperçu différent de cet outil ?
X met en cache les données de carte par URL. Le premier crawl après un changement de métadonnées peut retarder par rapport au déploiement. Utilisez le débogueur de cartes de la plateforme ou republiez après expiration du cache si l'aperçu live reste obsolète.
Ai-je besoin des tags Open Graph et Twitter Card ?
Open Graph seul peut suffire car X se replie sur og:title, og:description et og:image. Des tags twitter:* explicites réduisent l'ambiguïté et clarifient l'intention entre summary et summary_large_image.
Puis-je valider des URLs protégées par mot de passe ou localhost ?
Non. Le validateur récupère l'URL depuis un environnement serveur. Localhost, staging VPN et pages avec login renvoient une erreur car leur HTML n'est pas accessible publiquement.
Pourquoi mon image manque alors que le tag existe ?
Causes fréquentes : URLs relatives sans base correcte, redirections vers login, protection hotlink ou fichiers au-dessus des limites du crawler. Vérifiez que l'URL de l'image s'ouvre dans un onglet de navigation privée.
Corriger les cartes améliore-t-il le SEO directement ?
Les tags de carte affectent surtout le CTR social et la présentation de marque, pas les formules de ranking Google. Ils comptent toutefois pour le trafic depuis X, les newsletters qui intègrent des liens et les partages manuels de l'équipe.
Quel type de carte utiliser pour des articles de blog ?
summary_large_image est le choix par défaut pour articles et landing pages car l'image large attire l'attention dans la timeline. Utilisez summary seulement sans image adaptée.
Vérifiez votre carte X avant chaque mise en ligne de lien
Collez l'URL de production ci-dessus avant e-mails, publicités ou partages publics de l'équipe. Résolvez chaque erreur et avertissement HTTPS d'abord, puis contrôlez la longueur du titre et de la description pour une lecture propre sur les largeurs mobiles, où la majorité des sessions X se produit.
Relancez le validateur après chaque déploiement touchant la section <head>, surtout les changements de template CMS qui régénèrent les meta tags globalement. Quand la même page part aussi sur LinkedIn ou Slack, comparez les aperçus sociaux entre réseaux pour qu'une plateforme n'hérite pas de tags cassés pendant qu'une autre paraît correcte.
Les métadonnées de carte ne sont qu'une couche de distribution sur X. D'autres outils de publication Twitter et X couvriront des flux supplémentaires de liens, profil et contenu au fur et à mesure que la catégorie s'étoffe.