Tags WordPress OG: Comment augmenter les clics sur votre publication sur les réseaux sociaux

Avez-vous entendu parler des balises meta og? Implémentez-vous des balises méta og sur votre site WordPress? Cet article vous montrera ce que sont les balises meta og et comment les implémenter sur votre site Web WordPress.

Lorsqu'un article de votre blog ou une URL de votre site Web est partagé sur Facebook, le site de médias sociaux fait un bon travail en extrayant les bonnes données. Des éléments tels que l'URL de votre blog ou de votre site Web, un extrait du texte de l'article, une image en vedette, etc. seront affichés, incitant les utilisateurs à cliquer dessus.

Cependant, si vous êtes un fervent utilisateur de Facebook, vous avez peut-être remarqué que les données qu'il extrait de sites Web (y compris le vôtre) ne sont pas toujours parfaites. Parfois, il tire une image qui ne représente pas avec précision le contenu du message partagé, ou il peut extraire du texte vers la fin du message et l'utiliser comme extrait, ce qui n'est presque toujours pas une bonne chose, et pire encore, là sont des moments où aucune donnée autre que le titre de l'article (ou le contenu du tag) et l'URL est partagée du tout!

Cela se produit généralement si vous n'implémentez pas ostylo gRaph meta tags (aka og meta tags) sur votre site Web WordPress. Sans ces balises importantes, Facebook (et d'autres sites de médias sociaux) ne pourront pas obtenir les bonnes informations à afficher pour une publication ou un lien partagé.

Voici à quoi cela peut ressembler lorsque vous partagez une URL sur Facebook à partir d'un site Web qui n'est pas mis à jour avec des balises graphiques ouvertes:

partage facebook sans balises og

D'un autre côté, voici à quoi cela ressemble lorsque vous partagez une URL qui implémente des balises Meta Open Graph:

Partager facebook avec og1

Balises Meta Open Graph (OG) de Facebook

Les méta-balises graphiques ouvertes de Facebook définissent la manière dont un site Web tiers (comme votre blog) sera présenté sur Facebook.

Bien qu'elles soient développées par Facebook, les balises Meta Open Graph sont également utilisées par d'autres réseaux sociaux (comme Twitter et LinkedIn) afin de personnaliser le partage qui s'y déroule.

Pour inclure les balises méta graphiques ouvertes sur votre site WordPress, vous devrez ajouter des balises dans le de votre site Web. Selon le protocole graphique ouvert, les propriétés requises sont les suivantes:

  • og: titre
  • og: type
  • og: image
  • og: url

 

balises og facebook1

En utilisant des graphiques ouverts sur les sites Web, Neil Patel trouvé une augmentation du taux de clics de 39%.

Comment vérifier les balises méta OG sur votre site WordPress?

Regardez le code source de votre site Web WordPress si vous n'êtes pas sûr que les balises og aient déjà été placées sur votre site Web. Sous Windows ou Linux, appuyez sur Ctrl + U et sous Mac, appuyez sur Commande + Alt + U pour afficher le code source.

S'il est déjà ajouté, vous trouverez vos balises og dans le section à l'intérieur du "

og

De plus, vous pouvez utiliser le Débogueur de partage Facebook outil pour voir ce que Facebook lit sur votre site.

Ajouter des balises méta OG à WordPress sans plug-in

Pour ajouter des balises méta og à vos articles et pages sur WordPress sans utiliser de plugin, ajoutez simplement l'extrait de code suivant à votre thème functions.php fichier.

// Ajout du graphique ouvert dans la fonction Attributs de langage add_opengraph_doctype ($ output) {return $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"'; } add_filter ('language_attributes', 'add_opengraph_doctype'); // Permet d'ajouter la fonction Open Graph Meta Info add_og_meta_tag () {global $ post; if (! is_singular ()) // si ce n'est pas un article ou une page, n'ajoutez pas de balises og return; écho " \ n "; écho ' ». "\ n"; écho ' ». "\ n"; écho ' ». "\ n"; écho ' ». "\ n"; écho ' ». "\ n"; écho '». "\ n"; if (! has_post_thumbnail ($ post-> ID)) {// si le message n'a pas d'image en vedette, utilisez une image par défaut $ default_image = "https://example.com/image.jpg"; // remplacez ceci par une image par défaut sur votre serveur ou une image dans votre médiathèque echo ' '; } else {$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'large'); écho ' '; } echo "\ n \ n ";} add_action ('wp_head', 'add_og_meta_tag', 0);

Assurez-vous de modifier "VOTRE ID UTILISATEUR" dans le partie avec votre propre identifiant Facebook.

Vous pouvez trouver votre identifiant d'utilisateur Facebook en visitant votre page de profil Facebook sur un navigateur de bureau.

  1. Cliquez sur l'image de votre profil et sélectionnez "Afficher l'image du profil"
  2. Cela ouvrira la visionneuse de photos de Facebook pour votre photo de profil.
  3. L'URL devrait maintenant ressembler à ceci: "https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx »
  4. Cherchez la pièce fbid=xxxxxxxxxxxxxx. Les chiffres après le fbid paramètre "xxxxxxxxxxxxxxxx"Est votre identifiant d'utilisateur.
  5. Copiez-le et utilisez-le pour remplacer "VOTRE ID UTILISATEUR" dans l'extrait de code ci-dessus.

identifiant Facebook

Vous avez terminé! Votre site Web est maintenant mis à jour avec des balises graphiques ouvertes.

Ajouter des balises méta OG à WordPress avec un plugin

Les deux plugins SEO populaires, Yoast SEO et All in One SEO Pack de est livré avec des fonctionnalités de balises méta graphiques ouvertes.

Ajouter des balises OG avec le plugin Yoast SEO

Tout d'abord, installez Yoast SEO. Après l'installation, vous devriez voir le nouvel élément SEO dans le menu de gauche de la barre latérale d'administration.

Pour ajouter des balises og avec Yoast, accédez à SEO > Réseaux sociaux via le menu de la barre latérale d'administration.

Une fois que vous êtes sur la page, accédez à l'onglet Facebook.

balise seo og yoast

Par défaut, Yoast SEO ajoute des balises graphiques ouvertes à vos publications. Vous n'avez rien à configurer. 

Cependant, vous devrez configurer les balises og pour la page d'accueil de votre site Web.

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Paramètres de la page d'accueil section, vous pouvez définir une URL d'image pour votre page d'accueil. Cela sera utilisé pour le og: image propriété de votre page d'accueil. 

Vous pouvez également ajouter le titre et la description, qui sont tous deux utilisés pour le og: titre et og: description propriétés respectivement.

Enfin, il y a la Les paramètres par défaut section. Cela vous permet de définir une URL d'image par défaut qui sera utilisée pour une publication og: image propriété au cas où aucune image sélectionnée ne serait définie.

Une fois que vous avez terminé, n'oubliez pas de cliquer Enregistrer les modifications pour que vos modifications soient appliquées.

Configuration des balises OG par publication avec Yoast SEO

Si vous souhaitez définir manuellement les balises og par publication, vous pouvez le faire en accédant à l'éditeur de publication et en faisant défiler jusqu'à la section Yoast Metabox et en allant à la Réseaux sociaux languette.

yoast par post og tags

Vous pouvez ensuite définir ici un paramètre personnalisé pour diverses balises og.

Une fois que vous avez terminé d'ajouter vos balises og à un message, assurez-vous de l'enregistrer, de le mettre à jour ou de le publier, selon le cas, afin de valider les modifications que vous avez apportées.

Ajouter des balises OG avec tout en un seul pack SEO

Tout d'abord, installez All in One SEO Pack. Après l'installation, accédez à All in One SEO > Réseaux sociaux via le menu de la barre latérale d'administration de votre site. Une fois que vous êtes sur la page, accédez à la Facebook languette.

balises tout-en-un seo og

Avec All in One SEO Pack, les balises og sont ajoutées par défaut à votre publication, comme Yoast.

Il y a plus d'options configurables ici par rapport à Yoast, mais certaines ne sont disponibles que lorsque vous utilisez la version pro. Jamais leless, le nombre d'options configurables dans la version gratuite est plus que suffisant.

  • Image de publication par défaut - définit quelle image sera utilisée pour un article og: image propriété.
  • Image Facebook de publication par défaut - si vous sélectionnez l'option d'image par défaut (définie ci-dessous) dans l'option d'image de publication par défaut, c'est ici que vous téléchargez l'image personnalisée.
  • Types d'objet de type de publication par défaut - vous permet de définir une valeur par défaut pour un article, une page ou une pièce jointe og: type propriété.
  • Afficher l'auteur Facebook - vous pouvez lier votre profil Facebook à votre site Web. L'activation de cette option vous permet de lier une publication à votre profil Facebook, permettant à vos lecteurs de suivre directement votre page / profil FB. Vous pouvez en savoir plus sur la façon de configurer cela à partir d'AIOSEO la page d'aide.
  • Nom du site - vous permet de configurer les valeurs qui seront utilisées pour un article og: nom_site biens. Vous pouvez utiliser des balises pour générer dynamiquement la valeur de cette propriété, vous pouvez également ajouter un texte par défaut, ou vous pouvez également mélanger les deux si vous le souhaitez.

À la suite des éléments ci-dessus, il existe une section pour configurer les balises og de la page d'accueil de votre site. Sous le Paramètres de la page d'accueil section, vous pouvez définir les éléments suivants:

  • Image(s) - pour votre page d'accueil og: image propriété.
  • Titre - pour votre page d'accueil og: titre biens. Vous pouvez utiliser des variables pour générer cela de manière dynamique.
  • Description - pour votre page d'accueil og: description propriété.
  • Type d'objet - pour votre page d'accueil og: type propriété.

Enfin, il y a un Paramètres avancés section, qui vous permet de définir des méta-balises graphiques ouvertes supplémentaires telles que fb: app_id, fb: administrateurs, etc.

Une fois que vous êtes satisfait de votre configuration, n'oubliez pas de Sauvegarder les modifications.

Configurer les balises OG par publication avec tout en un seul pack SEO

Vous pouvez configurer des balises par post og avec AIOSEO comme Yoast. Accédez à l'éditeur de publication et faites défiler jusqu'à la métabox AIOSEO, puis accédez à la Réseaux sociaux languette.

aioseo par balises post og

Les options ici sont similaires à ce qui a été discuté ci-dessus. Vous pouvez continuer et définir des paramètres personnalisés pour vos balises og pour ce message, en remplaçant les options que vous avez définies dans les paramètres d'AIOSEO.

Une fois que vous avez terminé d'ajouter vos balises og à un message, assurez-vous de l'enregistrer, de le mettre à jour ou de le publier, selon le cas, afin de valider les modifications que vous avez apportées.

Cela explique comment ajouter des balises og à votre site WordPress. Espérons que cet article vous a aidé à choisir la meilleure approche à cet égard et que vous en avez appris un peu plus sur l'importance de l'implémentation des balises og sur votre site Web.

Si vous souhaitez voir plus de conseils et astuces WordPress, consultez notre intégralité 101 liste de trucs et astuces WordPress.

Téléchargez la liste des 101 astuces WordPress que tout blogueur devrait connaître

101 astuces WordPress

Cliquez ici pour télécharger maintenant

// Ajout du graphique ouvert dans les attributs de langue

function add_opengraph_doctype ($ sortie) {

retourne $ output. 'xmlns: og = "https://opengraphprotocol.org/schema/" xmlns: fb = "https://www.facebook.com/2008/fbml"';

}


add_filter ('attributs_langues', 'add_opengraph_doctype');


// Permet d'ajouter des méta-informations Open Graph

function add_og_meta_tag () {


global $ post;


if (! is_singular ()) // s'il ne s'agit pas d'un article ou d'une page, n'ajoutez pas de balises og

retour;

écho " \ n ";

écho ' ». "\ n";

écho ' ». "\ n";

écho ' ». "\ n";

écho ' ». "\ n";

écho ' ». "\ n";

écho '». "\ n";


if (! has_post_thumbnail ($ post-> ID)) {// si le message n'a pas d'image en vedette, utilisez une image par défaut

$ default_image = "https://example.com/image.jpg"; // remplacez-le par une image par défaut sur votre serveur ou une image dans votre médiathèque

écho ' ';

}


else {

$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'large');

écho ' ';

}


écho "\ n \ n ";

}


add_action ('wp_head', 'add_og_meta_tag', 5);

À propos de l’auteur
David Attar
David travaille dans ou autour de l'industrie en ligne et numérique depuis 21 ans. Il possède une vaste expérience dans les secteurs des logiciels et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. Il a travaillé avec des agences de développement de logiciels, des éditeurs de logiciels internationaux, des agences de marketing locales et est désormais responsable des opérations marketing chez Aphex Media, une agence de référencement. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plateformes numériques disponibles aujourd'hui. Son mélange d'expertise technologique combiné à un fort sens des affaires confère un avantage concurrentiel à ses écrits.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...