Comment améliorer la visibilité de son site sur Twitter grâce aux Twitter cards

Il y a quelques mois, Twitter a mis en place un système permettant d’afficher un résumé des contenus partagés directement dans les tweets. A l’instar de Facebook, des résumés d’articles, des images et des vidéos peuvent désormais être directement intégrés sur Twitter. Ces Twitter Cards ne s’affichent pas automatiquement, si vous souhaitez que vos contenus bénéficient de cette mise en avant, quelques manipulations sont nécessaires. Suivez le guide…


Avant de commencer, sachez qu’il existe 3 sortes de Twitter Cards :

1 : La carte résumé qui permet de visionner un apercu d’une page via son titre, une courte description et une image (exactement le même procédé qu’un partage sur Facebook). L’avantage est qu’à chaque partage votre compte Twitter sera identifié automatiquement comme la source, cf. exemple pour le compte de Webmarketing & co’m.

Carte Twitter

2 : La carte photo qui permet d’afficher une photo directement dans le flux Twitter comme ceci :

photo card twitter

3 : La carte vidéo qui reprend le même type d’affichage mais avec une vidéo.

Pour afficher les Twitter Cards pour les liens provenant de votre site, 2 actions sont nécessaires :

1 : Intégrer les balises Twitter sur votre site ;

2 : Soumettre votre site à Twitter pour validation.

Pour commencer rendez-vous sur la rubrique développement du site de Twitter, toutes les explications vous seront alors données pour implémanter les balises meta.

Pour exemple, nous allons étudier le cas de la carte résumé qui est celle pouvant s’appliquer à n’importe quel site.

Etape 1 : Spécifier les metas Twitter pour chacune de vos pages

Pour afficher une carte résumé, vous allez devoir intégrer cette balise dans le code source de votre page :

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

Vous pouvez ensuite indiquer le compte Twitter à rattacher à ce contenu comme ceci :

<meta name="twitter:site" content="@MonCompteTwitter">

Puis le lien vers lequel renvoyer (soit l’url de la page en cours dans la plupart des cas) :

<meta name="twitter:url" content="http://www.../mon-article.html">

Le titre et la description à afficher :

<meta name="twitter:title" content="Le titre de ma page">
<meta name="twitter:description" content="La description de ma page">

Et en fin l’image :

<meta name="twitter:image" content="http://www.../images/mon-image.jpg">

Grâce à ces 5 balises, votre site est prêt à s’afficher pleinement sur Twitter. Pour un blog WordPress ou tout autre site géré via un CMS, vous pouvez rapidement rendre votre site compatible en insérant dynamiquement les différentes données dans les meta. A noter que pour WordPress un plugin existe.

Pour résumer voici les 5 balises qui devront être présentes sur chacune des pages de contenus :

<meta name="twitter:site" content="@MonCompteTwitter">
<meta name="twitter:url" content="http://www.../mon-article.html">
<meta name="twitter:title" content="Le titre de ma page">
<meta name="twitter:description" content="La description de ma page">
<meta name="twitter:image" content="http://.../images/mon-image.jpg">

Pour les autres types de cartes, vous pouvez consulter la documentation Twitter en cliquant ici.

Etape 2 : Soumettre son site pour validation auprès de Twitter

Une fois que les metas sont installées sur votre site, Twitter vous propose un outil pour vérifier l’affichage de vos pages. Rendez-vous ici pour vérifier que tout s’affiche comme vous le souhaitez.

Une fois que tout est au point, vous devez remplir le formulaire de soumission proposé par Twitter ici.

Une fois votre site soumis, vous devez attendre un retour de Twitter, généralement sous 2/3 jours. Si votre site est validé, dés qu’une de ses pages sera partagée, les cartes s’afficheront donnant ainsi une meilleure visibilité à votre site et à votre compte Twitter.

Qu’en pensez vous ? Connaissiez vous les cartes Twitter ?

Auteur : Sylvain Lembert : Depuis 2004 dans le webmarketing, j’ai pu mettre en place des campagnes e-marketing sylvaindans des domaines variés. J’ai participé aux référencements de marques reconnues et mis en place la stratégie de communication on-line d’un assureur. J’ai également élaboré une stratégie de search marketing au niveau européen et été responsable de l’acquisition via Facebook pour un groupe de média social. Je suis aujourd’hui consultant pour Webmarketing & co’m, l’Agence marketing du blog du même nom. Vous pouvez nous suivre sur Twitter, Facebook ou Google +, au plaisir d’échanger sur ces réseaux :).

  • Max

    5 ou 6 balises ?
    Avec la balise
    ça fait 6

  • Thomas

    Et pour faciliter la vie des utilisateurs WP, il y a de très bons plugins pour mettre les balises en auto sur les articles. Par exemple http://wordpress.org/extend/plugins/jm-twitter-cards/installation/

  • Ines G.

    Mais.. mais, les twitter cards pour Instagram ont été désactivées depuis déjà de nombreuses semaines ;)

  • Sylvain

    @Max : 5 balises dans l’exemple, par contre il y-en a d’autres mise à disposition par Twitter : cf leur documentation en ligne.
    @Thomas : effectivement, j’avais citer un plugin dans l’article, mais il y-en a d’autres :)
    @Ines : Twitter n’a pas encore mis sa doc à jour…

  • Fay

    Bonjour,
    Et si je veux le faire sur un blog géré par blogger, je dois entrer ces balises dans chaque article publié ?

  • Alexis

    Seul la balise twitter:site suffit lorsqu’on a déjà les balise Open Graph de Facebook :) Il est écrit dans la doc que Twitter détecte les balise OG, ça évite les ligne inutiles !

  • Chrys

    Bonjour, article très intéressant !! Merci, cependant est t’il possible d’insérer ce systeme dans un CMS tel que SPIP ?
    Si oui, comment ?
    J’ai bien du mal, merci