Les Twitter Cards sont des protocoles qui vous permettent d’attacher des photos, des vidéos et autres médias interactifs à vos tweets afin d’amener du trafic vers votre site. Twitter fournit une large gamme de cartes. De plus, les Twitter Cards peuvent être intégrées à votre page web avec quelques lignes d’HTML. Les utilisateurs renvoyant vers votre contenu avec un tweet auront une carte ajoutée à celui-ci, qui sera visible par tous leurs followers.

Les Twitter Cards représentent un bon partenaire dans votre stratégie SEO car elles permettent d’améliorer votre engagement, d’augmenter votre taux de clic et vos conversions. Les Twitter Cards peuvent ainsi accélérer la portée de votre contenu sur les réseaux sociaux et développer votre image et votre SEO.

Comprendre les différents types de Twitter Cards

Il y 5 différents types de Twitter Cards:

  • Summary Card
  • Summary Card with large image
  • Player Card
  • App Card
  • Lead Generation Card

Summary Card

La Summary Card peut être utilisée pour les publications de blog, les actualités, les pages produit ou tout autre actualité d’entreprise. Ce genre de carte a pour but d’offrir un aperçu de votre contenu en affichant votre titre, description et votre miniature d’image.
Exigences:

  • Titre: 70 caractères
  • Description: 200 caractères
  • Image: au moins 120×120 pixels et pas plus de 1MB

Summary Card example
Pour l’ajouter à votre site, vous devez coller ce code dans l’HTML de votre page web:
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@yoursite” />
<meta name=”twitter:title” content=”Your Title” />
<meta name=”twitter:description” content=”Your description.” />
<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg” />

Summary Card with large image

Ces cartes fonctionnent exactement de la même manière que les précédentes excepté au niveau de la taille de l’image. Elles permettent de faire figurer une image plus captivante dans toute sa largeur afin de mieux attirer les utilisateurs sur votre site.
Exigences:

  • Titre: 70 caractères
  • Description: 200 caractères
  • Image: au moins 280 x 150 pixels et pas plus de 1MB

Summary card with large image

Ajoutez ce code HTML pour installer cette Twitter Card:
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@yourwebsite”>
<meta name=”twitter:creator” content=”@yourtwitterhandle”>
<meta name=”twitter:title” content=”your title”>
<meta name=”twitter:description” content=”your description.”>
<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg“>

App Card

Les App Cards peuvent être utilisées pour promouvoir des applications mobiles et augmenter ainsi leur installation. Cette carte souligne le nom, la description, l’icône, le classement et le prix. Twitter peut utiliser les identifiants de votre application pour obtenir ces informations.
Exigences:

  • Titre: prise de l’identifiant de l’application
  • Description: 200 caractères
  • Image: logo de l’application prise via l’identifiant – l’image devrait être au moins de 800×320 pixels et peut être en format JPG, JPEG, PNG ou GIF. Les images en dessous de 1MB sont préférées.

App Card example

Si votre application n’est pas disponible dans l’app store, Twitter ne sera pas capable de prendre cette information. Si votre application n’est pas située dans le store US, indiquez sa provenance dans la balise méta twitter:app:country. Également, si votre lien pointe directement vers l’App Store ou Google Play, Twitter va automatiquement créer une App Card.
Voici le code que vous devez rentrer:
<meta name=”twitter:card” content=”app”>
<meta name=”twitter:site” content=”@yourwebsite”>
<meta name=”twitter:description” content=”your description”>
<meta name=”twitter:app:country” content=”your country like US”>
<meta name=”twitter:app:name:iphone” content=”your iphone app name”>
<meta name=”twitter:app:id:iphone” content=”your iphone app ID”>
<meta name=”twitter:app:url:iphone” content=”your iphone app URL”>
<meta name=”twitter:app:name:ipad” content=”your ipad app name”>
<meta name=”twitter:app:id:ipad” content=”your ipad app ID”>
<meta name=”twitter:app:url:ipad” content=”your ipad app URL”>
<meta name=”twitter:app:name:googleplay” content=”your googleplay app name”>
<meta name=”twitter:app:id:googleplay” content=”your googleplay add ID”

Player Card

Les Player Cards ont été créées dans le but de promouvoir des médias de streaming comme la vidéo ou un lecteur audio, à l’intérieur de votre tweet. Elles sont parfaitement utiles pour pousser des podcasts ou des Vines par exemple.
Exigences:

  • Description: 200 caractères
  • Image: affichée à la place du lecteur sur les plates-formes qui ne supportent pas les lecteurs iframes ou inline. Mêmes dimensions que pour votre lecteur: moins de 1MB
  • Vidéo: H.264, profil de référence, niveau 3.0, jusqu’à 640 x 480 pixels à 30fps.
  • Audio: AAC, basse complexité du profil

Player Card Soundcloud

Lead Generation Card

Les Lead Generation Cards sont un excellent moyen pour vous connecter avec vos clients potentiels. Vous pouvez ainsi collecter des informations sur vos prospects. Les utilisateurs peuvent exprimer leur intérêt pour votre entreprise sans avoir à remplir un formulaire ou quitter leur compte Twitter. Habituellement, leur nom, leur pseudonyme Twitter et leur adresse e-mail sont déjà inscrits afin qu’ils n’aient pas à le remplir.
Exigences:

  • Titre: 50 caractères
  • Bouton d’action: 20 caractères
  • Message après envoi (optionnel): 100 caractères
  • Image: au moins 800 x 200 pixels avec un ratio d’aspect 4:1et pas plus de 3MB

Lead Generation Card
Pour bien mettre en place votre Lead Generation Card, vous devez vous connecter sur votre compte Twitter Ads (même si la carte est gratuite):

  • Connectez vous à Twitter
  • Cliquez sur l’icone ‘Settings’ et sélectionnez ‘Twitter Ads’ dans le menu déroulant
  • Cliquez sur l’onglet ‘Creatives’ dans le menu de navigation du haut et sélectionnez Cards
  • Une fois installée, cliquez sur l’onglet ‘Tweets’ et ensuite cliquez sur le bouton bleu ‘Compose Tweet’ dans le coin en haut à droite
  • Rédigez votre tweet et cliquez sur ‘Attach a Card to this Tweet’ lorsque vous êtes prêt
  • Sélectionnez la carte que vous voulez attacher et envoyez ensuite votre tweet.

Comment intégrer ces Twitter Cards à un CMS ?

Si votre site web fonctionne sous WordPress, il est peut être judicieux d’intégrer ces Twitter Cards dans votre système afin de gagner du temps. Si l’on se concentre sur WordPress, il y a 3 plugins que vous pouvez installer:

Twitter fournit un guide sympa pour installer votre CMS avec des Twitter Cards donc vous devriez vraiment y jeter un coup d’oeil.
Une fois que c’est bien installé, vous devriez vérifier si cela marche correctement sur Twitter. Connectez vous au Twitter Card Validator et vous verrez si tout fonctionne normalement. Nous avons l’exemple de l’un de nos articles:
Exemple de l'article

Comment vérifier les performances de vos Twitter Cards ?

Pour aller plus loin, vous aurez sûrement envie de regarder le comportement de vos Twitter Cards. Nous avons récemment développé une nouvelle fonctionnalité qui vous permet de vérifier facilement les performances de vos Twitter Cards (et les Open Graphs par la même occasion). Vous pouvez analyser la répartition et les propriétés de celles-ci, obtenir des informations et accéder aux détails des URLs. Ce sont d’excellents partenaires pour votre stratégie SEO puisqu’elles améliorent la portée de vos partages sociaux, le taux de clic et vos conversions

Twitter cards par OnCrawl