Guide : Comment configurer les Twitter Cards sous WordPress

L’une des forces de Twitter comparativement aux autres plateformes 2.0 est son habilité indéniable à générer du trafic rapidement, vers un site internet dont le lien sera partagé sur la communauté par des utilisateurs possédant les mêmes intérêts. Simplement dit, déposez le bon lien au bon moment devant la bonne personne, et vous avez un fort potentiel de générer un clic. En effet, nombreux sont les blogueurs ayant placé Twitter en tête de liste comme outil pour véhiculer une idée en ligne et en récolter les fruits de son partage. Mais c’est souvent plus facile à dire qu’à faire, alors que la plupart des tweets en ligne sont rarement consultés et/ou repartagés, faute de visibilité ou de créativité dans le message. L’une des fonctionnalités de Twitter qui permet justement de maximiser la visibilité d’un tweet est la fameuse carte Twitter (Twitter card en anglais). Rarement utilisée à ce jour, la carte Twitter facilite l’interaction avec le message, tout en incitant un meilleur taux de clic au niveau du tweet. Cet article présentera donc une procédure toute simple démontrant comment le blogueur peut facilement installer et configurer les cartes Twitter sous WordPress, et ainsi hausser la visibilité de ses articles.

Présentation des cartes Twitter

La carte Twitter est l’équivalent des rich snippets sous Google, c’est-à-dire un tweet « enrichi », qui peut posséder des éléments médias pouvant venir bonifier la présentation visuelle du tweet. Quelques exemples : l’ajout d’une photo directement dans le tweet, une vidéo, ou un sommaire de l’article en question. À ce jour, Twitter permet l’intégration de 8 types de cartes différentes : 1- La carte avec résumé  1-carte-twitter Ce modèle présentera un sommaire de votre article, avec une photo de taille moyenne accompagnant l’article. On veut inciter l’utilisateur à cliquer le tweet pour en découvrir plus. 2- La carte avec résumé + grande image 2-carte-twitter Même modèle que le précédent, par contre avec une image plus large. Il s’agit probablement de ma carte préférée, à condition bien sûr d’utiliser une image visuellement riche et pertinente. Il s’agit du modèle idéal pour les sites de contenu désirant placer l’emphase sur l’image accompagnant l’article. Fast Company, Inc.com et The Next Web utilisent ce format, entre autres. 3- La carte avec photo  3-carte-twitter La carte Twitter avec photo. À utiliser si votre message passe par le visuel. Par exemple, une publicité, ou une photo particulière. Oreo est une marque connue pour utiliser ce format. 4- La carte avec galerie de photos (cool!) 4-carte-twitter La carte Twitter qui affiche jusqu’à 4 photos dans le même extrait. Parfait pour les détaillants désirant afficher une dernière collection, ou encore un journal comptant une série d’images reliées à l’article. 5- La carte avec l’application mobile ios_app Très simple ici, on fait la promotion d’une application mobile. 6- La carte avec l’application mobile + deep linking 6-carte-twitter Même concept, cependant avec le principe du deep linking pour lier l’information directement dans l’application mobile. 7- La carte avec lecteur vidéo 7-carte-twitter La carte Twitter qui contient un vidéo : idéal pour les brands désirant présenter une expérience interactive riche, par exemple les ligues sportives (MBL et NHL) avec un clip d’un récent fait saillant sportif. 8- La carte avec présentation d’un produit 8-carte-twitter Finalement, la carte avec le produit Twitter, qui s’adapte bien sûr très bien avec les sites de commerce électronique. Les exemples ici haut vous ont donné l’eau à la bouche ? Probablement, alors regardons maintenant comment vous intégrer les cartes Twitter à votre blogue, et ainsi enrichir vos articles lorsque ceux-ci sont partagés sur la communauté. J’ai choisi de baser cet article ainsi que la procédure sur la plateforme WordPress, et ce, pour deux raisons : 1)   Il s’agit de ma plateforme de prédilection, utilisée à chaque occasion possible lorsque je lance un nouveau blogue. 2)   Le support en terme de modules disponibles ainsi que l’entraide sur WordPress.org est tout simplement phénoménal, ce qui me fait encore plus aimer le produit. Cela dit, la procédure pour installer les cartes Twitter comprend deux étapes principales : l’installation du module, et la validation de votre site auprès de Twitter.

Étape 1 – Installer le module JM Twitter Cards

Pour l’intégration des cartes Twitter, vous avez le choix d’insérer la quinzaine de lignes de codes HTML à  la mitaine… ou utiliser un module existant. ;) Comme je mentionnais ici haut, l’une des forces de WordPress est le volume impressionnant de modules disponibles, et dans le cas qui nous intéresse, la possibilité d’installer un module pour gérer l’intégration des cartes Twitter. Pour ma part, je vous recommande le module  JM Twitter Cards, qui permet de personnaliser la carte Twitter selon votre article. Ainsi, dans certains cas vous désirerez utiliser le sommaire avec petite image, ou encore la présentation du produit. Premièrement, on installe le module JM Twitter Card à partir de plugins/add new, sous votre console WordPress : procedure-twitter card-1 On click sur « Add new », et on cherche pour le plugin « JM Twitter Cards » : procedure-twitter card-2 Après avoir sélectionné « Install Now », on confirme l’installation en cliquant sur « Activate Plugin » procedure-twitter card-3 Ensuite, on accède au module par le biais du menu de gauche, et on configure les paramètres de base : procedure-twitter card-4 Il faut d’abord choisir votre type de carte entre Résumé, Résumé + Large Image et Photos (Nous verrons plus tard comment avoir plus de choix). Ensuite, on insère le nom de notre/nos comptes Twitter, soit celui perso et celui associé au site, si ceux-ci sont différents. Concernant l’option d’ajouter un champ Twitter au profil, cela s’applique si votre site possède plus d’un auteur. Je vous recommande également d’activer la META box un peu plus bas dans la même fenêtre, ce qui permettra de modifier individuellement les cartes selon l’article en question : procedure-twitter card-5 Suite à l’activation, vous remarquerez une nouvelle section dans la fenêtre de vos articles, avec options personnalisées. Pratique donc pour enrichir votre Tweet selon le goût du jour ;-) procedure-twitter card-777 Si vous désirez vérifier que les tags sont bien implantés sur votre site, simplement consultez la source HTML de votre article, et vous devriez voir ceci : procedure-twitter card-98 Ceci conclut la première étape, soit la configuration du module sur WordPress. Passons maintenant à la deuxième étape, soit l’obtention du consentement pour Twitter pour utiliser les cartes Twitter.

Étape 2 – Obtenir la validation de Twitter

La deuxième étape se résume à cette simple ligne : pour pouvoir utiliser les cartes Twitter dans l’optique d’enrichir vos Tweets, vous devez tout d’abord obtenir l’accord de Twitter. En effet, Twitter désire tout de même appliquer un certain filtre éditorial, et vérifier que les sites qui utiliseront les cartes sont 100% légaux, ou encore n’utilisent pas un contenu jugé offensant, par exemple de la pornographie, sentiment raciste ou autre. La plupart des sites qui seront refusés au niveau des cartes Twitter s’en douteront probablement bien avant. Donc, on visite l’URL suivante : https://dev.twitter.com/docs/cards/validation/validator Vous choisissez un premier modèle de carte sur la page suivante, un choix important, puisque Twitter valide individuellement au modèle de carte, et non tous à la fois. procedure-twitter card-6 Ensuite vous entrez tout simplement votre site dans la boîte d’URL, et vous demandez votre autorisation de pouvoir utiliser les cartes, à l’aide du bouton « request approval ». procedure-twitter card-7 Habituellement, les demandes que j’ai effectuées ont été acceptées en moins de 24 heures. Cependant lorsque l’on consulte les forums de support sous Twitter, il semble que le délai soit encore plus long pour certains. Vous devrez vous connecter sous votre compte Twitter pour placer votre demande, donc possiblement que votre historique à titre d’utilisateur jouera en votre faveur, du moins si vous êtes un membre actif. Finalement, une fois votre demande approuvée, vous recevrez un courriel vous mentionnant que votre format de carte est prêt : procedure-twitter card-8 Bravo! Vous êtes maintenant prêt à intégrer les cartes Twitter sur votre blogue WordPress, et ainsi enrichir vos tweets au bénéfice de la communauté, et bien sûr pour le vôtre, au niveau du trafic additionnel que ceux-ci génèreront :-D Bon tweets!  

Vous avez apprécié cet article ?

Inscrivez­-vous à l’infolettre DCHQ afin de recevoir en primeur les derniers articles de ce blogue.

16 Comments

  1. J’aime bien votre article que je trouve informatif et bien détaillé, tout autant que vos articles précédents d’ailleurs :)

    Je suis tout à fait d’accord avec vous, Twitter est excellent pour la génération de traffic (et d’opportunités d’affaires). En réalité c’est ma source N°1 de traffic vers mon blog http://www.redactrice-web.ma
    Personnellement j’utilise un widget twitter mais je dois dire que les twitter cards présentées dans cet article sont très attrayantes.

    Pour être franche, avoir un compte twitter + un widget sur ou une twitter card sur un site est un bon pas, mais pas suffisant. Il faut partager du bon contenu, interagir et engager des conversations avec ses followers, publier aux heures qui permettent le plus de visibilité et le plus d’interactions, utiliser des outils tierces qui maximisent le potentiel de twitter etc.

    Si vous voulez savoir comment j’utilise twitter je vous invite à consulter mon profil @redactriceweb_
    A bientôt 

    Répondre
  2. C’est une fonction bien sympa.

    J’ai installé le plug-in, pas de soucis. J’ai fait la demande sur Twitter, réponse en une heure ou deux. Ok.

    Par contre, quand je fais un Tweet vers l’une de mes pages, les cards n’apparaissent pas. Cela devrait bien être automatique ?

    J’ai vérifié, et j’ai bien les balises meta dans mon header …

    Une idée ?

    Répondre
    • As-tu essayé pour un nouvel article ? Je crois que le « cache » de Twitter prend vraiment du temps pour se mettre à jour. Exemple si Twitter a déjà vu ton article sans la carte, cela risque de prendre du temps pour rafraichir le résultat et inclure la carte.

      Par contre, cela devrait fonctionner presque immédiatement avec un nouvel article.

      Répondre
  3. J’ai le meme problème que stéphane, tout est validé et approuvé mais le résumé ne s’affiche pas @vivrelehandicap.
    Merci d’avance.

    Répondre
  4. Bonjour,

    Je sais pas si il en est de même pour vous, mais que ce soit pour mes site ou celui-ci, les twitter card apparaissent bien sur l’appli iphone mais pas sur pc?

    Répondre
  5. Bonjour , très utile votre article .Cependant existe-t-il un plugin pour partager une image d’un article wordpress ,surtout l’image a la une ? qu’elle s’affiche directement dans le tweet ,comme un peut Facebook quand t-on partage un un article .merci

    Répondre

Laissez un commentaire

10 Shares
Share
Tweet
Share
+110