Les Twitter Cards sont des protocoles qui vous permettent d’attacher des photos, des vidéos et autres médias interactifs à vos tweets afin d’amener du trafic vers votre site.


Twitter fournit une large gamme de cartes. De plus, les Twitter Cards peuvent être intégrées à votre page web avec quelques lignes d’HTML. Les utilisateurs renvoyant vers votre contenu avec un tweet auront une carte ajoutée à celui-ci, qui sera visible par tous leurs followers.


Les Twitter Cards représentent un bon partenaire dans votre stratégie SEO car elles permettent d’améliorer votre engagement, d’augmenter votre taux de clic et vos conversions. Les Twitter Cards peuvent ainsi accélérer la portée de votre contenu sur les réseaux sociaux et développer votre image et votre SEO.


Il y 5 différents types de Twitter Cards :

  • Summary Card,
  • Summary Card with large image,
  • Player Card,
  • App Card,
  • Lead Generation Card.


Mais les plus importantes sont Summary CardSummary Card with large image et App Card.


Mis en place des Twitter Cards sur votre site


Summary Card

La Summary Card peut être utilisée pour les publications de blog, les actualités, les pages produit ou tout autre actualité d’entreprise. Ce genre de carte a pour but d’offrir un aperçu de votre contenu en affichant votre titre, description et votre miniature d’image.


Les exigences :

  • Titre : 70 caractères
  • Description : 200 caractères
  • Image : au moins 120×120 pixels et pas plus de 1MB


Pour l’ajouter à votre site, vous devez coller ce code dans l’HTML de votre page web :

<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@tonsite” />
<meta name=”twitter:title” content=”Ton Titre” />
<meta name=”twitter:description” content=”Description.” />
<meta name=”twitter:image” content=”https://domaine.com/name_image.jpg” />


Summary Card with large image

Ces cartes fonctionnent exactement de la même manière que la Summary Card excepté au niveau de la taille de l’image. Elles permettent de faire figurer une image plus captivante dans toute sa largeur afin de mieux attirer les utilisateurs sur votre site.


Exigences :

  • Titre : 70 caractères
  • Description : 200 caractères
  • Image : au moins 280 x 150 pixels et pas plus de 1MB


Ajoutez ce code HTML pour mettre en place cette Twitter Card :

<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@tonsite”>
<meta name=”twitter:creator” content=”@yourtwitterhandle”>
<meta name=”twitter:title” content=”Ton titre”>
<meta name=”twitter:description” content=”Description.”>
<meta name=”twitter:image” content=”https://domain.com/name_image.jpg“>


App Card

Les App Cards peuvent être utilisées pour promouvoir des applications mobiles et augmenter ainsi leur installation. Cette carte souligne le nom, la description, l’icône, le classement et le prix. Twitter peut utiliser les identifiants de votre application pour obtenir ces informations.


Exigences :

  • Titre : prise de l’identifiant de l’application
  • Description : 200 caractères
  • Image : le logo de l’application prise via l’identifiant – l’image devrait être au moins de 800×320 pixels et peut être en format JPG, JPEG, PNG ou GIF. Les images en dessous de 1MB sont préférées.


Ajoutez ce code HTML pour mettre en place cette Twitter Card :

<meta name=”twitter:card” content=”app”>
<meta name=”twitter:site” content=”@tonsite”>
<meta name=”twitter:description” content=”Description”>
<meta name=”twitter:app:country” content=”Ton Pays”>
<meta name=”twitter:app:name:iphone” content=”Nom de l'app iphone”>
<meta name=”twitter:app:id:iphone” content=”ID de l'app iphone”>
<meta name=”twitter:app:url:iphone” content=”URL de l'app iphone”>
<meta name=”twitter:app:name:ipad” content=”Nom de l'app ipad”>
<meta name=”twitter:app:id:ipad” content=”ID de l'app ipad”>
<meta name=”twitter:app:url:ipad” content=”URL de l'app ipad”>
<meta name=”twitter:app:name:googleplay” content=”Nom de l'app dans google play”>
<meta name=”twitter:app:id:googleplay” content=”ID de l'app dans google play”>
3845 vues
Modifié le 05 novembre 2019
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
4 564 vues
Créer un commentaire
Poster un commentaireDans notre dossier f_forum, nous allons reprendre la page topic.php. Dans cette page nous allons ajouter la possibilité à vos utilisateurs de pouvoir poster des commentaires...
Créer son site
1 066 vues
Pourquoi utiliser PHP ?
Introduction à l'utilisation de PHPPHP est un langage de programmation extrêmement populaire pour le développement web. Voici quelques-unes des raisons principales pour lesquelles PHP est...
PHP
820 vues
Les pseudo-classes et pseudo-éléments pour le stylisme conditionnel
Les Pseudo-Classes et Pseudo-Éléments pour le Stylisme ConditionnelEn CSS, les pseudo-classes et les pseudo-éléments permettent d'appliquer des styles à des éléments HTML en fonction de leur...
CSS
823 vues
Utilisation de gradients, ombres et transitions pour des effets visuels
Utilisation de Gradients, Ombres et Transitions pour des Effets VisuelsEn CSS, vous pouvez utiliser des gradients, des ombres et des transitions pour ajouter des effets visuels attrayants à vos...
CSS
3 189 vues
Base de données de notre messagerie interne
Nous allons maintenant développer un élément-clé de notre site de rencontres. Nous allons concevoir une messagerie interne entre 2 utilisateurs.Avant de commencer je vous invite à prendre la...
Créer son site de rencontres
608 vues
Syntaxe des Directives
Chaque directive dans le fichier .htaccess suit une syntaxe spécifique pour fonctionner correctement. Comprendre cette syntaxe est essentiel pour utiliser efficacement les directives dans votre...
HTACCESS
3 439 vues
Comprendre les différentes catégories de commandes SQL
SQL, ou Structured Query Language, est composé de plusieurs catégories de commandes, chacune ayant un rôle spécifique dans la manipulation et la gestion des bases de données relationnelles. Les...
SQL
4 808 vues
Le langage CSS
Le CSS permet de concevoir le design de votre site web. Le CSS agit sur des éléments HTML.On peut intégrer le CSS de deux façons :Directement sur les éléments de votre HTML,Mettre le...
Créer son site
Publicité
Cette pub permet au site de vivre ...