Préparer son blog pour les cartes Twitter

Twitter limite ses messages à 140 caractères, tout compris. Si vous voulez évoquer l’un de vos articles sur le réseau social, le lien vers l’article en question exploite déjà une vingtaine de caractères. Pour décrire le sujet ou vanter ses mérites, il ne vous reste dès lors qu’une vingtaine de caractères au mieux. C’est souvent trop peu et on est obligé de n’associer que le titre de l’article au lien original, ce qui n’est pas toujours très vendeur.

Il existe pourtant une meilleure solution. À condition de configurer correctement son blog, on peut donner à Twitter quelques informations supplémentaires pour chaque lien et les afficher en-dessous du tweet. Cette fonction, nommée « Twitter Cards » par le réseau social, est assez simple à mettre en place et elle vous permettra d’obtenir une meilleure visibilité. Sur le site et dans les logiciels officiels, on pourra obtenir quelque chose comme ça :

Une carte Twitter en action : tous les liens du blog À voir et à manger auront droit à cet aperçu avec une image et un résumé, ce qui offre plus de place dans le tweet pour présenter l'article.
Une carte Twitter en action : tous les liens du blog À voir et à manger auront droit à cet aperçu avec une image et un résumé, ce qui offre plus de place dans le tweet pour présenter l’article.

Utiliser un plugin

C’est évidemment la méthode la plus simple et vous n’aurez que l’embarras du choix. Les plugins chargés de rendre votre blog compatible avec les cartes Twitter sont nombreux et peu variés, mais veillez à en choisir un qui vous laisse complètement la main. Je n’en ai testé aucun, mais celui-ci est développé par un français et a plutôt bonne réputation. Si vous utilisez déjà le célèbre plugin WordPress SEO by YOAST, une option active aussi les cartes Twitter.

Jetpack, le plugin de WordPress.com, sait lui aussi gérer les cartes Twitter. Activez la fonction « Publicize » pour que le module insère automatiquement les éléments nécessaires aux cartes. C’est pratique, mais vous n’aurez pas le choix du propriétaire du blog et le plugin fera systématiquement sa publicité à chaque tweet et s’attribuera le mérite de la publication. Au passage, c’est la même chose sur WordPress.com : tous les tweets partagés sont attribués au réseau de blog et non à votre propre blog.

Modifier l’en-tête du blog

Pour éviter d’installer un plugin supplémentaire et pour garder un contrôle total sur le processus, le mieux est d’ajouter manuellement ce qui est nécessaire dans le header du thème de votre blog. C’est assez simple à condition de suivre ces quelques consignes.

Le code doit être ajouter dans l’en-tête de votre blog, c’est-à-dire dans le fichier header.php de votre thème. Pour simplifier les choses, on part du principe ici que vous savez modifier proprement ce fichier en créant un thème dérivé du vôtre (child theme) ou bien en modifiant votre propre thème. Juste après la balise <head>, vous devrez insérer quelques balises <meta> qui permettront au réseau social d’afficher plus d’informations sous chaque tweet.

Voici les balises indispensables pour que votre bloc soit compatible avec les cartes Twitter. Certaines ne changent jamais et peuvent être remplies avec du code HTML statique, mais la majorité des données doit être remplie en fonction de chaque article, en utilisant un peu de PHP et des fonctions de WordPress.

L'ensemble du code qui active les cartes Twitter sur mon blog personnel.
L’ensemble du code qui active les cartes Twitter sur mon blog personnel.

Dans le détail, voici ce que j’ai fait pour mon blog personnel. Naturellement, il ne s’ait que d’un exemple, il faudra adapter le code selon vos besoins.

  • twitter:card : plusieurs options sont proposées par le réseau social. Si vous utilisez systématiquement au moins une image dans vos articles et si vous utilisez des images suffisamment grandes, je recommande le mode summary_large_image qui affiche une grande image au-dessus du titre et du résumé (cf l’exemple plus haut).
  • twitter:site : le compte Twitter associé au site. C’est le nom d’utilisateur et l’avatar du compte en question qui apparaîtront avec la carte et c’est précisément cette information que Jetpack ne permet pas de changer.
  • twitter:title : le titre de l’article. Avec WordPress, on peut utiliser la fonction wp_title que j’ai simplement modifiée pour supprimer le nom du site ajouté automatiquement dans mon cas. L’information est redondante, puisque le nom du compte Twitter est aussi le nom du site. Dans mon cas, j’ai préalablement mémorisé le nom de la page dans une variable PHP nommée $nomPage que je coupe avec la fonction substr.
  • twitter:url : l’adresse de l’article à partager. Puisqu’il s’agit d’un blog WordPress, on pourrait utiliser la fonction the_permalink();, mais comme je l’indiquais dans un précédent article, elle ne fonctionne bien que sur les articles. Pour récupérer l’adresse de toutes les pages, même les archives générées automatiquement par le blog, je préfère la petite fonction PHP home_url( $wp->request );.
  • twitter:image:src : puisque l’on a choisi une carte Twitter avec image, il faut lui indiquer laquelle. À condition d’associer à chaque article une Image à la Une, on peut utiliser la fonction de base de WordPress, par exemple comme ceci : 
    wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );

    Pensez bien à remplacer thumbnail_size par la valeur qui correspond chez vous, ou bien enlevez complètement le paramètre pour envoyer non pas une miniature, mais l’image complète. Dans mon exemple, j’ai utilisé une variable pour enregistrer l’image, puisque je veux une image différente pour la page d’accueil et une image spéciale pour les pages d’archive.

  • twitter:description : dernier élément indispensable, le résumé qui sera affiché sous le titre de l’article. Là encore, j’ai enregistré la valeur PHP dans une variable au préalable pour gérer les cas particuliers (page d’accueil, archives), mais pour les articles on peut utiliser la fonction WordPress get_the_excerpt();. Pour éviter les problèmes, j’ai ajouté une fonction PHP qui retire tous les éléments HTML pour envoyer du code brut à Twitter. Dans mon cas, il a fallu en plus couper le résumé au moment où un « Lire la suite » était ajouté par le thème.

Voici l’intégralité des balises nécessaires pour les cartes Twitter. Si votre blog est associé à une application mobile, vous pourrez ajouter d’autres éléments, mais ce sont des paramètres optionnels. Pour ce que soit plus clair, voici le code PHP qui récupère toutes les informations en amont, encore une fois en précisant bien qu’il s’agit de mon cas et non d’un élément à réutiliser tel que.

Le code PHP utilisé sur mon blog pour obtenir les informations liées à chaque article.
Le code PHP utilisé sur mon blog pour obtenir les informations liées à chaque article.

Même si je recommande de ne pas copier/coller mon code, puisqu’il ne fonctionnera pas dans votre cas, vous pouvez le retrouver à cette adresse. Cela vous donnera une base de départ pour votre propre blog.

Activer les cartes Twitter

Une fois que votre blog est prêt, il faut encore activer les cartes Twitter sur le réseau social. Pour cela, rien de très difficile : il faut se rendre à cette adresse et se connecter avec le compte utilisé pour le partage. Choisissez ensuite le type (ici, « Summary Card Large« , mais on pourrait choisir autre chose) et il ne restera plus qu’à valider les données en utilisant une adresse au hasard. Vérifiez que tout va bien — tout doit être vert à gauche — et vous pourrez demander à autoriser votre blog.

twitter-card-validator

Le réseau social signale jusqu’à deux semaines de délai avant validation du blog. D’après mon expérience, il faut moins d’une heure pour que ce soit fait, et on voit immédiatement le résultat sur Twitter. C’est assez simple et ça met votre contenu bien en avant : une astuce bien pratique !

Publicités

2 commentaires sur “Préparer son blog pour les cartes Twitter

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s