Un bon contenu attirera un public pertinent sur votre site Web et il y a de fortes chances que certaines de ces personnes veuillent partager votre contenu sur les réseaux sociaux. Mais parfois, des problèmes surviennent lorsque le contenu partagé n’apparaît pas correctement sur un flux social, c’est là que l’utilisation des balises Open Graph peut aider.

Avec Open Graph, vous pouvez contrôler l’apparence du titre, de l’image, de la description et plus encore de votre contenu lorsqu’il est partagé via les canaux sociaux. Peut-être que vous êtes déjà familier avec les balises meta courantes comme la balise de titre et les balises de description. Mais de nombreux blogueurs ne savent pas qu’il existe d’autres balises META spécifiques aux sites de réseaux sociaux comme Google+, Facebook, Twitter et Pinterest. La raison pour laquelle ces sites de réseautage social ont commencé à utiliser des métadonnées est d’afficher correctement le contenu ainsi que les images, descriptions et liens associés. En définissant ces balises méta, vous pouvez vous assurer que votre contenu est plus facile à partager et à comprendre en un coup d’œil sur les réseaux sociaux.

Chaque site de réseau social a des préférences différentes. Pinterest et Google+ donnent la préférence aux balises Schema, mais ils prennent également en charge Protocole Open Graph les balises préférées de Facebook, Google+ et Pinterest.

Les balises Open Graph vont entre la section de la page Web. Les balises les plus couramment utilisées sont:

  • et: titre
  • et: description
  • et: url
  • et: site_name
  • et: image
  • et: type

Ceux-ci n’ont probablement pas beaucoup de sens, alors voici quelques schémas de partage social avec les balises Open Graph clairement étiquetées.

Exemple d’épingle riche de Pinterest

Exemple de partage Google + 1

Exemple de partage Google + 1

Exemple de graphique ouvert Facebook

Exemple de graphique ouvert Facebook

Exemple de carte Twitter

Exemple de carte Twitter

De plus, Twitter a défini ses propres balises personnalisées appelées Twitter Cards. Ces balises permettent à vos liens de présenter plus d’informations chaque fois qu’ils sont tweetés. À l’instar des balises Open Graph, les balises de la carte Twitter vont également entre la section d’une page Web. Les balises Twitter les plus couramment utilisées sont:

  • twitter: carte
  • twitter: site
  • twitter: créateur

Bien que vous puissiez ajouter manuellement des balises Open Graph et Twitter Card, il existe de nombreux plugins disponibles sur WordPress.org qui permettent même aux utilisateurs novices d’ajouter des balises sur les articles et pages WordPress. Quelques-uns de nos favoris incluent:

  1. SEO par Yoast
  2. Open Graph pour les tags de carte Facebook, Google+ et Twitter
  3. Le Framework SEO
  4. Cartes Twitter JM (uniquement pour les cartes Twitter)
  5. Cadre de protocole Open Graph (Uniquement pour les balises Open Graph et recommandé pour les développeurs)

Pour ce didacticiel, nous allons utiliser les options intégrées du plugin Yoast SEO pour définir des balises Meta spéciales afin de rendre nos publications conviviales pour les médias riches.

Remarque: Vous ne devez utiliser qu’un seul plugin ayant des fonctionnalités similaires. Si WordPress SEO by Yoast est déjà installé, il est préférable de configurer ce plugin plutôt que d’installer également le plugin Open Graph for Facebook, Google+ et Twitter Card Tags.

Étape 1: Installez la dernière version de Yoast SEO

Nous vous recommandons d’installer la dernière version de Yoast SEO. Le moyen le plus simple de le faire est d’utiliser le tableau de bord d’administration WordPress sous Plugins> Ajouter nouveau et recherchez «Yoast SEO».

Installez le plugin gratuit Yoast SEO

Ensuite, installez et activez le plugin (cliquez simplement sur ce bouton).

Une fois activé, vous devriez voir un nouvel onglet «SEO» dans votre tableau de bord d’administration WordPress. Il existe des tonnes de fonctionnalités intéressantes dans Yoast SEO (pour le fil d’Ariane, les redirections, etc.) mais ce qui nous intéresse aujourd’hui, c’est le Social languette.

Étape 2: Configurez vos paramètres sociaux

Paramètres sociaux de Yoast SEO

Pour configurer les cartes Open Graph et Twitter, accédez à SEO> Social à partir du tableau de bord d’administration de WordPress. Ajoutez d’abord les liens de votre profil social ici pour aider les moteurs de recherche à valider qu’ils sont vraiment connectés à votre site. Ensuite, passez aux différents onglets sociaux.

Facebook

Yoast SEO: Données Open Graph de Facebook

Votre première étape consiste à activer les métadonnées Open Graph pour les publications Facebook – cliquez simplement sur le Activée option. En supposant que vous ayez déjà ajouté la page Facebook associée à votre site sous le Comptes onglet vous êtes prêt à partir. Vous pouvez ajouter une image par défaut si vous le souhaitez pour les pages qui ne contiennent pas de médias en vedette, mais cela dépend de vous.

Twitter

Yoast SEO: données graphiques ouvertes de la carte Twitter

Avec Facebook terminé, il est temps de s’attaquer à Twitter. Assurez-vous simplement que les métadonnées de la carte Twitter sont Activée puis sélectionnez une disposition de carte par défaut (résumé ou résumé avec une grande image). Encore une fois, cela sera associé au pseudo Twitter que vous avez ajouté sur le Comptes page.

Pinterest

Yoast SEO: données Open Graph Pinterest

Pinterest est un peu différent, car cette plate-forme utilise une vérification de balise meta. Accédez à votre compte Pinterest, survolez l’icône de votre utilisateur puis cliquez sur le Réglages languette. Clique sur le Réclamer le site Web et sélectionnez l’option Ajouter une balise HTML option.

Copiez la balise meta générée et collez-la dans votre panneau Yoast SEO. Enregistrez vos modifications, puis revenez sur Pinterest pour soumettre. Cela indique à Pinterest de vérifier la balise et de vérifier votre site. C’est tout pour Pinterest!

Google+

Yoast SEO: données Google+ Open Graph

Le dernier compte social que vous devrez définir est Google+, qui n’est qu’un lien vers la page Google+ de votre entreprise. Collez-le et vous êtes prêt.

Définir les valeurs par défaut

Yoast SEO: paramètres par défaut des types de contenu

La dernière étape consiste à créer votre valeur par défaut. Yoast utilise des méta-boîtes sur votre contenu pour définir les données Open Graph – assurez-vous donc de modifier vos valeurs par défaut sous SEO> Apparence de recherche> Types de contenu. Utilisez les variables d’extrait de code intégrées de Yoast SEO pour créer vos propres valeurs par défaut dynamiques pour le titre de votre article (qui est utilisé pour og: title) et la méta description (utilisée pour og: description).

Image personnalisée, titre et description

Yoast SEO: contenu personnalisé

Yoast SEO comprend également une option sur les publications individuelles pour personnaliser l’image, le titre et la description utilisés pour Facebook et Twitter. Lors de la modification d’un article, faites simplement défiler jusqu’à la section Yoast SEO et cliquez sur l’icône de partage (cela ressemble à moins de Débogage et validation

Chaque site de réseautage social majeur possède son propre validateur ou débogueur pour tester et prévisualiser comment vos liens apparaîtront lorsqu’ils seront partagés sur les réseaux sociaux.

Test des données structurées Google

Outil de test des données structurées de Google: Cet outil ne vous montrera pas l’aperçu du message partagé sur Google+, mais il montrera quelles métadonnées sont présentes et lisibles par Google. Vos propriétés apparaîtront sous les propriétés du nœud RDFA.

Débogage Facebook: Après avoir implémenté les balises Open Graph, collez simplement l’URL de votre site contenant les balises. Il vous montrera les propriétés de l’objet.

Outil de validation Twitter: Vous pouvez utiliser ce lien pour prévisualiser la carte Twitter de votre publication avant qu’elle ne soit partagée sur les réseaux sociaux.

Validateur d’épingles riches Pinterest: Comme pour les deux derniers validateurs, entrez simplement l’URL contenant les balises Open Graph à prévisualiser et assurez-vous que votre contenu s’affiche comme il se doit. Si vous avez suivi tout le tutoriel, vous n’aurez aucun problème.

Note finale

En utilisant ces balises méta Open Graph, vous pouvez optimiser la façon dont les titres, images, descriptions et autres détails de votre contenu apparaissent sur les réseaux sociaux. Cela peut aider à augmenter le trafic à partir des sites sociaux, car les liens avec des informations claires ont tendance à obtenir plus de partages et de liens naturels. Les gens ont également tendance à faire confiance aux liens qui contiennent plus d’informations plutôt que de cliquer sur des URL nues ou courtes (cela peut également aider si vous utilisez également des techniques pour automatiser le partage social).

Espérons que notre guide vous a aidé à configurer les balises méta Open Graph et les cartes Twitter de votre site, mais si vous avez des questions, n’hésitez pas à les poser. Nous sommes heureux de vous aider si nous le pouvons!

Quels plugins WordPress utilisez-vous pour implémenter ces balises méta? Avez-vous d’autres conseils ou astuces à ajouter? N’hésitez pas à mentionner vos pensées dans les commentaires ci-dessous.

Share: