Balises meta Twitter Card

Twitter (X) a défini son propre protocole de cartes d'aperçu avant l'existence d'OpenGraph et le maintient encore. Même si Twitter utilise désormais les balises OG comme solution de repli lorsque les balises twitter:* sont absentes, déclarer explicitement twitter:card fournit la mise en page la plus prévisible.

Il existe quatre types de cartes : summary (petite miniature à côté du titre et de la description), summary_large_image (image principale sur toute la largeur), app (installation d'une application mobile) et player (vidéo ou audio intégré). Choisissez summary_large_image pour les articles riches en contenu.

Lorsqu'elles sont présentes, ces balises remplacent og:title et og:description sur Twitter. Utilisez-les si vous souhaitez un titre différent pour le public de Twitter et pour les utilisateurs généraux d'OpenGraph ; sinon, laissez Twitter utiliser les valeurs OG par défaut.

Pour les cartes summary, utilisez une image carrée au format 1:1 d'au moins 144x144. Pour summary_large_image, utilisez une image au format 2:1, idéalement de 1200x600 ou plus. Twitter rejette les images de plus de 5 MB. Utilisez une URL absolue, comme pour og:image : les chemins relatifs ne fonctionnent pas.

Texte alternatif de l'image de la carte, limité à 420 caractères. Il améliore l'accessibilité pour les utilisateurs de lecteurs d'écran qui consultent Twitter et fournit une description de repli lorsque les images ne se chargent pas. Fournissez-le toujours : c'est un gain d'inclusivité qui ne prend que 30 secondes.

twitter:site est l'identifiant Twitter de votre site, avec le @. twitter:creator est l'identifiant de l'auteur. Les renseigner permet à Twitter d'afficher « de @yoursite » et d'associer la signature à un compte réel.

OpenGraph utilise property="og:..." ; Twitter utilise name="twitter:...". Cette différence est historique (RDFa contre HTML5). Les deux sont techniquement valides ; utiliser le bon attribut pour chaque protocole évite les cas particuliers avec les validateurs stricts.

twitter:card="app" permet de promouvoir une application iOS/Android avec twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay et twitter:app:url:* pour les liens profonds. Lorsque l'utilisateur appuie sur la carte, l'App Store, le Play Store ou l'application s'ouvre directement si elle est installée.

twitter:card="player" intègre un lecteur vidéo ou audio directement dans le tweet. Il nécessite twitter:player (URL d'une iframe HTTPS), twitter:player:width et twitter:player:height. Twitter approuve manuellement les cartes de lecteur pour prévenir les abus : envoyez votre demande via developer.twitter.com.

Twitter a fermé l'interface publique de Card Validator, mais les cartes sont toujours prévisualisées dans un tweet en brouillon. Collez votre URL dans un brouillon privé pour voir exactement quel type de carte et quelle image seront affichés avant de publier le tweet.

Incluez toujours twitter:card ainsi que l'ensemble des balises OG. La plupart des plateformes autres que Twitter ignorent les balises twitter:*, et la plupart des clients Twitter modernes utilisent les balises OG comme solution de repli : cette combinaison produit donc un aperçu correct partout, avec un minimum de duplication.

Si twitter:title est absent mais que og:title est présent, qu'est-ce qui apparaît sur la carte Twitter ?

Les cartes Twitter (déclarées via name="twitter:card") donnent aux pages un aperçu prévisible sur X. Choisissez summary_large_image pour le contenu éditorial, ajoutez twitter:image avec une URL absolue et twitter:image:alt, attribuez le site et l'auteur avec leurs identifiants, et laissez les valeurs OG compléter les balises que vous ne remplacez pas.