Twitter Cards : Ajoutez de la valeur à vos Tweets

par
   

Twitter-logoSi vous voyez de plus en plus le bouton « Voir le résumé » sous le partage d’un lien sur Twitter, c’est grâce aux « Twitter Cards ». Celles-ci vous permettent maintenant d’ajouter un petit résumé visuel à votre contenu pour y ajouter de la valeur lorsqu’il est partagé sur Twitter.

Le concept était déjà utilisé avec plusieurs grands sites de partage de contenu média comme YouTube et Instagram. Lorsqu’un lien d’un de ces sites est partagé dans un tweet, on peut voir le contenu directement sur Twitter sans quitter la plateforme. À présent, Twitter ouvre la porte à tous les sites qui désirent avoir une exposition plus riche sur le site de microgblogging, en leur permettant d’utiliser la même approche.

Ajoutez une expérience média aux Tweets de votre contenu

Comme dans le cas du code Open Graph de Facebook, les Twitter Cards ont comme objectif de faire augmenter le taux de clic de vos tweets en vous permettant de contrôler l’affichage de vos liens sur les médias sociaux.

Twitter Card1

Le site des développeurs de Twitter présente bien les 3 principaux avantages des Twitter Cards :

  1. Vous donne le contrôle de comment votre contenu apparait sur Twitter : Les Twitter Cards vous permettent de déterminer comment les liens de votre site web apparaissent sur Twitter, même si quelqu’un d’autre les publie!
  2. Amène du trafic vers votre site : Dans un océan d’information continue comme Twitter, toute façon de se démarquer est intéressante. Le fait d’avoir le bouton « voir le résumé », un titre accrocheur, une description sommaire et une image sous vos liens peut potentiellement inciter les gens à cliquer plus et visiter davantage votre site.
  3. Augmente votre nombre d’abonnés sur Twitter : Les résumés Twitter mentionnent toujours le compte Twitter original attaché au contenu partagé. Ainsi si quelqu’un partage un lien de votre site sans vous mentionner, ses abonnés verront tout de même votre nom Twitter dans le résumé et seront incités à vous suivre.

De plus, les Twitter Cards peuvent apparaitre sous 3 formes selon le type de contenu partagé :

  1. Cartes de résumé : Les cartes utilisées par défaut pour tout contenu ou article d’un site web (titre, description et photo de la page)
  2. Cartes de photos : Les cartes utilisées pour des contenus photo comme dans le cas d’Instagram ou de 9Gag par exemple
  3. Carte « player » : Les cartes utilisées pour des contenus vidéo comme dans le cas de YouTube ou de Vimeo

Twitter Card2

D’ailleurs, un même site web peut utiliser plusieurs types de cartes s’il offre différents types de contenus.

Comment ajouter les Twitter Cards à votre site web

L’ajout des Twitter Cards est relativement simple. Il suffit d’ajouter du code HTML à votre site web et de remplir un formulaire de participation sur Twitter.

Le code est sous forme de balises meta name spécifiques pour Twitter. Identifiez les balises type, site, URL, title, description et image sur vos pages pour offrir toute l’information nécessaire pour construire vos Twitter Cards. Voici l’exemple officiel de Twitter pour une carte résumé :

TwitterCard tags

Pour plus de détails, suivez la procédure détaillée dans la documentation du site deTwitter Developers.

Si vous utilisez WordPress pour votre site, rien de plus simple que d’utiliser un des deux plug-ins suivant pour l’implantation des cartes : WordPress SEO Plugin ou Twitter Cards.

Finalement, si vous avez déjà implanté les tags Open Graph sur votre site web, inutile d’ajouter du code, car Twitter peut lire Open Graph et va pouvoir créer vos résumés à partir de ce langage.

Testez et participez

Une fois l’installation faite, testez le code à l’aide de l’outil de Preview pour vous assurer qu’il fonctionne. Dès que c’est fait, il vous suffit de prendre cinq petites minutes pour remplir un formulaire de participation, l’envoyer à Twitter, et le tour est joué.

Dans notre cas, les Twitter Cards ont été acceptées et fonctionnelles dans l’espace de 48 heures.

À vous de jouer maintenant, bon codage!

Sources:

COMMENTAIRES

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>