Guide pour débutants sur la façon d'ajouter des cartes Twitter dans WordPress

Vous êtes-vous déjà demandé pourquoi certains tweets reçoivent beaucoup plus de clics que d'autres, même lorsque le contenu est similaire ? Le secret réside souvent dans la façon dont le contenu apparaît lorsqu'il est partagé. Les tweets en texte brut sont ignorés, mais les tweets avec des aperçus accrocheurs attirent l'attention et génèrent des clics.

Chez WPBeginner, nous utilisons les cartes Twitter pour contrôler l'apparence de nos tweets et augmenter l'engagement. Nous constatons une amélioration notable de notre trafic sur les réseaux sociaux et de nos taux d'engagement.

Le meilleur dans tout ça ? L'ajout de cartes Twitter à votre site WordPress ne nécessite aucune compétence en codage ni expertise technique. Nous vous montrerons plusieurs méthodes pour configurer cela, des solutions de plugins simples à l'implémentation manuelle, afin que vous puissiez choisir ce qui convient le mieux à votre niveau de compétence.

Pourquoi utiliser les cartes Twitter dans WordPress ?

Les cartes Twitter vous permettent d'ajouter un titre, un résumé, une image et un fichier vidéo ou audio à votre tweet. De cette façon, vous avez plus de chances d'obtenir plus de clics et de retweets.

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

Le plus grand avantage des cartes Twitter est qu'elles augmentent le nombre de personnes qui suivent vos comptes X grâce à l'attribution de contenu. Souvent, les gens retweettent vos liens sans vous créditer correctement.

Par exemple, disons que @syedbalkhi retweete un article de @wpbeginner sans attribution, et que d'autres personnes retweettent @syedbalkhi. Alors, les utilisateurs qui voient ces retweets sont plus susceptibles de suivre @syedbalkhi que @wpbeginner.

Souvent, les curateurs de contenu font cela pour garder les tweets courts et assurer les retweets de leurs propres tweets.

Avec les cartes Twitter, ce problème est résolu car vous obtenez du crédit pour votre site Web WordPress à partir de chaque tweet qui mentionne votre article.

Maintenant que vous connaissez les avantages des cartes Twitter, examinons comment les implémenter dans WordPress. Nous couvrirons deux méthodes et vous montrerons comment tester et valider vos cartes Twitter :

1. Utiliser le plugin AIOSEO pour ajouter des cartes Twitter (recommandé)
2. Ajouter des cartes Twitter dans WordPress (méthode par code)
3. Tester et valider vos cartes Twitter
4. Foire aux questions
5. Guides d'experts sur l'utilisation de Twitter avec WordPress

Méthode 1 : Utiliser le plugin AIOSEO pour ajouter des cartes Twitter (recommandé)

La façon la plus simple d'ajouter des cartes Twitter à votre site Web est d'utiliser le plugin All in One SEO (AIOSEO) pour WordPress. C'est le meilleur plugin SEO WordPress et il est utilisé par plus de 3 millions de sites Web.

Tout d'abord, vous devrez installer et activer le plugin AIOSEO. Pour plus de détails, suivez notre tutoriel étape par étape sur comment installer un plugin WordPress.

Vous pouvez utiliser la version gratuite d'AIOSEO car elle offre une fonctionnalité pour configurer les cartes Twitter sur votre site Web WordPress.

Une fois le plugin actif, accédez à 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 cartes Twitter, vous pouvez modifier leur apparence à l'aide de différents paramètres.

AIOSEO vous permet de sélectionner le type de carte par défaut pour votre contenu. Le plugin définira « Résumé » comme type de carte par défaut, qui affiche le titre, le résumé et l'image miniature de votre contenu.

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

Après cela, vous devez sélectionner la source de l'image de publication par défaut. C'est l'image que vous souhaitez afficher sur vos cartes Twitter.

Il existe différentes options parmi lesquelles choisir dans le menu déroulant. Par exemple, vous pouvez télécharger 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 du contenu, et plus encore.

Ensuite, ajoutez une image X de publication par défaut, qui sera utilisée en cas de secours si votre contenu n'a pas d'image.

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

En dehors de cela, AIOSEO offre plus d'options pour afficher des données supplémentaires comme l'auteur de la publication et le temps de lecture d'un article.

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

Maintenant, si vous faites défiler vers le bas, vous verrez les paramètres de la page d'accueil pour Twitter. Le plugin affichera un aperçu de l'apparence de votre page d'accueil sur une carte Twitter.

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

Ceci est similaire aux étapes que nous avons montrées précédemment, mais la différence est que ces paramètres concernent votre page d'accueil.

Ensuite, entrez un titre et une description de page d'accueil qui apparaîtront sur la carte Twitter.

Une fois cela fait, cliquez sur le bouton « Enregistrer les modifications ».

En dehors de cela, AIOSEO vous permet également de modifier les paramètres de carte X (Twitter) pour les publications et les pages individuelles.

Pour ce faire, modifiez n'importe quelle publication de blog ou page, puis faites défiler vers le bas jusqu'aux paramètres AIOSEO dans l'éditeur de contenu. Cliquez maintenant sur l'onglet « Social » et sélectionnez « X (Twitter) ».

Le plugin affichera un aperçu de la carte X de votre publication et vous donnera la possibilité d'utiliser les données de l'onglet Facebook. Il vous permet également de modifier le titre et la description X.

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

Ensuite, faites défiler vers le bas et sélectionnez la Source 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 du contenu, etc.

Enfin, vous pouvez sélectionner le Type de carte Twitter dans le menu déroulant. Par défaut, AIOSEO la définira sur « Résumé », mais vous pouvez la changer en « Résumé avec grande image ».

Ensuite, mettez à jour ou publiez votre article de blog. Vous avez maintenant ajouté avec succès des cartes Twitter à votre site WordPress.

Méthode 2 : Ajouter des cartes Twitter dans WordPress (Méthode par code)

Cette méthode nécessite d'ajouter du code aux fichiers de votre thème ou thème enfant. Ouvrez simplement le fichier header.php ou utilisez le plugin gratuit WPCode pour ajouter ce code personnalisé juste avant la balise </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 changer la valeur de « twitter:card » à la ligne 14 en « summary_large_image » si vous souhaitez afficher une carte de résumé avec une grande image.

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

Tester et valider vos cartes Twitter

Avant que les liens de votre site WordPress n'affichent des cartes Twitter, vous devez d'abord les vérifier dans le validateur de carte Twitter.

Rendez-vous simplement sur la page Card Validator sur le site des développeurs de Twitter. Entrez l'URL de n'importe quel article de votre site WordPress et cliquez sur le bouton « Aperçu de la carte ».

Le validateur de carte n'affiche plus un aperçu du tweet, mais il indique si la carte Twitter s'est chargée avec succès ou non.

Foire aux questions

Nous avons abordé les bases de l'ajout de Twitter Cards à votre site WordPress, mais vous pourriez encore avoir quelques questions. Vous trouverez ci-dessous les questions les plus fréquentes que nous recevons concernant les Twitter Cards et leur mise en œuvre.

1. Les Twitter Cards fonctionnent-elles automatiquement une fois que je les ai ajoutées à mon site WordPress ?

Les Twitter Cards devraient fonctionner automatiquement une fois que vous avez correctement implémenté les balises meta sur votre site. Cependant, il peut falloir un certain temps à Twitter pour reconnaître et commencer à afficher vos cartes. Vous pouvez accélérer le processus en utilisant l'outil Card Validator de Twitter pour tester vos URL et demander à Twitter d'explorer votre site.

2. Quelle est la différence entre les Twitter Cards de type « Résumé » et « Résumé avec grande image » ?

La principale différence réside dans la taille et la disposition de l'image. Les cartes Résumé affichent une petite miniature sur le côté gauche du tweet, tandis que les cartes Résumé avec grande image montrent une image grande et proéminente au-dessus du texte. Les cartes avec grande image ont tendance à susciter plus d'engagement mais occupent plus d'espace dans la chronologie.

3. Puis-je utiliser différents types de cartes Twitter pour différentes pages de mon site ?

Oui, vous pouvez absolument utiliser différents types de cartes Twitter pour différentes pages. La plupart des plugins SEO comme All in One SEO (AIOSEO) vous permettent de définir des paramètres spécifiques de carte Twitter pour chaque article et page. Cela vous donne la flexibilité de choisir le meilleur type de carte pour chaque contenu.

4. Pourquoi mes cartes Twitter n'apparaissent-elles pas lorsque je partage mon contenu ?

Plusieurs raisons peuvent expliquer pourquoi les cartes Twitter n'apparaissent pas : les balises meta ne sont pas correctement implémentées, Twitter n'a pas encore exploré votre site, il y a des erreurs dans votre balisage de carte, ou vos images ne répondent pas aux exigences de Twitter. Utilisez le validateur de cartes de Twitter pour dépanner et identifier tout problème.

5. Dois-je approuver mes cartes Twitter auprès de Twitter avant de les utiliser ?

Non, Twitter n'exige plus d'approbation pour les cartes Twitter. Tant que vos cartes sont correctement implémentées et respectent les directives de Twitter, elles devraient s'afficher automatiquement lorsque votre contenu est partagé.

6. Quelles tailles d'image fonctionnent le mieux pour les cartes Twitter ?

Pour les cartes Résumé, utilisez des images d'au moins 144 × 144 pixels (le format carré fonctionne bien). Pour les cartes Résumé avec grande image, utilisez des images d'au moins 300 × 157 pixels avec un rapport d'aspect de 1,91:1. La taille maximale des fichiers d'image est de 5 Mo, et Twitter prend en charge les formats JPG, PNG, WebP et GIF.

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

Nous espérons que cet article vous a aidé à ajouter des cartes Twitter à WordPress. Vous pourriez également vouloir consulter d'autres guides liés à l'utilisation de X (Twitter) avec WordPress.

• Comment tweeter automatiquement lorsque vous publiez un nouvel article dans WordPress
• Comment ajouter des boutons de partage et de retweets Twitter dans WordPress
• Comment intégrer de vrais tweets dans les articles de blog WordPress
• Comment réparer les images de carte Twitter cassées dans WordPress
• Comment afficher Twitter et Facebook de l'auteur sur la page de profil
• Meilleurs plugins Twitter pour WordPress (comparés)
• Comment afficher les tweets récents dans WordPress (étape par étape)
• Comment ajouter vos flux de réseaux sociaux à WordPress (étape par étape)

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.