Que sont les Twitter Cards?

Les markup Twitter Card (Twitter Cards ou cartes Twitter en français) sont des éléments de textes ou multimédias structurés que vous pouvez ajouter à vos documents HTML pour montrer le contexte de votre contenu et prendre le contrôle de l’apparence de vos snippets lorsque vos URLs sont partagés sur Twitter.

Voici un exemple de CNN qui utilise Twitter Cards pour maîtriser l’apparence que prendra leur article de blog une fois posté sur Twitter :

Pourquoi se soucier des Twitter Cards?

Les pages optimisées avec Twitter obtiennent plus de clics, plus de likes et de retweets.
Pourquoi?

Parce qu’avoir une belle image l’attention. Et avoir un bon titre et une bonne description incite les gens à cliquer sur votre snippet

Est ce que Twitter ne les génèrent pas automatiquement ?

Dans une certaine mesure, oui. Mais 99% du temps, Twitter choisi une image peu flatteuse et montre un titre et une description tronqués.

Tout comme les balises Open Graph pour les plateformes telles que Facebook et LinkedIn, Twitter Cards vous laisse prendre le contrôle de l’apparence des snippets de vos URLs lorsqu’ils sont partagés sur Twitter. En SEO, nous sommes obnubilés par l’importance d’accorder nos titres et nos meta-descriptions pour obtenir le plus haut CTR ( taux de clics) possible, mais les gens oublient souvent cet aspect là quand il s’agit des réseaux sociaux. Et c’est bien dommage étant donné que le combat sur les réseaux sociaux est tout aussi féroce (si ce n’est plus).

Est ce que Twitter Cards améliore mon ranking ?

Non, Twitter Cards n’améliore pas directement votre classement. Néanmoins, nous pensons que les Twitter Cards aident les moteurs de recherche à déterminer le contexte de votre contenu, de la même façon qu’Open Graph et Schema.org. De plus, baliser votre contenu avec Twitter Cards améliore votre visibilité sur Twitter, ce qui génère plus de partages et de liens. Au final, vos performances en SEO bénéficieront indirectement des Twitter Cards.

Les plateformes compatibles avec Twitter Cards

La plus évidente est Twitter puisqu’ils ont développé les cartes Twitter. Cependant elles sont aussi compatibles avec Slack.

Après avoir effectué une série de tests, nous avons découvert que Facebook, LinkedIn et Google Plus ne basent pas leurs snippets à partir de balise Twitter Cards s’il n’y a pas de balise Open Graph présente. Ils basent plutôt leur snippets sur le titre ( title ), la meta description et prennent une image au hasard.

Donc si vous voulez optimiser votre visibilité sur Facebook, LinkedIn et Google Plus, assurez-vous d’implémenter les balises Open Graph.

Comment implémenter Twitter Cards

Comme nous l’avons mentionné précédemment, vous implémentez Twitter Cards en ajoutant une balise Twitter Card à vos documents HTML ( dans la partie <head> de vos pages). Vous pouvez le faire manuellement, mais si votre site web est géré par un SGC (CMS en anglais), il y a probablement des plugins et d’autres fonctionnalités disponibles pour le faire automatiquement. Si ce n’est pas le cas, parlez en à vos développeurs. En règle générale, créer une fonctionnalité de ce genre n’est pas compliqué.

Les différents types de cartes Twitter

Il y a quatre type de cartes Twitter que vous pouvez utiliser :

  1. Summary Card (Cartes Résumé)
  2. Summary Card with Large Image (Cartes Résumé avec une grande image)
  3. App Card (Carte d’application)
  4. Player Card (Carte Lecteur)

Ci-dessous nous parlerons des deux premières en détail, et nous verrons quelles sont les propriétés d’une carte Twitter.

Type de carte Twitter : la Summary Card (Carte résumé)

Twitter a besoin des deux propriétés ci-dessous pour une implémentation correcte de Twitter Card :

  • twitter:card
  • twitter:title

Mais nous vous recommandons vivement d’ajouter les trois propriétés suivantes pour donner plus de contexte à votre contenu :

  • twitter:site
  • twitter:descriptio
  • twitter:image

Voyons un exemple

Voilà à quoi ressemble cet article de Search Engine Journal sur le Machine Learning lorsqu’il est partagé:

Lorsqu’on extrait le code source, voici à quoi ressemble l’implémentation de Twitter Card :

Type de carte Twitter : la Summary Card with Large Image (Carte résumé avec grande image)

Les propriétés requises et recommandées pour la Summary Card with Large Image sont en fait les mêmes que celles demandées pour la Summary Card.

Voyons un exemple

Tous nos articles sont de bons exemples : ils utilisent tous la Summary Card with Large Image. En l’occurrence, notre article sur l’attribut hreflang ressemble à ça lorsqu’on le partage sur Twitter :

Lorsqu’on extrait le code source, voici à quoi ressemble l’implémentation de Twitter Card :

Les propriétés Twitter Card en détail

twitter:card

La propriété twitter:card définit quel type de carte Twitter vous utilisez :

  1. Summary Card: du texte avec une image carrée.
  2. Summary Card with Large Image: du texte avec une grande image rectangulaire.
  3. App Card: pour promouvoir des applications.
  4. Player Card: pour montrer des vidéos. Mais pour être capable de l’utiliser, vous devez être whitelisté (sur liste blanche).

Exemple de code de snippet

<meta name="twitter:card" content="summary_large_image" />

Prérequis

Vous devez choisir un des quatre types de cartes Twitter.

Ce qui se passe si vous ne définissez pas un type de carte

Si vous ne définissez pas twitter:card, Twitter ne sera pas quel type de carte Twitter choisir pour montrer votre contenu. Votre URL sera traité comme si il n’y avait aucune balise Twitter Card.

twitter:site

La propriété twitter:sitedécrit le compte Twitter du site ou le site web.

Exemple de code de snippet

<meta name="twitter:site" content="@contentking" />

Prérequis

La propriété twitter:site devrait référencer le compte Twitter opérationnel de votre site.

Soit vous définissez la propriété twitter:site ,ou alors vous définissez la propriété twitter:site:id qui vous laisse définir l’identité Twitter de votre site. Une identité Twitter (Twitter ID en anglais) est une valeure numérique unique qui identifie votre compte Twitter. Vous pouvez trouver votre identité Twitter ici : http://mytwitterid.com/. Donc dans notre cas, nous utilisons cet exemple de snippet :

<meta name="twitter:site:id" content="15467325" />

Ce qui se passe si vous ne la définissez pas

La connection entre votre contenu et le compte Twitter associé ne sera pas claire. Même si ça n’a pas d’impact direct, twitter:site est une propriété qu’il est recommandé de définir.

twitter:creator

La propriété twitter:creatordécrit le compte Twitter de l’auteur

Exemple de code de snippet

<meta name="twitter:creator" content="@stevenvvessum" /><\code>

Prérequis

twitter:creator doit référencer un compte Twitter existant. Définissez twitter:creator, ou définissez twitter:creator:id.

Vous pouvez retrouver votre identité Twitter ici: http://mytwitterid.com/. Dans le cas de Steven, il utiliserait par exemple ce snippet :

<meta name="twitter:siteid" content="8728882" />

Que se passe-t’il si vous ne la définissez pas

La connection entre le contenu et le compte Twitter de l’auteur ne sera pas claire. Cela n’a pas d’impact direct.

twitter:title

La propriététwitter:title définit le titre de la carte Twitter, de la même façon que l’attribut title d’une page.

Exemple de code de snippet

<meta name="twitter:title" content="Hreflang: ranking the right pages for multi-language sites" />

Prérequis

Lorsque vous optimisez votre snippet pour Twitter, gardez en tête que le titre ne rentrera pas en une seule ligne s’il dépasse 55 caractères. Notez que Twitter recommande un maximum de 70 caractères (mais lors de nos tests aucun titre n’est apparu aussi long).

Que se passe-t’il si vous ne le définissez pas

Twitter utilisera d’abord votre og:title , puis le titre de la page en dernier recours.

twitter:description

La propriété twitter:description défini la description de la carte Twitter. C’est une courte description sur le sujet de la page.

Exemple de code de snippet

<meta name="twitter:description" content="Learn how to implement hreflang to get search engines to rank the right pages for your multi-language site. Check it out now!" />

Prérequis

Lorsque vous optimisez votre snippet pour Twitter, gardez en tête que la description ne rentrera pas sur deux lignes si elle dépasse 125 caractères. Notez que Twitter recommande un maximum de 200 caractères (mais lors de nos tests aucune description n’est apparue si longue).

Que se passe-t’il si vous ne la définissez pas

Twitter utilisera d’abord og:description ,puis votre description en derniers recours.

twitter:image

La propriété twitter:image définit l’image qui sera montré dans votre snippet. Choisissez judicieusement cette image. La taille compte, tout comme la qualité et ses dimensions.

Exemple de code de snippet:

<meta name="twitter:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Prérequis

Lorsque vous utilisez twitter:imageavec la carte Twitter Summary Card Twitter Card , gardez les critères suivants en tête :

  • Format d’image: 1:1
  • Taille minimum: 144 x 144 pixels
  • Taille maximum: 4096 x 4096 pixels
  • Taille de fichier maximum: 5 MB
  • Formats acceptés : JPG, PNG, WEBP, et GIF (pour les GIFs animés, seule la première frame sera utilisée). Notez que le format SVG n’est pas accepté.

Lorsque vous utilisez twitter:image avec la carte Twitter Summary Card with Large Image , gardez les critères suivants en tête :

  • Format d’image: 2:1
  • Taille minimum: 300 x 157 pixels
  • Taille maximum: 4096 x 4096 pixels
  • Taille de fichier maximum: 5 MB
  • Formats acceptés : JPG, PNG, WEBP, et GIF (pour les GIFs animés, seule la première frame sera utilisée). Notez que le format SVG n’est pas accepté.

Que se passe-t’il si vous ne la définissez pas

Twitter vérifiera d’abord si vous avez défini une og:image, et dans le cas contraire Twitter choisira une image de votre page au hasard.

twitter:image:alt

twitter:image:alt vous permet de décrire twitter:imagepar un texte pour les utilisateurs et utilisatrices malvoyant-e-s.

Exemple de code de snippet:

<meta name="twitter:image:alt" content="Hreflang image that symbolizes different languages" />

Prérequis

Ne dépassez pas une longueur de 420 caractères.

Que se passe-t’il si vous ne le définissez pas

Rien, puisque c’est une propriété optionnelle. Cependant il est recommandé de le faire pour rendre votre contenu accessible aux personnes malvoyantes.

Autres cartes Twitter et propriétés

Il ya deux autres types de carte Twitter : App et Player. Cela dit elles sont plutôt rares et ne sont pas applicables pour la plupart des sites web. Vous trouverez plus d’information à leurs propos ici :

Faire valider votre implémentation de carte Twitter avec un checker

Vous pouvez utiliser Twitter Card Validator pour valider vos implémentations de cartes Twitter. Cela dit cet outil vous permet de vérifier seulement un URL à la fois. Il serait logique d’avoir une solution de taille pour vérifier plusieurs pages à la fois.C’est là que ContentKing intervient : il vous laisse auditer vos implémentations de cartes Twitter sur l’ensemble de votre site web en temps réel.

Les meilleurs pratiques concernant Twitter Cards

Gardez en tête les recommandations suivantes lorsque vous avez à faire aux cartes Twitter :

  1. Assurez vous de définir au moins les propriétés prérequises par Twitter Card (idéalement définissez aussi les propriétés optionnelles).
  2. Limitez vos twitter:title à moins de 55 caractères.
  3. Limitez vos twitter:description à moins de 125 caractères.
  4. Pour twitter:imageutilisez une image de haute qualité qui fait au minimum 144 x 144 pixels pour une Summary Card et au minimum 300 x 157 pixels pour une Summary Card with Large Image, avec une dimension maximale de 4096 x 4096 pixels, tout en s’assurant que la taille du fichier ne dépasse pas 5 MB. Les formats supportés sont : JPG, PNG, WEBP, et GIF.
  5. Lorsque vous préparez la balise Twitter Card d’une page, passez toujours par le Twitter Card validator pour prévisualiser pour avoir un aperçu de votre snippet, et pour vous assurez que toutes les données sont présentes. Ajustez et modifiez le jusqu’à ce que vous en soyez satisfait. Il y a un autre avantage à noter : votre snippet aura la bonne apparence la première fois qu’il sera partagé grâce au pre-cache.
  6. Vérifiez que votre ficher robots.txt ,ne bloquent pas les bots de Twitter car ces derniers ont besoin de visiter vos pages pour récupérer les balises Twitter Card et ainsi montrer vos cartes Twitter. Cela comprend l’image référencée twitter:image. Soyez vigilant avec votre fonction disallow.
  7. Si vous avez fait des erreurs, que vous les avez ensuite corrigées et que vous souhaitez que Twitter génère un nouveau snippet : allez sur Twitter Card Validator et récupérez à nouveau les données de la carte Twitter. Cela rafraichira le cache. Cependant l’image ne sera pas automatiquement rafraîchi (pour cela vous devez définir un nouvel URL twitter:image et récupérer les données de la carte Twitter via le Twitter Card Validator à nouveau). Nous vous suggérons d’ajouter une ligne de requête après twitter:image pour que votre image de snippet soit rafraîchi en changeant la valeur de la ligne de requête.

Questions fréquentes à propos des cartes Twitter

  1. Quelle taille d’image de carte Twitter choisir?
  2. On ne voit pas les images de mes cartes Twitter. Quel est le problème?
  3. Le Validator dit qu’aucun meta tags n’a été trouvé (“No meta tags found”). Que faire?

1. Quelle taille d’image de carte Twitter choisir

En 2018, la meilleure taille d’image pour vos cartes Twitter est :

  • Summary Card: 1024 x 1024 (puisqu’une taille d’image de ratio 1:1 est demandée)
  • Summary Card with Large Image: 1024 x 512 (puisqu’une taille d’image de ratio 2:1 est demandée)

En respectant ça vous pouvez être sûr de ne pas avoir d’image de cartes Twitter floues.

De plus, faites en sorte de respecter :

  • La taille de fichier maximum : 5 MB
  • Les formats d’images supportés : JPG, PNG, WEBP, and GIF (for an animated GIF, only the first frame will be used). Notez que le format SVG n’est pas accepté.

2. On ne voit pas les images de mes cartes Twitter. Quel est le problème?

Si on ne voit pas les images de vos cartes Twitter, il peut y avoir plusieurs problèmes :

  1. Vous n’avez pas pas défini d’URL valide pour votre image ( y compris le protocole, HTTP ou HTTPS).
  2. Votre image de carte Twitter n’a pas les bonnes dimensions, et/ou la taille du fichier excède 5 MB.
  3. Votre image de carte Twitter est sous un format qui n’est pas pris en compte, comme par exemple le format BMP et SVG.
  4. Vous avez bloqué l’accès aux Twitterbot .Assurez vous que votre fichier robots.txt autorise l’accès aux Twitterbot. N’oubliez pas que que les Twitterbots sont aussi visés lorsque vous définissez un blocage avec la fonction disallow pour : User-agent: *.

3. Le Validator dit qu’aucun meta tags n’a été trouvé (“No meta tags found”). Que faire?

Il y a plusieurs choses qui peuvent l’expliquer, notamment :

  1. Votre page ne renvoie pas le code de status HTTP 200. Faites en sorte que ce soit le cas.
  2. Votre page ne renvoie pas Content-type:text/html dans le header. Assurez-vous qu’elle le fasse.
  3. La balise Twitter Card est ajoutée après celle de Javascript. Twitterbot n’éxecute pas Javascript. Les meta tags doivent être statiques. Implémentez la balise Twitter Card dans la partiecomme un tag meta statique.
ContentKing Academy Content Team
Steven van Vessum
Steven van Vessum

Steven est le Chef de l’expérience client dans l’entreprise ContentKing. Cela signifie qu’il s’occupe de tout lié avec les clients et avec l’inbound marketing. C’est là où il veut être. Il aime améliorer le référencement des sites web dans les moteurs de recherche et parler de l’inbound marketing.

Vojtěch Zach
Vojtěch Zach

Vojtěch is ContentKing’s Customer Support & Localization Manager. He is the one who will answer your questions when you reach out to us. He is a studied translator, so apart from making our users happy, he also loves to take on our localization challenges.

Lorena Torsani
Lorena Torsani

Lorena is ContentKing’s Marketing Specialist. She’s a creative thinker, who is highly enthusiastic about engaging with customers, running exciting campaigns and bringing forth some fresh ideas.

Commencer votre essai gratuit de 14 jours

Vous pouvez commencer en 20 secondes

Insérez un nom de domaine valide, s'il vous plaît (www.exemple.fr).
  • La carte de crédit n'est pas requise
  • Aucune installation requise
  • Sans engagement