Passer au contenu principal

Qu'est-ce qu'une Twitter Card ?

image

Définition​

Twitter Card est un système de métadonnées permettant de fournir des expériences multimédias enrichies lors du partage de liens sur Twitter (maintenant renommé X). Normalement, inclure une URL dans un tweet affiche uniquement un lien simple, mais avec des Twitter Cards configurées, il apparaît comme un format de carte visuellement attrayant avec des images, des titres et des descriptions.

Les Twitter Cards sont implémentées avec des balises au format <meta name="twitter:xxx"> dans la section <head> des documents HTML. Similaire à Open Graph, elles fournissent des fonctionnalités spécifiques à la plateforme Twitter. Twitter prend en charge quatre types principaux de cartes, chacun avec des objectifs et des mises en page différents : Summary Card, Summary Card with Large Image, App Card et Player Card.

Des Twitter Cards correctement configurées améliorent considérablement les taux de clics sur les liens. Les recherches montrent que les tweets avec des images ont jusqu'à 150% de taux de retweet plus élevés que les tweets en texte seul. Les Twitter Cards sont devenues un outil marketing essentiel, en particulier pour les médias d'actualités, les blogs et les sites e-commerce. Sans Twitter Cards, vos liens peuvent facilement être ignorés dans la timeline.

Caractéristiques​

  • Plusieurs Types de Cartes : Choisissez des cartes appropriées pour votre type de contenu parmi Summary, Summary with Large Image, App et Player. Chaque type fournit différentes mises en page et fonctionnalités.
  • Engagement Élevé : Les liens avec Twitter Cards ont des taux de clics et de retweet 2-3 fois plus élevés que les liens normaux. Les éléments visuels attirent l'attention des utilisateurs.
  • Compatible avec Open Graph : Si les balises Twitter Card sont absentes, Twitter utilise les balises Open Graph comme solution de repli. Cependant, l'utilisation de balises spécifiques à Twitter Card est recommandée pour des résultats optimaux.
  • Outil de Validation Fourni : Twitter fournit un outil officiel appelé Card Validator pour prévisualiser comment les cartes seront affichées.
  • Support de Médias Enrichis : Les Player Cards permettent de lire des vidéos et de l'audio directement dans la timeline Twitter, améliorant considérablement l'expérience utilisateur.

Comment Utiliser​

Voici comment implémenter et utiliser efficacement les Twitter Cards.

Étape 1 : Choisir le Type de Carte Sélectionnez le type de Twitter Card qui correspond à la nature de votre contenu. Pour les articles de blog ou les articles, Summary Card with Large Image est le plus efficace. Les cartes à grande image fonctionnent également bien pour les pages de produits ou les portfolios. Utilisez Player Cards pour le contenu vidéo et App Cards pour la promotion d'applications mobiles.

Étape 2 : Ajouter les Balises Twitter Card de Base Ajoutez des balises méta Twitter Card à la section <head> de votre page web. Au minimum, vous devez inclure quatre balises : twitter:card, twitter:title, twitter:description et twitter:image.

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Guide Complet de SEO de Blog">
  <meta name="twitter:description" content="Stratégies SEO pratiques pour améliorer les classements de recherche">
  <meta name="twitter:image" content="https://example.com/seo-guide.jpg">
</head>

Étape 3 : Inclure les Balises d'Informations Supplémentaires Ajouter le compte Twitter de votre site ou de l'auteur l'affiche sur la carte, aidant à gagner des abonnés. twitter:site est le compte Twitter du site web, et twitter:creator est le compte de l'auteur du contenu.

<meta name="twitter:site" content="@zerocoke">
<meta name="twitter:creator" content="@jeandupont">

Étape 4 : Optimisation de l'Image Les images Twitter Card sont très importantes. Summary Card nécessite un minimum de 120x120px (ratio 1:1), et Summary with Large Image nécessite un minimum de 300x157px (ratio 2:1). La taille optimale est de 1200x628px, et la taille du fichier doit être inférieure à 5Mo. Prend en charge les formats JPG, PNG et WEBP.

Étape 5 : Tester avec Card Validator Entrez votre URL dans Twitter Card Validator (https://cards-dev.twitter.com/validator) pour vérifier si les cartes s'affichent correctement. Corrigez immédiatement toute erreur et retestez. L'aperçu montre comment cela apparaîtra sur le vrai Twitter.

Étape 6 : Utiliser avec Open Graph Bien que Twitter priorise les balises Twitter Card, il utilise les balises Open Graph si elles sont absentes. Implémentez également Open Graph pour l'optimisation d'autres plateformes sociales. Utiliser les deux est bien et recommandé comme meilleure pratique.

Exemples​

Exemple 1 : Summary Card with Large Image (Le Plus Courant)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Guide de Stratégie de Construction de Backlinks</title>

  <!-- Balises Twitter Card de Base -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@zerocoke">
  <meta name="twitter:creator" content="@jeandupont">
  <meta name="twitter:title" content="Stratégie de Construction de Backlinks : Atteindre les Classements de Page 1">
  <meta name="twitter:description" content="Apprenez des méthodes efficaces de construction de backlinks et les erreurs à éviter avec des études de cas réelles.">
  <meta name="twitter:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta name="twitter:image:alt" content="Infographie de Stratégie de Construction de Backlinks">

  <!-- Open Graph Ensemble (pour Autres Plateformes) -->
  <meta property="og:title" content="Stratégie de Construction de Backlinks : Atteindre les Classements de Page 1">
  <meta property="og:description" content="Apprenez des méthodes efficaces de construction de backlinks et les erreurs à éviter avec des études de cas réelles.">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-strategy.jpg">
  <meta property="og:url" content="https://zero-coke.com/blog/backlink-strategy">
  <meta property="og:type" content="article">
</head>
<body>
  <!-- Contenu de la Page -->
</body>
</html>

Exemple 2 : Summary Card (Petite Image)

<head>
  <!-- Contenu Adapté pour Petite Miniature -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@mynewssite">
  <meta name="twitter:title" content="Résumé des Actualités SEO d'Aujourd'hui">
  <meta name="twitter:description" content="Mises à jour d'algorithme Google, tendances de recherche, actualités du secteur en un coup d'œil">
  <meta name="twitter:image" content="https://example.com/logo-square.jpg">
  <meta name="twitter:image:alt" content="Logo du Site d'Actualités">
</head>

Exemple 3 : Player Card (Contenu Vidéo)

<head>
  <!-- Carte avec Lecture Vidéo Directe -->
  <meta name="twitter:card" content="player">
  <meta name="twitter:site" content="@videosite">
  <meta name="twitter:title" content="Guide Complet de Monétisation de Blog (15 min)">
  <meta name="twitter:description" content="Gagnez 1000€/mois avec votre blog. D'AdSense au marketing d'affiliation">
  <meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
  <meta name="twitter:player" content="https://example.com/embed/player?video=123">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">
  <meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
  <meta name="twitter:player:stream:content_type" content="video/mp4">
</head>

Exemple 4 : App Card (Promotion d'Application Mobile)

<head>
  <!-- Promotion de Téléchargement d'Application Mobile -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:site" content="@myappcompany">
  <meta name="twitter:title" content="Gestionnaire de Blog - Voir les Statistiques de Blog d'un Coup d'Œil">
  <meta name="twitter:description" content="Vérifiez les performances de votre blog en temps réel sur mobile">
  <meta name="twitter:image" content="https://example.com/app-icon.png">

  <!-- Informations sur l'Application iOS -->
  <meta name="twitter:app:name:iphone" content="Gestionnaire de Blog">
  <meta name="twitter:app:id:iphone" content="123456789">
  <meta name="twitter:app:url:iphone" content="blogmanager://open">

  <!-- Informations sur l'Application Android -->
  <meta name="twitter:app:name:googleplay" content="Gestionnaire de Blog">
  <meta name="twitter:app:id:googleplay" content="com.example.blogmanager">
  <meta name="twitter:app:url:googleplay" content="blogmanager://open">
</head>

Exemple 5 : Page Produit E-commerce

<head>
  <!-- Optimisation de Page Produit -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myshop">
  <meta name="twitter:title" content="Écouteurs Sans Fil Premium XYZ-2000 - 50% de Réduction Spéciale">
  <meta name="twitter:description" content="Réduction de bruit, lecture de 30h. Aujourd'hui seulement 129€ → 64,50€">
  <meta name="twitter:image" content="https://shop.example.com/products/xyz-2000-promo.jpg">
  <meta name="twitter:image:alt" content="Photo Produit Écouteurs Sans Fil XYZ-2000">

  <!-- Étiquettes Produit (Optionnel) -->
  <meta name="twitter:label1" content="Prix">
  <meta name="twitter:data1" content="64,50€">
  <meta name="twitter:label2" content="Stock">
  <meta name="twitter:data2" content="Quantité Limitée">
</head>

Exemple 6 : Article d'Actualité

<head>
  <!-- Carte Optimisée pour Article d'Actualité -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@newsmedia">
  <meta name="twitter:creator" content="@journalist_kim">
  <meta name="twitter:title" content="Tendances SEO 2024 : La Recherche IA Change la Donne">
  <meta name="twitter:description" content="SGE de Google et le chat IA de Bing changent fondamentalement le paysage de la recherche. Les stratégies SEO doivent également évoluer.">
  <meta name="twitter:image" content="https://news.example.com/2024/ai-seo-trends.jpg">
  <meta name="twitter:image:alt" content="Interface de Moteur de Recherche IA">

  <!-- Balises Article Open Graph Ensemble -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:author" content="Journaliste Kim">
  <meta property="article:section" content="Technologie">
</head>

Exemple 7 : Promotion d'Événement/Webinaire

<head>
  <!-- Page de Promotion d'Événement -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@eventorganizer">
  <meta name="twitter:title" content="Conférence SEO 2024 | 15 Sept COEX">
  <meta name="twitter:description" content="Savoir-faire pratique de 20 experts SEO nationaux et internationaux. 50% de réduction pour les lève-tôt !">
  <meta name="twitter:image" content="https://event.example.com/seo-conference-2024.jpg">
  <meta name="twitter:image:alt" content="Visuel Principal Conférence SEO 2024">

  <!-- Mettre en Évidence les Informations Clés avec des Étiquettes -->
  <meta name="twitter:label1" content="Date">
  <meta name="twitter:data1" content="15 septembre 2024">
  <meta name="twitter:label2" content="Lieu">
  <meta name="twitter:data2" content="Centre de Conventions COEX">
</head>

Avantages et Inconvénients​

Avantages​

  • Taux de Clics Considérablement Augmentés : Les liens avec Twitter Cards montrent des taux de clics 2-3 fois plus élevés que les liens normaux. Les cartes visuellement attrayantes attirent l'attention des utilisateurs dans la timeline.

  • Notoriété de Marque Améliorée : Expression professionnelle de la marque avec des images et des messages cohérents. Les informations de compte Twitter s'affichent sur les cartes, aidant à augmenter les abonnés.

  • Expérience de Médias Enrichis : Les Player Cards permettent la lecture vidéo directement sur Twitter, permettant aux utilisateurs de consommer du contenu sans visiter votre site. Cela augmente considérablement l'engagement.

Inconvénients​

  • Travail Supplémentaire Requis : Ajouter des balises Twitter Card séparées au-delà d'Open Graph augmente la charge de travail. Optimiser toutes les plateformes sociales entraîne de nombreuses balises méta.

  • Dépendance à la Plateforme : Les Twitter Cards ne fonctionnent que sur Twitter (X). Les autres plateformes nécessitent Open Graph ou leurs propres balises uniques.

  • Charge de Création d'Images : Les images de haute qualité sont essentielles pour des Twitter Cards efficaces. Créer ou sélectionner des images appropriées pour chaque contenu nécessite du temps et des ressources.

FAQ​

Q : Dois-je utiliser Twitter Cards ou Open Graph ? R : Il est préférable d'utiliser les deux. Twitter priorise les balises Twitter Card et utilise les balises Open Graph comme solution de repli si elles sont absentes. Cependant, Open Graph est utilisé par Facebook, LinkedIn, KakaoTalk et d'autres plateformes, donc implémentez les deux. Les balises Twitter Card sont pour l'optimisation Twitter, tandis qu'Open Graph est pour l'optimisation universelle des réseaux sociaux.

Q : Mes Twitter Cards ne s'affichent pas. Pourquoi ? R : Plusieurs causes sont possibles : 1) Erreurs de syntaxe des balises méta - vérifier avec Card Validator. 2) Problèmes de taille d'image - vérifier que les exigences de taille minimale sont respectées. 3) Accès à l'image bloqué - s'assurer que robots.txt ne bloque pas les images. 4) Problèmes HTTPS - utiliser des URLs HTTPS quand possible. 5) Problèmes de cache - recrawler l'URL dans Card Validator peut le résoudre.

Q : Quelle est la différence entre Summary Card et Summary Large Image Card ? R : Summary Card est un format compact avec une petite miniature carrée (120x120px+) affichée à côté du texte. Principalement adapté pour les logos ou icônes. Summary Large Image Card affiche une grande image rectangulaire (1200x628px recommandé) bien en évidence en haut de la carte. Pour la plupart des cas, y compris les articles de blog, les articles et les pages de produits, Summary Large Image est plus efficace. Il a un impact visuel plus important et des taux de clics beaucoup plus élevés.

Q : J'ai changé les Twitter Cards mais les modifications ne se reflètent pas. R : Twitter met en cache les informations de carte, donc les modifications peuvent ne pas se refléter immédiatement. Entrez l'URL dans Card Validator (https://cards-dev.twitter.com/validator) et cliquez sur "Preview card" pour recrawler avec les dernières informations. Les cartes sur les liens déjà tweetés ne se mettront pas à jour, donc les modifications importantes doivent être partagées avec de nouveaux tweets. Le cache de Twitter persiste généralement pendant environ 7 jours.