RootsLabs

Les Twitter Cards sont l’équivalent de l’Open Graph de Facebook. Elles permettent d’enrichir la timeline en ajoutant un résumé du contenu lorsque vous ou l’un de vos visiteurs partagent un lien de votre site. Nous allons découvrir comment fonctionne ces Twitter Cards.

Informations

Les informations partagées dans les twitter cards sont multiples.

Type du résumé (summary si non défini):

<meta name="twitter:card" content="summary">

Titre du résumé* (limité à 70 caractères) :

<meta name="twitter:title" content="Titre">

Description du résumé* (limité à 200 caractères) :

<meta name="twitter:description" content="Description">

Image du résumé (Max. 120px x 120px et Min. 60px x 60px) :

<meta name="twitter:image" content="http://...">

Si une image est défini, on peut alors définir la hauteur et la largeur (en pixels) :

<meta name="twitter:image:width" content="90">
<meta name="twitter:image:height" content="90">

Profil Twitter du site :

<meta name="twitter:site" content="@twitter_site">

Profil Twitter de l’auteur:

<meta name="twitter:creator" content="@twitter_author">

* : obligatoire

Informations spécifiques aux applications

Si votre site est relative à une application, alors les Twitter Cards permettent de récupérer des informations sur ces applications.

Android

Nom de l’application Android :

<meta name="twitter:app:name:googleplay" content="NomApp">

ID de l’application Android sur le Google Play :

<meta name="twitter:app:id:googleplay" content="000">

URL de l’application Android sur le Google Play :

<meta name="twitter:app:url:googleplay" content="http://...">

iPad

Nom de l’application iPad :

<meta name="twitter:app:name:ipad" content="NomApp">

ID de l’application iPad sur l’iTunes App Store :

<meta name="twitter:app:id:ipad" content="000">

URL de l’application iPad sur l’iTunes App Store :

<meta name="twitter:app:url:ipad" content="http://...">

iPhone

Nom de l’application iPhone :

<meta name="twitter:app:name:iphone" content="NomApp">

ID de l’application iPhone sur l’iTunes App Store :

<meta name="twitter:app:id:iphone" content="000">

URL de l’application iPhone sur l’iTunes App Store :

<meta name="twitter:app:url:iphone" content="http://...">

Les différentes Cards

Différentes cards sont disponibles. Par défaut, la Twitter Card est de type summary.
Les autres sont :

• « Summary Large Image » : Identique à la carte Summary, mais avec une image mise en avant (Source : Twitter)
• « App » : Permet de mettre en avant une application mobile (Source : Twitter)
• « Gallery » : Permet d’afficher plusieurs photos dans une galerie (Source : Twitter)
• « Player » : Permet de mettre en avant une vidéo et la lire (Source : Twitter)

Validation

Se faire valider sa Twitter card par Twitter permet de l’activer pour les autres utilisateurs. Sans cela, vous pouvez avoir les meta pour la Twitter card, mais aucun rendu de votre résumé.

Liens

• Documentation Officielle sur les Twitter Cards
• Liste de tous les tags
• Outil de validation