Guide pour débutants sur l’ajout de Twitter Cards dans WordPress

L’amélioration de votre site WordPress avec les Twitter Cards peut considérablement améliorer votre présence sur les réseaux sociaux et l’engagement des utilisateurs/utilisatrices. Les Twitter Cards fournissent des images et des descriptions qui apparaissent sur X (anciennement Twitter) lorsque quelqu’un partage votre contenu.

Sur WPBeginner, nous utilisons cette fonctionnalité pour contrôler l’apparence de nos tweets et stimuler l’interaction avec les comptes. L’utilisation des Twitter Cards (ou X Cards) nous permet également de nous assurer que nous sommes crédités pour notre contenu.

Dans cet article, nous allons vous afficher comment ajouter des Twitter Cards dans WordPress, afin que vos tweets puissent se démarquer.

Pourquoi utiliser les Twitter Cards dans WordPress ?

Les Twitter Cards vous permettent d’ajouter un titre, un résumé, une image et un fichier vidéo ou audio à votre tweet. Vous avez ainsi plus de chances d’obtenir davantage de clics et de retweets.

Vous pouvez voir un exemple direct en allant sur notre page WPBeginner sur X.

Le plus grand avantage d’avoir des Twitter Cards est qu’elles augmentent le nombre de personnes qui suivent vos comptes X grâce à l’attribution du contenu. Souvent, les gens tweetent vos liens sans vous donner le crédit approprié.

Par exemple, disons que @syedbalkhi retweete une publication de @wpbeginner sans attribution, et que d’autres personnes retweetent @syedbalkhi. Les utilisateurs/utilisatrices qui voient ces retweets sont alors plus susceptibles de suivre @syedbalkhi que @wpbeginner.

Souvent, les personnalisateurs de contenu font cela pour garder la longueur des tweets courte et s’assurer des retweets de leurs propres tweets.

Avec les Twitter Cards, ce problème est résolu car vous obtenez un crédit pour votre site WordPress pour chaque tweet qui mentionne votre article.

Maintenant que vous connaissez les avantages des Twitter Cards, voyons comment les mettre en œuvre dans WordPress. Nous allons couvrir deux méthodes et vous afficher comment tester et valider vos Twitter Cards :

Méthode 1 : Utiliser l’extension AIOSEO pour ajouter des cartes Twitter (Recommandé)

La façon la plus simple d’ajouter des Twitter Cards à votre site est d’utiliser l’extension All in One SEO (AIOSEO) pour WordPress. C’est la meilleure extension de référencement WordPress et elle est utilisée par plus de 3 millions de sites.

Tout d’abord, vous devrez installer et activer l’extension AIOSEO. Pour plus de détails, suivez notre tutoriel étape par étape sur l ‘installation d’un plugin WordPress.

Vous pouvez utiliser la version gratuite d’AIOSEO car elle offre une fonctionnalité permettant de configurer des Twitter Cards sur votre site WordPress.

Une fois que l’extension est activée, allez dans votre zone d’administration WordPress et naviguez vers All in One SEO  » Réseaux sociaux. Cliquez ensuite sur l’onglet  » X (Twitter)  » et assurez-vous que l’option  » Activer la carte X  » est activée.

Une fois que vous avez activé les Modifiés, vous pouvez modifier leur apparence à l’aide de différents Réglages.

AIOSEO vous permet de sélectionner le type de carte par défaut pour votre contenu. L’extension définira « Résumé » comme type de carte par défaut, qui affiche le titre, le résumé et la miniature de votre contenu.

Cependant, vous pouvez le modifier en « Résumé avec grande image » dans le menu déroulant, et Twitter affichera votre tweet avec une grande image.

Ensuite, vous devez sélectionner la Source d’image de publication par défaut. Il s’agit de l’image que vous souhaitez afficher sur vos cartes Twitter.

Il existe différentes options à choisir à l’aide du menu déroulant. Par exemple, vous pouvez téléverser ou sélectionner une image par défaut qui apparaîtra dans la carte X (Twitter) ou sélectionner l’image mise en avant, l’image jointe, la première image dans le contenu, et plus encore.

Ensuite, ajoutez une Image X de la publication par défaut, qui servira de sauvegarde au cas où votre contenu n’aurait pas d’image.

Par exemple, si la source de l’image de votre publication est une image avant, mais que la publication n’a pas d’image avant, X utilisera l’image par défaut à la place.

En outre, AIOSEO offre davantage d’options pour afficher des données supplémentaires telles que l’auteur/autrice de la publication et le temps de lecture d’un article.

Il existe également une option permettant de définir la source de l’image terme par défaut, mais vous aurez besoin d’AIOSEO Pro ou d’une licence supérieure pour utiliser cette fonctionnalité.

Si vous défilez vers le bas, vous verrez les Réglages de la page d’accueil pour Twitter. L’extension affichera une prévisualisation de votre page d’accueil sur une Twitter Card.

Dans cette section, vous pouvez modifier le type de carte et ajouter une image de page d’accueil.

Cette étape est similaire à celle que nous avons affichée précédemment, mais la différence est que ces réglages concernent votre page d’accueil.

Saisissez/saisie ensuite le titre et la description de la page d’accueil qui apparaîtront sur la carte Twitter.

Une fois que c’est fait, cliquez sur le bouton « Enregistrer les modifications ».

En outre, AIOSEO vous permet également de modifier les réglages de la carte X (Twitter) pour les publications et les pages individuelles.

Pour ce faire, modifiez n’importe quel article ou page de blog, puis défilez vers le bas jusqu’aux Réglages AIOSEO dans l’éditeur de contenu. Cliquez sur l’onglet « Social » et sélectionnez « X (Twitter) ».

L’extension affiche une prévisualisation de la carte X de votre publication et vous donne la faculté d’utiliser les données de l’onglet Facebook. Il vous permet également de modifier le titre et la description de la carte X.

Vous pouvez écrire un nouveau titre et une nouvelle description ou utiliser des balises intelligentes. Par exemple, si vous utilisez l’identifié  » + Titre de la publication  » au-dessus du champ Titre Twitter, alors AIOSEO utilisera automatiquement le titre de votre publication dans la Carte Twitter.

Ensuite, défilez vers le bas et sélectionnez la Sélectionné d’image pour votre Carte Twitter. Utilisez le menu déroulant pour sélectionner l’image que vous souhaitez afficher pour votre publication, comme une image mise en avant, une image jointe, la première image dans le contenu, etc.

Dernier point, vous pouvez sélectionner le type de carte Twitter dans le menu déroulant. Par défaut, AIOSEO le définit comme  » Résumé « , mais vous pouvez le modifier en  » Résumé avec grande image « .

Ensuite, mettez à jour ou publiez votre publication de blog. Vous avez bien ajouté les Twitter Cards à votre site WordPress.

Méthode 2 : Ajout de Twitter Cards dans WordPress (méthode du code)

Cette méthode nécessite l’ajout de code dans les fichiers de votre thème ou de votre thème enfant. Il suffit d’ouvrir le fichier header.php ou d’utiliser l’extension gratuite WPCode pour ajouter ce code personnalisé juste avant l’identifiant </head>:

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

Vous pouvez modifier la valeur « twitter:card » de la ligne 14 en « summary_large_image » si vous souhaitez afficher une carte récapitulative avec une grande image.

Veuillez utiliser la méthode 1 si vous ne savez pas comment travailler avec PHP ou si vous rencontrez des problèmes avec la méthode 2.

Testez et validez vos cartes Twitter

Avant que les liens de votre site WordPress ne commencent à afficher des cartes Twitter, vous devez d’abord les vérifier dans le validateur de cartes Twitter.

Il vous suffit de vous rendre sur la page Card Validator du site des développeurs/développeuses de Twitter. Saisissez l’URL d’une publication de votre site WordPress et cliquez sur le bouton « Prévisualisation de la carte ».

Le validateur de cartes n’affiche plus de prévisualisation du tweet, mais il affiche un journal indiquant si la carte Twitter s’est bien chargée ou non.

Guides d’experts sur l’utilisation de Twitter avec WordPress

Maintenant que vous savez comment ajouter des cartes Twitter à WordPress, vous pouvez consulter d’autres guides liés à l’utilisation de Twitter avec WordPress.

• Comment tweeter automatiquement lorsque vous publiez une nouvelle publication dans WordPress
• Comment ajouter les boutons Twitter Share et Retweet dans WordPress
• Comment embarquer des tweets réels dans des publications de blog WordPress
• Comment corriger les images corrompues de la carte Twitter sur WordPress
• Comment afficher le Twitter et le Facebook de l’auteur/autrice sur la page de son profil ?
• Meilleures extensions Twitter pour WordPress (comparées)
• Comment afficher les tweets récents dans WordPress (étape par étape)
• Comment ajouter vos flux de réseaux sociaux à WordPress (étape par étape)

Nous espérons que cet article vous a aidé à ajouter des cartes Twitter sur WordPress. Vous pouvez également consulter notre guide sur la création d’une page d’atterrissage avec WordPress et notre sélection d’experts des extensions WordPress indispensables pour développer votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.