Les cartes Twitter (Twitter cards) ne datent pas d'aujourd'hui, mais elles restent toujours d'actualité surtout si vous créez un nouveau blog et que vous voulez vous en servir. Mais qu'est ce que les twitter cards et comment faire pour les ajouter sur Blogger ?
Les cartes de Twitter : à quoi ça sert ?
Vous avez crée un nouveau site et vous avez rédigé votre premier joli article, fier de votre travail, vous vous dirigez vers Twitter et vous partagez le lien de votre super article dans un nouveau tweet.
Mais à votre surprise, l'url ne se transforme pas en un titre, une image et un aperçu de votre article ! Il reste tout simplement une url moche et loin d’être attrayante comme tous les articles qui remplissent votre fil d'actualité !
En gros, voilà le rendu que vous avez :
Et voilà le résultat que vous devez obtenir en utilisant les Twitter cards sur votre site :
Pourquoi cet article: meta tag missing (twitter:text:description) ?
Maintenant que vous êtes convaincu de l'utilité des cartes de Twitter, je vous explique pourquoi j'ai décidé de mettre en place cet article ! En effet, lors de la création d'un nouveau blog, j'ai voulu installé les Twitter cards, j'ai donc essayé un code que j'ai trouvé un peu partout sur le web. Malheureusement, lorsque je suis passée au validateur "Twitter Card validator" afin de valider l’installation et vérifier que tout marche dans l'ordre, je suis tombée sur cette belle erreur :
INFO: Page fetched successfully
INFO: 15 metatags were found
INFO: twitter:card = summary tag found
ERROR: Required meta tag missing (twitter:text:description)
La majorité des codes que j'ai essayé (et qui étaient aussi les mêmes) ne marchaient pas, et à chaque fois, la même erreur s'affichait pour moi. Jusqu'à ce que je trouve le bon code qui marche correctement ! Dans la suite, découvrez comment installer correctement les Twitter cards sur votre blog blogspot et surtout comment résoudre l'erreur Required meta tag missing (twitter:text:description) si vous l'avez rencontré !
Comment ajouter les cartes de Twitter sur Blogger ?
Rendez-vous sur votre tableau de bord > Thème > Modifier le code HTML.
Cherchez dans votre code la balise </head> (pour effectuer une recherche rapide, cliquez quelque part sur le code puis sur CTRL + F et tapez dans la barre de recherche qui s'affiche la balise à chercher)et juste avant copiez le code suivant:
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@votre_nom' name='twitter:site'/>
<meta content='@votre_nom' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='url_image' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->
Remplacez ce que j'ai mis en rouge par vos détails. En ce qui concerne l'url_image, utilisez une adresse d'une image de l'un de vos articles. C'est l'image qui va s'afficher par défaut, en cas où l'article que vous partagez ne contient pas d'images.
Vous n'avez qu'à cliquer sur le bouton "Enregistrer le thème" et passer à l'étape suivante !
Comment valider l'installation des Twitter cards ?
Rendez-vous sur le Twitter card validator, copiez l'adresse d'un article de votre blog et cliquez sur le bouton "Preview card", vous devez obtenir un joli aperçu de votre carte :
et surtout aucune erreur dans le log :
En espérant que ce tuto vous a été utile, n'hésitez pas de le partager autour de vous !
No Response to "Comment ajouter les cartes Twitter sur Blogger ? [tuto]"
Enregistrer un commentaire