Twitter cards


Les Twitter Cards sont des vignettes et de courtes descriptions de différents types de contenus partagés dans un profil Twitter. Elles sont censés encourager le lecteur à lire et cliquer, en affichant par exemple un court extrait de texte et une petite image. En cliquant sur ces données, l’utilisateur est renvoyé à la source originale du contenu.

Les informations visibles par l’utilisateur sont représentées avec des balises meta, en raison d’une certaine distinction. Généralement, ces informations sont des données structurées, orientées sur le Protocole Open Graph et selon les recommandations du web sémantique. Twitter a conçu sa propre syntaxe compatible avec les micro datas / micro formats.

Types de Twitter Cards

Twitter met à disposition diverses variantes de Twitter Cards aux utilisateurs. En fonction du type de contenu, certaines caractéristiques y sont associées.

  • Summary Card : la carte montre sous son propre tweet un aperçu du site web référence. Cette dernière contient des informations comme le titre et une courte description du document. Une vignette d’aperçu est également intégrée, puis le code source ou l’auteur du contenu en question.
  • Summary Card avec image large : fonctionne de manière similaire à la Summary Card normale. Toutefois la vignette d’aperçu est réellement plus grande et s’adapte à la largeur de pixel de la mise en page Twitter.
  • Photo Card : une Twitter Card avec juste une photo. La source, l’auteur et un lien externe sont ajoutés au contenu standard.
  • Gallery Card : une galerie de quatre photos est affichée. Source, auteur et lien externe sont inclus.
  • App Card : avec cette carte, les applications pour Android et iPhone peuvent être tweetées. Une courte description tirée de l’App Store et un lien de téléchargement sont affichés.
  • Player Card : avec cette carte, des fichiers vidéo, audio et autre médias peuvent être envoyés. Les contenus sont intégrés grâce au Tag <iframe> ou avec l’utilisation du Desktop sur PC. Les Player Cards doivent en revanche être entièrement vérifiées par Twitter.
  • Product Card : la Product Card permet d’afficher un produit avec deux caractéristiques définies par l’utilisateur. Par exemple le prix, la catégorie d’un produit ou sa disponibilité.

Utiliser les Twitter Cards

Pour utiliser les Twitter Cards, un compte Twitter authentifié ainsi que quelques modifications à son site web sont nécessaires. Les annotations avec des balises meta permettent à Twitter de lire automatiquement les différents contenus média et de les afficher correctement. Dès que les balises meta sont intégrés, l’affectation des Cards à l’aide du Twitter Cards Validator peut être vérifiée. Cela peut prendre quelques semaines avant que les Twitter Cards de tous les utilisateurs soient affichées. En effet,Twitter doit dans un premier temps activer partiellement ces fonctions.

Intégration manuelle

Les balises meta sont toujours indiquées en en-tête du site web et doivent être connectés aux Twitter Cards. Les Twitter Cards sont toujours applicables sur un seul site web. Ainsi, pour chacun des sites web en question, les balises nécessaires doivent être ajoutées, servant par la suite de ressource pour le contenu.

Chaque type de Twitter Card est paramétrée avec son propre type de contenu, prédéfini par Twitter. Elles ont des propriétés précises qui définissent l’approche d’utilisation. Les balises meta sont simplement des paires d’attributs et de valeurs, orientées sur le standard HTML5. L’exemple suivant présente la programmation d’une Summary Card.

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

Le type de donnée de base (Twitter Card) est défini par twitter:card. Le type de carte utilisé (Summary Card) est défini par summary. Par d’autres Meta-Tags, il est possible de saisir des informations sur la Source (twitter:site) et l’Auteur (twitter:creator). Un @ devant la donnée permet de référencer l’information. Il est facultatif de référencer l’auteur et obligatoire de référencer la source.

<meta name="twitter:site" content="@exempleprofil" />
<meta name="twitter:creator" content="@exempleutilisateur" />

Les Twitter Cards sont compatibles avec le protocole Open Graph pour pouvoir gérer des types de contenu comme les Objets Open Graph. Les syntaxes des Twitter Cards se différencient les unes des autres sur certains points, toutefois quand aucun Twitter-Markup n’est spécifié, le protocole Open Graph est employé par le Twitter-Crawler. Grâce aux Tags Open Graph, les données peuvent être décrites et référencées avec plus de détail. En outre, il existe un échange d’informations entre diverses plates-formes comme Google Plus, LinkedIn et Facebook.

<meta property="og:title" content="exempletitre" />
<meta property="og:description" content="textedescription" />
<meta property="og:image" content="sourceexemple.jpg" />

L’intégration manuelle doit être vérifiée par le Twitter Card Validator.

Intégration avec le plug-in

En fonction du CMS en place (Content Management System), divers plug-ins peuvent être installés et utilisés pour l’intégration de Twitter Cards. Par exemple sur WordPress on a à disposition les JM Twitter Cards, Facebook, Open Graph, Google +, puis les Twitter Card Tags ou Twitter Cards. Au sein du CMS, l’utilisateur clique sur les plug-ins et détermine les paramètres pertinents pour l’activer.

Les Twitter Cards peuvent être spécifiées individuellement pour chaque post de blog. Certains plug-ins affichent en plus une vignette d’aperçu sur le backend. En règle générale, ce genre de plug-ins sont testés en parallèle avec d’autres plug-ins (les SEO par exemple) pour être certain qu’il n’y ait pas de conflit. Ici, la vérification par le Twitter Cards Validator n’est pour la plupart du temps pas nécessaire. En effet, les plug-ins sont fournis avec un vérificateur intégré.

Importance pour les réseaux sociaux

Il est supposé que les Twitter Cards participent à l’augmentation du taux de clics des tweets. Les utilisateurs voient une vignette d’aperçu, un court texte de description et un lien vers la source. Cette part du contenu qui apparaît à l’avance capitalise l’intérêt et le redirige, par un clic de plus, vers le contenu original. Par l’utilisation des Twitter Cards, les opérateurs de site web espèrent plus de trafic et notamment dans les zones moins connues du site, comme par exemple sur les blogs où apparaît régulièrement du contenu. Ceci est cependant seulement dans le cas où tout le contenu n’est pas visible depuis Twitter. L’exemple du lien vidéo est le plus pertinent : les utilisateurs peuvent regarder la vidéo entièrement sans avoir à quitter Twitter.

Les Twitter Cards s’accompagnent d’une meilleure expérience utilisateur. Les utilisateurs ont accès à une première impression du contenu et sont confrontés à divers types de médias. Cela prévaut pour l’utilisation mobile de Twitter. Grâce aux données structurées, il n’est pas possible de trouver meilleure expérience utilisateur sur un autre type d’appareil. Pour les entreprises, il existe plus de possibilités pour placer des messages publicitaires sur les Rich-Medias. En ce point, on peut considérer les Twitter Cards comme des éléments de communication et marketing. Les entreprises ont face à elles plusieurs possibilités pour communiquer sur leurs cartes produit et se faire connaître des réseaux sociaux grâce à des campagnes virales.

Liens web