Créez votre Twitter Card

 

La Twitter card permet aux professionnels d’introduire un résumé du contenu de leur page web dans un tweet, à la façon de l’OpenGraph de Facebook. Les utilisateurs pourront cliquer sur « résumé » et votre texte apparaîtra. Ainsi les sites web se verront offrir la possibilité d’ajouter toute sorte de contenus associés à leur url, des images, des descriptions, des vidéos…

 

Avantages des twitter cards 

  • Vous pouvez contrôler toutes les informations que vous publiez dans vos tweets sans pour autant vous préoccuper des 140 caractères autorisés. Twitter ira directement chercher les informations sur le web, grâce aux données fournies. Le service est adapté à tous types de supports : PC, smartphones et tablettes.
  • Elles génèrent du trafic vers votre site.
  • Elles augmentent le nombre de personnes qui suivent votre compte Twitter par attribution de contenu.

 

Comment obtenir sa twitter card ?

C’est simple, il suffit de faire une demande auprès de Twitter sur leur plateforme pour développeurs : https://dev.twitter.com/form/participate-twitter-cards. C’est un service gratuit qui s’obtient sous quelques jours voire deux semaines maximum, suite à votre demande.  

 

3 différents types de carte

La carte résumé

la carte résumé

C’est la carte la plus complète, elle donne la possibilité de publier un titre, une image thumbnail et un texte limité à 200 caractères.

La carte est conçue pour donner aux visiteurs un aperçu du contenu qu’ils vont lire. Elle permet notamment de les inciter à cliquer (si bien sûr votre carte attire l’œil et intéresse les lecteurs). La carte résumé est un plus qui permet d’agrémenter vos informations, elle sert à présenter un article, un blog, un produit…

D’autre part, sachez que le compte Twitter de l’auteur est automatiquement ajouté sous le résumé, voir l’exemple ci-dessus.

La carte photo

la carte photo

Elle donne la possibilité d’associer une photo à votre tweet en prenant en compte les dimensions autorisées (375px par 435px pour un format web). Twitter garantit une haute qualité de service en  redimensionnant vos images pour leur donner leur aspect d’origine, lorsqu’elles ne respectent pas les dimensions.

Notez que les cartes photos sont les seules qui permettent au champ « titre » d’être vide et que  pour le moment, le service ne comprend aucune forme d’animation pour les photos.

Cette fonctionnalité est un atout pour ceux qui veulent faire partager des événements ou immortaliser un moment exceptionnel. Par exemple, si une entreprise organise l’anniversaire de ses 10 ans, elle peut créer sa carte photo pour mettre en évidence cet événement.

La carte player

la carte player

Elle permet de promouvoir des médias interactifs, aussi bien vidéo qu’audio et donne la possibilité aux utilisateurs de contrôler les contenus dans la présentation d’événements en live, par exemple.

Sachez que la carte player doit être testée dans différents contextes, applications, mobiles…voir : https://dev.twitter.com/docs/cards/preview

 

Mise en place

Pour que votre article ou contenu puisse apparaitre dans la carte, il est nécessaire de renseigner les bonnes balises meta :

 

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

le type de carte (summary / photo / player)

 

twitter:url

 

L’URL canonique du contenu de la pahge

twitter: title

 

Le titre du contenu

twitter:description

 

La description du contenu

twitter:image

 

L’url de l’image qui représente le contenu

 

Il semblerait que si Twitter ne trouve pas ses propres balises, ce sont celles d’OpenGraph qui sont récupérées.

 

Conclusion

Cela fait déjà un moment que Facebook propose cette fonctionnalité, et il était temps que Twitter se mette à la page.

Le service va certainement se développer et accroitre ses fonctionnalités. Sylvain Carle (évangéliste de Twitter) voit ce nouvel outil comme « une sorte de PJ attachée à un email ».

Vous l’aurez compris, l’adoption par Twitter de balises type OpenGraph l’a rendu encore plus indispensable et aucun site aujourd’hui ne pourra s’en passer. Microsoft annonce le support d’OpenGraph pour IE10,  ce qui renforce son importance. Par contre, il serait souhaitable que les services (Twitter, Facebook, Pinterest…) se mettent d’accord sur un standart, et que chacun n’y aille pas de son propre jeu de balises, sous peine de transformer notre code en grand n’importe quoi.

 

Ressources