Les Twitters Cards permettent d’enrichir vos partages sur le réseau social du petit oiseau. Mais saviez-vous que le fait d’ajouter les bonnes données à vos pages ne suffisait pas systématiquement ?

C’est quoi une Twitter Card ?

Il s’agit de données enrichies dans les pages web, et qui permettent lors du partage de contenus d’améliorer l’affichage sur Twitter et certains logiciels tiers (comme le fait Facebook avec des Données OpenGraph). Il existe différents types de Twitter Card :

  • Les résumés simples « Summary Card » : titre, description, image miniature et attribution du partage à un compte Twitter ;
  • Les résumés larges « Summary Card with large image » : mêmes contenus avec une image pleine taille ;
  • La carte photo « Photo Card » : une image en pleine taille ;
  • La carte de galerie « Gallery Card » : un affichage de 4 photos ;
  • La carte application « App Card » : pour l’affichage de données liées à une application mobile ;
  • La carte média « Player Card » : un lecteur vidéo et/ou audio ;
  • La carte produit « Product Card » : pour l’affichage d’une fiche produit.

Et voici ce que cela donne lors du partage, ici avec un extrait enrichi avec une carte média pour une vidéo de Youtube :

Twitter Card vidéo
Le Twitter Card vidéo de Youtube

Quelles données ajouter ?

Pour que cela fonctionne, il existe une série de données à ajouter dans la balise <head> de votre contenu. En voici un exemple :

//le type de carte
<meta name="twitter:card" content="summary_large_image"/>
// sa description
<meta name="twitter:description" content="Les données Exifs d'une image sont-elles utilisées par Google lors de l'indexation et du positionnement. Début de réponse avec ce test SEO."/>
// son titre
<meta name="twitter:title" content="Données EXIFS des images : quel impact en SEO ?"/>
// le compte Twitter rattaché au site
<meta name="twitter:site" content="@rochdaniel"/>
// Le domaine du site
<meta name="twitter:domain" content="SeoMix"/>
// L'image
<meta name="twitter:image:src" content="http://www.seomix.fr/wp-content/uploads/2015/03/donnes-exifs.png"/>
// L'auteur du contenu
<meta name="twitter:creator" content="@rochdaniel"/>

Je ne rentrerais pas dans le détail des éléments techniques pour les implanter, tout d’abord car de nombreux sites le font déjà depuis des mois, mais surtout car plusieurs plugins peuvent automatiser cela pour vous très proprement, notamment JM Twitter Cards ou encore WordPress SEO (dans la partie dédiée aux réseaux sociaux).

Vérifier et autoriser les Twitter Cards

Ce qui est intéressant est un point que j’ai découvert récemment : il ne suffit pas d’ajouter les données à vos pages, il faut également demander l’autorisation à Twitter de bien vouloir les afficher de manière systématique. Et pour cela, un seul site vous permettra de demander cet accord et de tester en même temps la fiabilité de vos données : le Twitter Card Validator.

Pour que tout fonctionne, il faut choisir le format de Twitter Card que vous jugez pertinent, puis implanter les bonnes données dans vos pages. Une fois cette étape réalisée, soumettez une URL au validateur de Twitter. Il affichera alors un message comme quoi votre domaine n’a pas été « whitelisté ». Cliquez sur le bouton, remplissez les champs et validez. En règle générale, la validation prends moins de 5 minutes, et vos Twitter Cards seront bien prises en compte de manière systématique.

Youtube et Twitter Card
Youtube a été autorisé à afficher le Twitter Card

Notez cependant que les cartes « Summary » simples sont prises en compte automatiquement : c’est pour les autres que la demande est nécessaire. Voici quelques exemples avec un site non autorisé mais avec des Twitter Card Summary simples :

Twitter Card Summary par défaut
Les Twitter Card Summary s’affichent par défaut

Deuxième cas de figure, des Twitter Card Summary avec une image large, mais le site n’a pas été autorisé :

Site non autorisé pour Twitter Card
Le site Visibilité Référencement n’a pas été autorisé à afficher les Twitter Cards

Et dernier exemple avec le même type de Twitter Card, mais cette fois-ci avec un domaine accepté par Twitter :

Site autorisé pour Twitter Card
Le domaine SeoMix a bien été autorisé

En résumé : pensez bien à ajouter vos données, vérifier qu’elles soient correctes et que votre nom de domaine a bien été whitelisté pour utiliser les Twitter Cards. Sans cette autorisation, il est fréquent que vos données ne servent à rien, et que vos partages soient ainsi basiques.

Twitter vous donne d’ailleurs la démarche pas à pas juste ici : https://dev.twitter.com/cards/overview.

EDIT du 18/03/2015

Twitter vous envoie ensuite un email pour pour prévenir quand votre domaine a été définitivement autorisé.

Email de validation des Twitter Card
Email de validation des Twitter Card