Demander un devis

Pour demander un devis, contactez-nous en nous exposant vos besoins et attentes ainsi que vos deadline. Un devis vous sera renvoyé dans les plus brefs délais.

EN
+33 (0)6 13 79 84 50

Du Lundi au Vendredi - De 09h à 18h

Ajouter les twitter cards à vos sites web

oct. 24 2012

Depuis quelques semaines, une nouvelle fonctionnalité de Twitter a fait son apparition sur les sites web français. Pas vraiment répandu, son potentiel est extrêmement intéressant en terme de CTR sur vos tweets. En effet, grâce aux nouvelles "Twitter Cards", les tweets pointant vers votre site seront aggrémentés de plusieurs attribus : résumé, image, mention de votre compte twitter ...

Présentation des Twitter Cards

Les Twitter Cards sont un moyen simple pour Twitter de se mettre à niveau avec Facebook et son Open Graph et Google+ avec ses meta tags. C'est très bien pour eux, mais c'est encore un peu de code en plus pour allourdir nos pages et ralentir nos serveurs. Vivement que l'ensemble des sites se mettent à comprendre le Schema.org et arrètent de demander du code special sur nos sites web.

Ces tags permettent cependant une plus-value non négligeable sur l'affichage Twitter. A l'instar de Facebook ou Google+, vous aurez la possibilité d'afficher un titre, résumé et une vignette de présentation de votre article, mais ce n'est pas tout. Vous pourrez aussi inclure les informations concernant l'éditeur (par exemple le journal "Le Monde") et l'auteur de l'article (par exemple "Pierre Duchmol"). Et c'est là que l'on voit le potentiel de l'outil. Dès que quelqu'un parlera de votre article, votre compte twitter (et celui de votre employé) apparaitra dans l'encard spécial 'résumé'. C'est un nouveau moyen de convertir rapidement de nouveaux followers.

Mise en place

Pour la mise en place, rien de très difficile, il s'agit juste de rajouter des meta-tags (comme pour Facebook). Voilà par exemple ce que cela donne sur Presstor.fr.

Meta Tags Twitter

Il y a actuellement trois types de "cartes" possibles : résumé, image et vidéo. Je ne traiterai que de la première (la plus courante) les deux autres étant des extensions plus spécifiques. La carte vidéo nécessite aussi un approbation plus lourde de la part de Twitter qui ne vous intégrera pas si facilement si vous êtes un petit site.

Le code des Twitter Cards

Tout le code qui suit est à placer dans la section header de votre page html (entre <head> et </head>). La première chose à faire est de spécifier le type de carte que vous allez présenter à Twitter :

  • <meta name="twitter:card" content="summary"> : A remplacer par la carte que vous voulez afficher : summary, photo, ou player

 

Le code minimal

De la même façon vous devez reprendre la syntaxe ci-dessus et définir les différents éléments de votre article. Voici ci-dessous voici les différentes propriétés

Propriété Description Requis
twitter:card Le type de carte Twitter, à choisir parmi "summary", "photo", ou "player".

NON
(par défaut Twitter choisira "summary")

twitter:url L'URL canonique de votre article. OUI
twitter:title Le titre de votre page web OUI
twitter:description La description de votre article en 200 caractères maximum OUI
twitter:image L'URL d'une image vignette qui illustrera votre article NON

Attribution de paternité

En plus de ces informations obligatoires, vous pouvez rajouter différentes données pour attribuer la paternité du contenu à un auteur et/ou un éditeur. Ces données sont optionnelles.

Propriété Description
twitter:site @username du site hébergeant l'article (l'éditeur)
twitter:site:id Pareil que twitter:site au-dessus, mais au lieu de mettre votre @username vous mettez votre ID. A noter votre @username peut être modifié par vous, alors que l'ID est inchangeable. (je ne sais pas où le trouver, donc si vous savez, commentez)
twitter:creator @username de l'auteur de l'article.
twitter:creator:id ID Twitter de l'auteur

Voilà ce que ça donne :

Twitter Cards

Pour en savoir plus : https://dev.twitter.com/docs/cards

Comment activer ce service

Le seul soucis actuel des cartes Twitter est que la fonctionnalité est réservée aux personnes qui en font la demande. Cela changera dans le futur, mais pour le moment, une fois votre intégration faite et testée vous devez vous inscrire.

L'activation prend une à deux semaines. Lorsque celle-ci sera faite, dès qu'un tweet pointera vers votre site (via "raccourcisseur" d'URL ou non) les twittos verront ce genre de tweet (à noter le "Voir le résumé" en bas) :

Voir le résumé

 

Bonne intégration. N'hésitez pas à poser vos questions ci-dessous.

 

Mise en place sur les CMS

  1. Pour Wordpress : http://wordpress.org/extend/plugins/twitter-cards/
  2. Pour Drupal 7 : J'ai incrémenté un plugin qui marche avec Meta Tag à télécharger ici : Twitter Cards pour Drupal 7
  3. Pour Joomla à essayer ici pour J!2.5 : http://www.emren.net/projects/twitter-cards-plugin-for-joomla-2-5.html

Ajouter un commentaire