Twitter Cards : comment doter son site de tweets étendus

Le site de microblogging ouvre officiellement son nouveau service. Lors de la reprise d'une URL dans un tweet, il permettra aux sites Web de pousser des contenus associés : titre, description, voire photos, vidéos...

Twitter a ouvert officiellement son service de Twitter Cards. Un dispositif qui permet aux sites partenaires du réseau de microblogging de compléter leurs URLs reprises dans les tweets de contenus enrichis. Avec la possibilité de publier titre, chapo, auteur, mais aussi contenus de type image, vidéo...

Le réseau social vient de publier un long tutoriel pour expliquer comment procéder. Les sites intéressés peuvent dès à présent s'inscrire à un programme pilote lancé par Twitter

twitter cards
Exemple de Twitter Card adaptée aux PC et terminaux mobiles. © Twitter

Trois types de carte sont proposés par Twitter : le Résumé (qui intègre titre, description, vignette et attributs de l'auteur), la Photo (une photo tweetée), le Lecteur multimédia (un contenu vidéo ou audio tweeté).

Pour que ces contenus enrichis soient intégrés à Twitter, le site doit spécifier dans l'entête (HEAD) de ses pages Web le type de carte correspondant, par le biais de balises (proches de la sémantique OpenGraph de Facebook). L'objectif étant d'indiquer à Twitter lorsque l'URL est postée dans un tweet la manière d'afficher les descriptions, et autres données de la page. 

 <meta name="twitter:card" content="summary">
Twitter propose une série de propriétés à insérer dans les balises META des pages pour spécifier les contenus (titre, description...), la publication ou pas du nom de leur auteur et du nom du site, ainsi que la dimension des éléments multimédia (lecteur audio/vidéo ou photo).
Le réseau social impose un certain nombre de limitations. Le nombre de signes du bloc de description est notamment limité à 200, la dimension des photos ne doit pas dépasser 435px * 375px (pour le Web), et les images de player 350px x 196px (pour le 16:9).

Propriétés générales des Twitter Cards
PropriétéDescription
Source : Twitter
twitter:cardLe type de carte : "summary", "photo" ou "player".
twitter:urlL'URL canonique du contenu de la carte
twitter:titleLe titre du contenu tel qu'il doit apparaître dans la carte.
twitter:descriptionUne description du contenu de 200 caractères maximum.
twitter:imageL'URL de l'image associée au contenu.

Réseaux sociaux / CMS