Twitter card blues

Il existe un truc démoniaque pour permettre à vos lecteurs potentiels de vous identifier comme la personne fascinante que vous êtes : les Twitter cards… encore faut-il qu’elles fonctionnent.

Pour les mettre en place

Take courage ad par Vandalog, licence CC-BY-SA 2.0 disponible en partage sous FlickR
Take courage ad, photo de Vandalog, licence CC-BY-SA 2.0 disponible en partage sous Flickr

Condition : un peu de débrouillardise et du temps. Pour la question de temps, c’est fonction de votre niveau en informatique. Un pro vous torchera le tout en 30 minutes. Moi je n’y connaissais rien, ça m’a pris une demi-journée (première session) + 3 à 4 heures supplémentaires quand le système est parti en vrille. J’aurais tendance à conseiller aux personnes mettant en place un site pour la première fois de se familiariser avec leur nouveau jouet pendant quelques semaines avant de se lancer.

Vous devez également posséder votre propre nom de domaine. Les .overblog et autre espaces gratuits ne conviennent pas du fait que vous n’avez pas la main sur l’administration du site. Ensuite, il a trois choses à mettre en place.

Vos pages doivent inclure les infos nécessaires (champs Twitter, voir plus loin pour une petite explication de texte). Pour ça, le plus simple dans un environnement géré à l’aide d’un CMS (content manager system) reste d’utiliser des add-ons.

Le robot de Twitter doit trouver la permission d’aller chercher les infos nécessaires. Et il aime bien qu’on s’adresse à lui directement, en l’appelant par son petit nom. C’est au niveau du fichier robot.txt de votre site que ça se joue. Il doit inclure les lignes suivantes :

User-agent: Twitterbot
Disallow:

Localisation de la section développeur sur Twitter. Crédit illustration : capture d'écran, Geneviève Canivenc, licence CC-BY-NC-ND 2.0 (ou quelque chose du genre)
Localisation de la section Développeurs sur Twitter. Crédit illustration : capture d’écran, Geneviève Canivenc, licence CC-BY-NC-ND 2.0 (ou quelque chose du genre)

Enfin, une fois tout ceci en place, vous devez avoir obtenu la validation de votre nom de domaine par Twitter. La soumission se fait en ligne, au niveau de votre compte Twitter, à l’aide de l’adresse d’une page contenant un article (délai : de quelques minutes à quelques semaines (!?) après soumission). Le lien pour y accéder se situe en page d’accueil de votre compte, dans le dernier encadré de la colonne de gauche. Cliquez sur “développeurs”, respirez un bon coup si vous ne l’êtes pas, puis laissez-vous guider. La seule chose qui puisse poser problème, c’est que vous ne parliez pas anglais. Là forcément, ça se complique.

Dans la pratique

D’abord, le fichier robot.txt. Si votre site n’en dispose pas, aucune inquiétude. C’est simplement qu’il fonctionne avec un système un peu plus complexe (un htaccess.trucmuche). Pourtant rien n’empêche d’avoir un robot.txt. Créez un fichier dans le bloc note, collez-y les mentions qui vont bien, calez le tout à la racine du site (à l’aide d’un client FTP type Filezilla) et c’est parti. Pour info, le mien fonctionne nickel. Il indique juste aux robots de ne pas aller fouiller dans la poubelle et à Twitter que je lui donne ma bénédiction.

Ensuite, les infos. C’est là que ça peut se corser. Mon site est « fièrement propulsé par WordPress ». Suivant mon propre conseil, j’avais trouvé un widget nommé Seo by Yoast, qui fit le job pendant quelques temps.

Jusqu’au jour où…

Et puis catastrophe, mes Twitters cards ne fonctionnaient plus. Bidouillage divers et variés, je réussis à revenir à une version un peu bancale, sans image et blindée de « Ma Rédactrice ».

Twitter card "bancale". Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.
Twitter card “bancale”. Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.

Et puis hier, je me suis retroussé les manches. Mais POURKOUA. Ah, ça m’énerve.

Je vous passe les détails de mon combat épique. Sachez juste que Twitter ne va pas chercher les infos des cards en temps réel et que j’ai donc passé une blinde de temps à tester des trucs dont je ne pouvais pas voir le résultat en live.

Edit : j’ai récemment découvert une truande pour forcer Twitter à afficher la mise à jour d’une Twitter cards (voir en fin d’article).

Rien à faire, il a fallu aller mettre le nez dedans

Pour une raison qui m’échappe, l’option Twitter card de Seo by Yoast ne fonctionnait plus correctement dans mon environnement. Plus précisément, il manquait des méta-tags (à mes souhaits) destinés à Twitter dans le code de mes pages.

Petit guide empirique des métas-tags Twitter

Ça, c'est quand ça marche. Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.
Ça, c’est quand ça marche. Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.

Champ Twitter card = le type de card que Twitter doit afficher pour votre article. Chaque type nécessite une re-soumission auprès de Twitter.

Champ Twitter creator = le compte Twitter de l’auteur du billet. Apparaît sous le titre sous la forme “By pseudo @comptetwitter”.

Champ Twitter site = le compte Twitter auquel est affilié le site publiant l’article. Apparaît sous la forme de l’icône et du pseudo attaché au compte juste au dessus du titre de l’article;

Champ Twitter title = le titre de l’article.

Champ Twitter description = le petit texte qui apparaît dans le résumé. En fonction de votre environnement et des réglages du site, cela correspond à la méta description à renseigner dans l’interface de WordPress.

Champ Twitter domain = c’est le texte qui apparaît à la fin de l’article après la mention “View on…”

Champ Twitter image = lien de l’image qui apparaît sous la forme d’une miniature à côté du texte du résumé de l’article. Correspond à “l’image à la une” à renseigner dans l’interface de création des articles. Attention, cette image doit être dans un format accepté par Twitter et faire moins de 2Mo.

Tout ça pour finir avec un autre plugin

C'est-y pas beau la vie? Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.
C’est-y pas beau la vie? Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.

J’ai trouvé un autre plugin, JM Twitter card, qui lui (pour le moment en tout cas) fait ce que je lui demande. Il présente également le grand avantage d’être compatible avec Seo by Yoast, que je n’ai pas envie de jeter pour autant. Il me met les bonnes pratiques SEO (Search engine optimization) sous le nez lorsque je prépare un papier.

Joie !

Et bien merci Monsieur Julien Maury.

Rester philosophe

Ne me reste qu’à attendre que Twitter veuille bien mettre à jour les cards plus anciennes. Ah oui, juste un dernier détail. Ne JAMAIS inclure de guillemets dans votre méta-description. C’est interprété comme un signe d’arrêt et le texte se trouve tronqué.

Edit : THE truande ou comment forcer Twitter à afficher correctement les mises à jour d’une card.

1/ récupérer le lien d’une de vos pages

Exemple : http://www.ma-redactrice.com/plaidoyer-ibrahim-maalouf-en-bretagne/

2/ transformer cette URL

Il est possible par exemple d’ajouter une mention type “?x=test1” après le / final (ça fonctionne très bien, en tout cas pour WordPress, avec 2 3 4 5 etc.)

Ça nous donne : http://www.ma-redactrice.com/plaidoyer-ibrahim-maalouf-en-bretagne/?x=test1

3/ générer une URL courte

J’ai testé via bit.ly, c’est nickel.

Dans le cas de mon exemple : http://bit.ly/U1hDAX

4/ Tadam!

Twitter considère cette URL comme inconnue. Il va donc chercher ses infos afin de l’afficher. Seul hic, les deux pages étant considérées comme différentes, leurs stats ne sont pas agglomérées (retour en début d’article).

WordPress, c’est le bien. Cela permet même aux gens comme moi qui n’ont jamais écrit un bout de code de leur vie de faire leur ptite page rien qu’à eux presque1 comme ils l’entendent.

Site officiel de WordPress : wordpress.org

Présentation de Seo by Yoast : yoast.com/wordpress/seo

Présentation de JM twitter card : support.tweetpress.fr/jm-twitter-cards

1 Oh mais que vois-je, WordPress ajoute une capitale au milieu de son propre nom, et m’empêche de suivre les directives typographiques de l’Imprimerie nationale. Comme quoi, tout a des limites !

Image à la une : Why ? Crédit : BohemianDolls, en partage sous flickr (licence CC-BY-NC-ND 2.0).

Licence Creative Commons
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Pas de Modification 3.0 France.

Publié par

Geneviève Canivenc

1976 : naissance 1995 : un grand malade accepte qu'elle ait accès légalement à une voiture. 2005 : un groupe de grands malades lui confèrent le titre de docteur. 2012 : elle se lance en rédaction et plein de grands malades acceptent de lui faire confiance. Encore à venir : le meilleur.