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 Card, Summary 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”>
4016 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
1 177 vues
Affichage de texte avec echo et print
L'affichage de texte est une opération de base en PHP, souvent utilisée pour fournir une sortie à l'utilisateur. Les instructions echo et print sont les principales méthodes utilisées pour...
PHP
3 434 vues
Supprimer un ami
Nous allons repartir sur notre page voir_profil.php afin de compléter le code ci-dessous.<form method="post">   <?php     if(!isset($relation['id'])){   ?>  ...
Créer son site
4 648 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
4 253 vues
Mise en évidence du texte avec <em>, <strong>, <u> et <s>
Mise en évidence du texte avec <em>, <strong>, <u> et <s>Les balises <em>, <strong>, <u> et <s> sont utilisées pour mettre en évidence le texte dans...
HTML
828 vues
Gestion des exceptions
Gestion des Exceptions en JavaScriptLa gestion des exceptions en JavaScript permet de détecter, signaler et gérer les erreurs qui surviennent lors de l'exécution d'un programme. Les exceptions...
JS
4 186 vues
Explorer les avantages de la séparation des préoccupations
Explorer les avantages de la séparation des préoccupationsLa séparation des préoccupations est un principe de conception qui consiste à diviser un système en différentes parties qui se...
CSS
913 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 378 vues
Téléchargement et installation de PhpMyAdmin sur un serveur local ou distant
Téléchargement et Installation de PhpMyAdmin1. Téléchargement de PhpMyAdmin :Rendez-vous sur le site officiel de PhpMyAdmin à l'adresse https://www.phpmyadmin.net/.Cliquez sur le bouton de...
SQL
Publicité
Cette pub permet au site de vivre ...