Comment créer les Twitter Cards ou Cartes Twitter

Il y a un an, Twitter avait lancé un nouvel outil analytics pour les Twitter Cards pour permettre aux propriétaires de sites ou de blogs de mieux suivre les performances de leurs liens d’articles partagés sur la plateforme.


Twitter incite à utiliser les Twitter Cards


Selon Thenextweb, cet outil vient d’être discrètement retiré ou plutôt modifié par Twitter sans aucune annonce officielle.

Pour préciser les choses, il s’agissait d’un outil qui permettait d’avoir les statistiques individuelles des liens partagés depuis un site à partir du bouton “Retweet” présent sur la page d’un article.

Par conséquent, et si l'on en croit Thenextweb.com, vous pouvez toujours avoir dans l’outil analytics les performances de vos contenus les plus populaires, celles des liens partagés les plus cliqués pour découvrir vos contenus et beaucoup plus encore.

Mais, tout ceci à condition d’installer désormais le code des Twitter Cards du code source de votre site ou blog avant de le faire valider par Twitter.

Cependant, il faut savoir que le nouvel outil Twitter Cards Analytics ne donne pas les mêmes informations que l’ancien outil. Il n’y a plus le nombre de mises en favoris par liens, ni le nombre de retweets, ni le nombre de réponses (commentaires) sur la page d'accueil de l'outil.

Ces trois statistiques sont combinées sous l’appellation “Engagements” que vous pouvez voir dans votre Twitter Analytics à côté du nombre d’ “Impressions” et du “Taux d’engagement”. Pour les détails par lien, vous devez avoir installé le code Twitter Cards.

L’engagement correspondant au nombre total de fois qu’un utilisateur a interagi avec votre Tweet.


Statistiques Twitter


Vous l’aurez compris, l’objectif de tout ce chamboulement serait de pousser les propriétaires de sites à insérer le code des Twitter Cards afin de continuer à recevoir des statistiques globales et plus détaillées (retweets, mises en favoris et réponses) par URL partagé sur le réseau social.

Les statistiques actuelles étant faites individuellement par Tweet publié (par chaque utilisateur) sur le réseau social et ne fournissent donc pas les totaux pour chaque URL de votre site. Twitter chercherait donc à fournir le total des retweets, des mises en favoris et des réponses pour chaque URL partagée

Modèles de codes Twitter Cards à utiliser


Les Twitter Cards permettent de proposer un résumé du lien d’un article partagé et d’intégrer des contenus multimédia (photos, vidéos) dans un Tweet. Et ce, afin d’offrir plus de visibilité aux Tweets et obtenir de meilleurs statistiques.

Voici les différents types de Cartes Twitter ainsi que leurs codes que vous pouvez utiliser dans le code source de votre site. Et ce, avant de procéder à leur validation suivant la procédure décrite à la fin de cet article.

  • Summary Card: ou Carté “résumé” qui comprend un titre, une description, une vignette (petite image) et le compte Twitter.

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@votre_identifiant" />
    <meta name="twitter:creator" content="@votre_identifiant" />
    <meta name="twitter:title" content="Balise meta title générique correspondant au titre de la page affichée" />
    <meta name="twitter:description" content="Balise meta description générique correspondant au lien de la page affichée" />
    <meta name="twitter:image" content="Code générique correspondant à l’URL de la vignette de l'image de l’article affiché" />
             <meta name="twitter:url" content="Code générique correspondant à l'URL de la page affichée" />

  • Summary Card with Large image : similaire à la Carte ci-dessus mais comportant une image plus large.

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@votre_identifiant" />
    <meta name="twitter:creator" content="@votre_identifiant" />
    <meta name="twitter:title" content="Balise meta title générique correspondant au titre de la page affichée" />
    <meta name="twitter:description" content="Balise meta description générique correspondant au lien de la page affichée" />
    <meta name="twitter:image" content="Code générique correspondant à l’URL de la vignette de l'image de l’article affiché" />
    <meta name="twitter:url" content="Code générique correspondant à l'URL de la page affichée"" />

  • Photo Card : Une Carte Twitter avec uniquement une photo à partager. Utile pour les sites de photos.

    <meta name="twitter:card" content="photo" />
    <meta name="twitter:site" content="@flickr" />
    <meta name="twitter:title" content="ici Titre de l'image" />
    <meta name="twitter:image" content="URL de l'image à afficher (se terminant en .jpg ou gif ou png" />
    <meta name="twitter:url" content="URL de la page qui affiche l'image" />


  • Gallery Card : Une Carte pour partager un ensemble de 4 photos d'une même thématique en une fois.

    <meta name="twitter:card" content="gallery" />
    <meta name="twitter:site" content="@votre_identifiant" />
    <meta name="twitter:creator" content="@votre_identifiant" />
    <meta name="twitter:title" content="Titre de présentation de vos 4 photos">
    <meta name="twitter:description" content="Descriptions détaillées de vos 4 photos.">
    <meta name="twitter:url" content="ici l'URL de la page affichant les 4 photos" />
    <meta name="twitter:image0" content="URL 1 de l'image 1 à afficher (se terminant en .jpg ou gif ou png">
    <meta name="twitter:image1" content="URL 2 de l'image 2 à afficher (se terminant en .jpg ou gif ou png">
    <meta name="twitter:image2" content="URL 3 de l'image 3 à afficher (se terminant en .jpg ou gif ou png">
    <meta name="twitter:image3" content="URL 4 de l'image 4 à afficher (se terminant en .jpg ou gif ou png">


  • App Card : Une Carte pour proposer les détails d’une application mobile avec la possibilité de permettre son téléchargement immédiatement.

    <meta name="twitter:card" content="app">
    <meta name="twitter:site" content="@TwitterDev">
    <meta name="twitter:description" content="Description de l'application">
    <meta name="twitter:app:country" content="Code international du pays (FR pour la France, BE pour la Belgique, CA pour le Canada, etc)">
    <meta name="twitter:app:name:iphone" content="Nom de l'application pour iPhone">
    <meta name="twitter:app:id:iphone" content="Numéro identifiant de l'appli pour iPhone dans l'AppStore">
    <meta name="twitter:app:url:iphone" content="URL de la page de téléchargement de l'appli pour iPhone dans l'AppStore">
    <meta name="twitter:app:name:ipad" content="Nom de l'application pour iPad">
    <meta name="twitter:app:id:ipad" content="Numéro identifiant de l'appli pour iPad dans l'AppStore">
    <meta name="twitter:app:url:ipad" content="URL de la page de téléchargement de l'appli pour iPad dans l'AppStore">
    <meta name="twitter:app:name:googleplay" content="Nom de l'application pour Android"">
    <meta name="twitter:app:id:googleplay" content="Numéro identifiant de l'appli pour Android dans Google Play">
    <meta name="twitter:app:url:googleplay" content="URL de la page de téléchargement de l'appli pour Android dans Google Play">


  • Player Card : Une carte pour intégrer une vidéo ou un podcast dans un Tweet.


    <meta name="twitter:card" content="player">

    <meta name="twitter:site" content="@youtube">

    <meta name="twitter:url" content="URL de la page Youtube de la vidéo>

    <meta name="twitter:title" content="Titre donné à la vidéo.">

    <meta name="twitter:description" content="Description de la vidéo.">

    <meta name="twitter:image" content="URL de l’image représentant la vidéo.">


  • Product Card : Une carte “produits” que peuvent utiliser les sites e-commerce pour fournir plus de détails sur leurs produits.

    <meta name="twitter:card" content="product">
    <meta name="twitter:site" content="@votre_identifiant">
    <meta name="twitter:creator" content=@votre_identifiant">
    <meta name="twitter:domain" content="Nom de domaine de votre site e-commerce (ex : domaine.com)">
    <meta name="twitter:title" content="Titre de la page produit">
    <meta name="twitter:image" content="URL de l'image du produit">
    <meta name="twitter:label1" content="Prix"><meta name="twitter:data1" content="Montant du prix">
    <meta name="twitter:label2" content="Lieu"><meta name="twitter:data2" content="Nom du Pays">

En principe, tous les outils CMS (WordPress, Blogger, Drupal, Joomla, etc) utilisent des balises Meta génériques qui se personnalisent pour chaque page visitée. Exemple, voici la balise meta description générique de WordPress :

<?php bloginfo('description'); ?>" />

Pour les “Meta Property” du code Twitter Cards, utilisez donc les mêmes que vous avez dans votre code source pour vos balises meta. Ça devrait fonctionner.


Valider votre Twitter Card


La procédure de validation se fait 3 étapes successives :

  • Ensuite vous devez récupérer et ajouter des balises meta sur les pages de votre site web.

    Attention, chaque type de Carte Twitter à son propre code HTML différent de celui des autres types.

Twitter veut dorénavant des Tweets enrichis avec des images et des vidéos pour valoriser les Tweets et susciter l’engagement.

Et d’autre part, ce serait une occasion pour Twitter de vérifier et identifier les propriétaires des contenus partagés sur sa plateforme. Même si cette nouvelle option n'est pas encore disponible dans l'outil Analytics de Twitter pour tous les comptes.