Les balises Open Graph (OG) sont essentielles pour garantir que le contenu de votre site web s'affiche correctement sur les réseaux sociaux lorsqu'il est partagé. Ces balises aident les plateformes à déterminer l'image, le titre et la description à utiliser pour présenter votre contenu. Dans cet article, vous apprendrez à ajouter ces balises à votre thème WordPress en PHP, afin de garantir que l'image mise en avant s'affiche correctement pour chaque publication partagée.
Étape 1 : Comprendre les balises Open Graph
Avant de plonger dans le code, examinons ce que sont les balises Open Graph et pourquoi elles sont importantes.
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: Définit le type de contenu, tel qu'un article, une vidéo, etc. Pour les articles de blog, nous utilisons « article ».
Ces balises sont placées dans le <head> 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
Maintenant que vous comprenez l'importance des balises Open Graph, ajoutons le code nécessaire à votre thème fonctions.php fichier. Si vous utilisez un thème enfant, ajoutez le code au fichier fonctions.php fichier pour garantir que vos modifications ne seront pas écrasées lors des futures mises à jour du thème parent.
- Accéder au tableau de bord WordPress et aller à Apparence > Éditeur de thèmes.
- Sélectionnez le
fonctions.phpdéposer de votre thème ou thème enfant. - Ajoutez le code PHP suivant à la fin du fichier :
- 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), 'complet');
} 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 ' ';
écho ' ';
écho ' ';
écho ' ';
écho ' ';
}
}
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()etobtenir_l'extrait(): Récupérer le titre et la description du message, qui sont utilisés pour leog:titreetog:descriptionbalises, respectivement.
- URL canonique et type de contenu:
obtenir_permalink(): Récupère l'URL de la publication actuelle pour leog:urlétiqueter.og:type: Définissez sur « article » pour indiquer que le contenu est un 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.
- 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
<head>section. - Utiliser le débogueur de partage Facebook:
- Visitez le Débogueur de partage Facebook.
- Saisissez l’URL de votre publication et cliquez sur « Déboguer ».
- 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
