Comment ajouter des balises Open Graph dans WordPress avec PHP

Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you’ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.

Étape 1 : Comprendre les balises Open Graph

Before diving into the code, let’s review what Open Graph tags are and why they are important.

• og:titre: Définit le titre du message.
• og:description: Fournit une brève description du message.
• og:image: Spécifie l'image à utiliser lors du partage de la publication.
• og:url: Spécifie l'URL canonique de la publication.
• og:type: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.

Ces balises sont placées dans le section du code HTML de votre site et sont lus par les plateformes de médias sociaux comme Facebook, Twitter et LinkedIn, entre autres.

Étape 2 : Ajout du code à votre thème

Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s fonctions.php file. If you’re using a child theme, add the code to the child theme’s fonctions.php fichier pour garantir que vos modifications ne seront pas écrasées lors des futures mises à jour du thème parent.

1. Accéder au tableau de bord WordPress et aller à Apparence > Éditeur de thèmes.
2. Sélectionnez le fonctions.php déposer de votre thème ou thème enfant.
3. Ajoutez le code PHP suivant à la fin du fichier :
4. fonction add_opengraph_tags() {
   si (is_single() || is_page()) {
   poste mondial $;
   si (has_post_thumbnail($post->ID)) {
   $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘full’);
   } autre {
   // URL de l'image par défaut si la publication n'a pas d'image sélectionnée
   $img_src = array(‘https://www.example.com/default-image.jpg’);
   }// Titre de l'article
   $title = obtenir_le_titre();
   // Description du message
   $description = get_the_excerpt();echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   }
   }
   add_action(‘wp_head’, ‘add_opengraph_tags’);

Explication du code :

• add_opengraph_tags(): Cette fonction vérifie si la page actuelle est un article ou une page et, si tel est le cas, génère les balises Open Graph appropriées.
• Image en vedette:
  • has_post_thumbnail($post->ID): Vérifie si la publication comporte un ensemble d'images en vedette.
  • wp_get_attachment_image_src()Récupère l'URL complète de l'image sélectionnée. Si la publication ne comporte pas d'image sélectionnée, une image par défaut est utilisée.
• Titre et description:
  • obtenir_le_titre() et obtenir_l'extrait(): Récupérer le titre et la description du message, qui sont utilisés pour le og:titre et og:description balises, respectivement.
• URL canonique et type de contenu:
  • obtenir_permalink(): Récupère l'URL de la publication actuelle pour le og:url étiqueter.
  • og:type: Set to “article” to indicate that the content is an article.

Étape 3 : Vérification de la mise en œuvre

Après avoir ajouté le code à fonctions.php, il est important de vérifier que les balises Open Graph sont générées correctement.

1. Voir la source de la pageSur n'importe quel article ou page, faites un clic droit et sélectionnez « Afficher le code source » ou une option similaire. Recherchez les balises Open Graph dans le section.
2. Utiliser le débogueur de partage Facebook:
   • Visitez le Débogueur de partage Facebook.
   • Enter the URL of your post and click “Debug”.
   • Facebook affichera les informations détectées, notamment l'image, le titre et la description. Cela permet de vérifier si les balises sont correctement générées.

Étape 4 : Dépannage des problèmes courants

• L'image ne s'affiche pasAssurez-vous que l'image sélectionnée est bien définie dans la publication. Si une image par défaut est utilisée, vérifiez que l'URL de l'image est correcte et accessible au public.
• Conflits avec d'autres pluginsCertains plugins SEO ou de réseaux sociaux peuvent interférer avec la génération des balises Open Graph. Essayez de désactiver temporairement ces plugins pour voir si le problème persiste.
• Mise en cache: Si vous utilisez un plugin de mise en cache, effacez le cache du site pour vous assurer que les nouveaux paramètres sont appliqués.

Résumé

Ajouter manuellement des balises Open Graph à votre thème WordPress via PHP est un excellent moyen de garantir un affichage correct de votre contenu sur les réseaux sociaux. Grâce à ce code, vous contrôlez totalement le partage de vos publications, y compris l'image, le titre et la description utilisés. De plus, vous évitez de recourir à des plugins supplémentaires, ce qui optimise la vitesse et la légèreté de votre site.

Maintenant que vous avez configuré les balises Open Graph, vos publications devraient être correctement partagées sur les réseaux sociaux, et les images mises en avant devraient apparaître comme prévu. Si vous avez des questions ou besoin d'aide, n'hésitez pas à laisser un commentaire ci-dessous !

Photo de Espace négatif