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”>
3735 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
5 454 vues
Les outils pour développer
Avant de vous lancer dans le développement il reste encore quelques prérequis qui sont les logiciels que vous allez utiliser afin de concevoir votre site !Ce qui vous manque actuellement c'est...
Créer son site
2 984 vues
Personnaliser sa bare de menu avec du CSS
Après avoir modifié notre barre de menu nous allons maintenant personnaliser notre barre de menu avec du CSS afin de la rendre plus agréable à regarder.Nous allons pour ça ajouter un nouveau...
Créer son site de rencontres
16 073 vues
Visiter un profil PHP
Pour visiter le profil d'un autre utilisateur il nous faudra récupérer son ID passer en argument dans l'URL par la méthode $_GET et afficher ses informations comme pour...
Créer son site
2 542 vues
Nesting : Organiser le code CSS en utilisant le nesting pour des sélecteurs imbriqués
Nesting en SASS : Organiser le code CSS avec des sélecteurs imbriqués1. Utilisation du nesting :En SASS, vous pouvez organiser votre code CSS en utilisant le nesting pour des sélecteurs...
Sass
2 090 vues
Explorer les fonctions de manipulation de couleur, de texte, etc.
Exploration des fonctions de manipulation en SASS1. Manipulation de couleurs :SASS propose un ensemble de fonctions intégrées pour manipuler les couleurs. Vous pouvez ajuster la luminosité, la...
Sass
557 vues
Retour de valeurs
Retour de Valeurs dans les Fonctions en JavaScriptLorsqu'une fonction est exécutée, elle peut renvoyer une valeur à l'endroit où elle a été appelée. Cette valeur peut être utilisée pour...
JS
1 481 vues
Inline CSS : l'ajout de styles directement dans les balises HTML
Inline CSS : L'ajout de styles directement dans les balises HTMLL'Inline CSS est une méthode de stylisation où les styles sont appliqués directement à un élément HTML via l'attribut style. Cela...
CSS
752 vues
Utilisation de async/await
Utilisation de async/await en JavaScriptL'async/await est une syntaxe introduite dans ECMAScript 2017 pour simplifier la gestion des promesses et rendre le code asynchrone plus lisible et plus...
JS
Publicité
Cette pub permet au site de vivre ...