Ajouter une Twitter Card au thème Blogger pour améliorer sa visibilité sur X

Les Twitter Cards (appelées maintenant X Cards) permettent de rendre vos liens plus attractifs sur X (ex Twitter), en affichant une grande image et des informations clés. Malheureusement, Blogger ne les gère pas nativement. Voici un guide précis pour ajouter cette fonctionnalité à votre blog et augmenter sa visibilité.

Il s'agit simplement d'introduire quelques lignes de code HTML dans votre thème Blogger (juste après l'ouverture de la balise <head>) et désormais tous vos articles de blog auront leur Twitter Card. Ne craignez rien si vous n'avez jamais fait ce genre de manipulations, je vous explique comment faire, pas à pas.

Prérequis

Pour que le résultat soit satisfaisant sur X, il est est nécessaire que les articles tweetés aient une image et une méta description de recherche.

Introduction du code de la Twitter Card dans le thème Blogger

Cliquez sur le bouton 'Copier' ci-dessous.

  
<!-- X Card (ex Twitter Card) -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl + "?4362984378"' name='twitter:image'/>
<b:else/>
  <meta expr:content='data:blog.blogspotFaviconUrl + "?4362984378"' name='twitter:image'/>
</b:if>

Dans la page d'accueil de Blogger, à droite du bouton 'Personnaliser' se trouve un menu déroulant.

Dans le menu principal de Blogger, sélectionnez 'Thème', puis cliquez sur le menu déroulant à droite de 'Personnaliser'.
Sélectionnez 'Sauvegarder' afin de faire une sauvegarde, ce qui vous permettra de revenir en arrière en cas de problème, puis cliquez sur 'Télécharger'. Blogger copie alors le thème dans le répertoire 'Téléchargements' de votre ordinateur.
Revenez sur le menu déroulant à droite de 'Personnaliser' et sélectionnez 'Modifier le code HTML'. Vous êtes maintenant dans l'éditeur HTML de votre thème Blogger.

Appuyez sur les touches 'Ctrl' et 'F' et tapez '<head>' dans la barre de recherche qui est apparue. L'éditeur va surligner le mot <head> qui est très haut dans le code.
Cliquez juste à droite du mot <head> et tapez la touche 'Entrée' pour ajouter une ligne.

Appuyez sur les touches 'Ctrl' et 'V' pour coller le code. Les lignes de la Twitter Card vont s'ajouter.

Cliquez en haut à droite sur l'icône 'Enregistrer' qui représente une disquette informatique. Blogger confirmera la mise à jour avec un message.
Quittez l'éditeur avec la flèche 'Retour' en haut à gauche.

Dans le cas peu probable où l'éditeur affiche un message d'erreur, quittez-le et reportez-vous au chapitre 'Restauration du thème Blogger en cas de problème'.

Vérification du bon fonctionnement de la Twitter Card

La première chose à faire est de contrôler que votre thème Blogger fonctionne visuellement toujours bien. Affichez votre blog dans votre navigateur et vérifiez son affichage qui n'aura normalement pas été modifié. En cas d'anomalie, reportez-vous au chapitre 'Restauration du thème Blogger en cas de problème'.

Ensuite il faut vérifier le bon fonctionnement des Twitter Cards en passant par l'outil X de validation des Twitter cards, puis en simulant la création d'un tweet contenant simplement l'URL d'un de vos articles :

Dans votre navigateur affichez un article de votre blog. Copiez son URL qui apparait tout en haut du navigateur dans la barre d'adresse.
Cliquez sur ce lien qui mène à l'outil X de validation des Twitter cards.

Copiez l'URL de votre article dans la zone de texte qui est apparue, puis cliquez sur 'Preview card'.
L'outil analyse votre page et affiche le résultat dans la zone 'Log'. Le dernier message affiché va être 'INFO: Card loaded successfully'. Notez que l'outil X de validation peut afficher des erreurs mineures sans impact visible sur la prévisualisation dans X.

Allez dans X et commencez la création d'un Tweet en collant seulement l'URL de votre article. La prévisualisation va montrer l'image de votre article avec son titre. C'est gagné !

Restauration du thème Blogger en cas de problème

Si un problème est survenu dans le processus d'introduction du code ou si le blog ne semble plus fonctionner comme avant, faites une restauration du thème grâce à la sauvegarde que vous venez de faire :

Dans le menu principal de Blogger, sélectionnez 'Thème', puis cliquez sur le menu déroulant à droite de 'Personnaliser'.
Sélectionnez 'Restaurer' puis 'Importer.
Sélectionnez le répertoire 'Téléchargements' puis sélectionnez le premier fichier dont le nom commence par 'theme-' suivi d'un grand nombre et qui se termine par '.xml'
Blogger indique 'Restauration du thème' puis 'thème restauré'.
Votre blog est revenu comme avant, ce que vous pouvez vérifier en l'affichant dans votre navigateur.

Explications du contenu du code (et de ce qu'il manque !)

Selon la documentation de X sur les Cards (anciennement Twitter Cards), voici les seules propriétés attendues pour le type "summary_large_image" :

twitter:card = Obligatoire. Forcément “summary_large_image”.
twitter:site = Facultatif. Nom d'utilisateur (@username) sur X.
twitter:title = Obligatoire. Titre concis pour le contenu de la page.
twitter:description = Facultatif. Description qui résume de manière concise le contenu tel qu'il convient à la présentation dans un Tweet. Il ne faut pas réutiliser le titre comme description, ni utiliser ce champ pour décrire les services généraux fournis par le site Web.
twitter:image = Facultatif. URL vers une image unique représentant le contenu de la page. Il ne faut pas utiliser d'image générique telle que le logo du site Web, la photo de l'auteur ou toute autre image qui s'étend sur plusieurs pages.
Les images de cette carte prennent en charge un rapport hauteur/largeur de 2:1 avec des dimensions entre 300 x 157 et 4 096 x 4 096 pixels. Les images doivent avoir une taille inférieure à 5 Mo.
Les formats JPG, PNG, WEBP et GIF sont pris en charge. Seule la première image d'un GIF animé sera utilisée. SVG n'est pas pris en charge.
twitter:image:alt = Facultatif. Description textuelle de l'image illustrant la nature essentielle de l'image, recommandée pour améliorer l'accessibilité des utilisateurs malvoyants. Maximum 420 caractères.

Le code proposé n'est pas en mesure de fournir le nom d'utilisateur sur X (twitter:site), ni la description de l'image (twitter:image:alt) qui ne sont heureusement pas obligatoires.
Le paramètre '?4362984378' est ajouté à l'URL de l'image, ce qui force le robot de Twitter, quand il passe par là, à explorer et rafraîchir l'image, selon la documentation X Developer Platform. C'est utile en cas de changement d'image bien sûr.

Notes

L'outil X de validation des Twitter cards ne génère plus de prévisualisation depuis 2022, mais reste cependant un outil de diagnostic de référence. Le seul moyen officiel pour prévisualiser est de commencer à créer un tweet sans aller jusqu'à le poster, avec le lien de la page et d'attendre l'affichage de la prévisualisation comme indiqué dans le chapitre 'Vérification du bon fonctionnement de la Twitter Card'.
Il est possible de vérifier le bon fonctionnement des Twitter Cards de façon plus rapide avec des outils tiers en ligne tel que Open Graph Generator, mais en cas d'erreur l'outil X de validation des Twitter cards fournira plus d'éléments de diagnostic.