Comment ajouter des balises Open Graph dans WordPress

Les balises Open Graph sont de petits fragments de métadonnées dans le HTML de votre page qui contrôlent l'apparence de votre contenu lorsque quelqu'un le partage sur les réseaux sociaux. Sans elles, des plateformes comme Facebook, LinkedIn et Twitter doivent deviner quel titre, quelle description et quelle image afficher, et elles se trompent souvent. Un lien partagé avec une image manquante ou un titre tronqué a l'air peu professionnel, et les gens sont beaucoup moins susceptibles de cliquer dessus. Configurer correctement les balises Open Graph prend quelques minutes et fait une vraie différence pour le trafic social.

Pourquoi les balises Open Graph sont importantes pour le partage social

Chaque fois que quelqu'un partage un lien sur Facebook, LinkedIn, Twitter ou des applications de messagerie comme WhatsApp et Telegram, ces plateformes récupèrent les métadonnées Open Graph de votre page pour construire une carte de prévisualisation. Cette carte inclut généralement un titre, une description et une image. Si vos balises OG sont manquantes ou mal configurées, vous pourriez voir une mauvaise image extraite d'une publicité de la barre latérale, la méta-description coupée en plein milieu de phrase, ou aucune prévisualisation du tout.

Les chiffres parlent d'eux-mêmes. Les publications avec des cartes de prévisualisation riches obtiennent un engagement bien plus élevé que les liens en texte brut. Sur Facebook, les publications avec des images génèrent environ 2 à 3 fois plus d'engagement que celles sans. Sur LinkedIn, les articles avec des images de prévisualisation convaincantes reçoivent plus de clics et de partages. Bien configurer vos balises OG est l'un des moyens les plus simples d'améliorer la visibilité de votre contenu partagé.

La checklist des balises Open Graph essentielles

Toutes les balises OG ne sont pas aussi importantes. Voici celles que vous devriez toujours inclure :

• og:title : le titre de votre page tel qu'il doit apparaître dans les partages sociaux. Gardez-le sous 60 caractères pour éviter la troncature sur la plupart des plateformes.
• og:description : un résumé bref du contenu de la page. Visez 120 à 200 caractères. C'est l'occasion d'écrire une accroche convaincante qui incite à cliquer.
• og:url : l'URL canonique de la page. Cela garantit que tous les partages pointent vers la même URL, en consolidant les métriques d'engagement.
• og:type : le type de contenu. Utilisez article pour les articles de blog, website pour votre page d'accueil et product pour les articles e-commerce.
• og:image : l'image de prévisualisation. C'est la balise OG la plus importante pour l'engagement. Plus de détails sur les bonnes pratiques d'image ci-dessous.

Les balises facultatives mais recommandées incluent og:site_name (le nom de votre site), og:locale (langue et région, par exemple fr_FR) et article:published_time pour les articles de blog.

Bonnes pratiques og:image pour un impact maximal

L'image de prévisualisation est ce que les gens remarquent en premier en faisant défiler leurs flux sociaux. Bien la choisir vaut l'effort :

• Taille : utilisez des images d'au moins 1200x630 pixels. Facebook recommande cela comme minimum pour les écrans haute résolution. Pour LinkedIn, 1200x627 pixels fonctionnent le mieux.
• Ratio d'aspect : tenez-vous-en à 1.91:1 pour la meilleure compatibilité multi-plateformes. Ce ratio fonctionne bien sur Facebook, LinkedIn, Twitter et les applications de messagerie.
• Format de fichier : JPEG et PNG sont universellement pris en charge. Évitez WebP pour les images OG, certaines plateformes et certains robots ne le prennent pas encore en charge.
• Taille de fichier : gardez les images sous 5 Mo. Facebook peut sauter les images dont le téléchargement prend trop de temps.
• Contenu : évitez les images contenant trop de texte. Facebook avait imposé une règle de 20 % de texte pour les publicités, et bien que cela ne s'applique plus aux partages organiques, les images épurées avec peu de texte tendent à mieux performer.
• Image de repli : définissez toujours une image OG par défaut à l'échelle du site pour les pages sans image mise en avant. Une image de marque avec votre logo fait un bon repli.

Configurer les balises Open Graph avec Yoast SEO

Yoast SEO génère automatiquement les balises Open Graph et Twitter Card pour chaque page de votre site. Voici comment le configurer :

Pour les paramètres globaux du site :

1. Installez et activez Yoast SEO.
2. Allez dans Yoast SEO, puis Réseaux sociaux dans le menu d'administration.
3. Dans l'onglet Facebook, activez « Ajouter les métadonnées Open Graph ».
4. Téléversez une image par défaut qui sera utilisée quand un article ou une page n'a pas d'image mise en avant.
5. Dans l'onglet Twitter, activez les métadonnées Twitter Card et choisissez « Résumé » ou « Résumé avec grande image » comme type de carte par défaut.

Pour les articles et pages individuels :

1. Modifiez l'article ou la page.
2. Dans la metabox Yoast SEO, cliquez sur l'onglet « Réseaux sociaux » (l'icône de partage).
3. Sous « Aperçu Facebook », personnalisez le titre, la description et l'image pour le partage social.
4. Sous « Aperçu Twitter », définissez un titre, une description ou une image différente si nécessaire (sinon Twitter utilisera les valeurs OG Facebook).

Yoast récupère automatiquement l'image mise en avant comme og:image si vous n'en définissez pas une personnalisée. L'extension génère aussi le og:title à partir du titre SEO et la og:description à partir de la méta-description, pour que vos partages sociaux restent cohérents avec vos paramètres SEO.

Configurer les balises Open Graph avec Rank Math

Rank Math gère les balises OG de façon similaire à Yoast :

1. Installez et activez Rank Math.
2. Allez dans Rank Math, puis Réglages généraux, puis Social Meta.
3. Activez « Ajouter les métadonnées Open Graph à l'en-tête de votre site ».
4. Définissez une image de partage social par défaut pour les articles sans image mise en avant.

Pour la personnalisation au niveau d'un article, cliquez sur l'icône Rank Math en éditant l'article et naviguez jusqu'à l'onglet « Réseaux sociaux ». Vous pouvez définir des titres, descriptions et images séparés pour Facebook et Twitter.

Ajouter les balises Open Graph manuellement via functions.php

Si vous préférez ne pas utiliser d'extension SEO, vous pouvez ajouter les balises OG via le functions.php de votre thème. Cette approche vous donne un contrôle total sur chaque balise :

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Veillez à ne pas ajouter ceci en parallèle d'une extension SEO qui produit déjà des balises OG. Avoir des balises OG en double peut perturber les robots des réseaux sociaux.

Balises Open Graph pour les produits WooCommerce

Si vous gérez une boutique WooCommerce, vos pages produit bénéficient de balises OG supplémentaires. Yoast SEO et Rank Math ont tous deux des intégrations WooCommerce qui définissent automatiquement og:type sur product et incluent des métadonnées spécifiques au produit comme le prix et la disponibilité.

Pour les implémentations manuelles, vous pouvez vous accrocher aux données produit WooCommerce :

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Tester vos balises Open Graph

Après avoir configuré vos balises OG, vous devriez les tester avant de partager quoi que ce soit d'important. Voici les outils dont vous avez besoin :

• Facebook Sharing Debugger : visitez developers.facebook.com/tools/debug et entrez votre URL. L'outil montre exactement ce que voit Facebook, y compris le titre, la description et l'image. Cliquez sur « Scrape Again » pour rafraîchir le cache si vous avez fait des changements.
• LinkedIn Post Inspector : visitez linkedin.com/post-inspector et entrez votre URL. LinkedIn met en cache de manière agressive, utilisez donc cet outil pour forcer un rafraîchissement après avoir mis à jour vos balises OG.
• Twitter Card Validator : visitez cards-dev.twitter.com/validator. Entrez votre URL pour voir un aperçu de l'allure de votre Twitter Card.
• Analyse InspectWP : lancez une analyse pour vérifier que vos balises OG sont présentes dans la sortie HTML de la page.

Vider les caches des réseaux sociaux après avoir effectué des changements

Les plateformes sociales mettent en cache vos données OG de manière intensive. Si vous mettez à jour vos balises OG et que l'ancien aperçu s'affiche encore lors du partage, vous devez vider le cache :

• Facebook : utilisez l'outil Sharing Debugger et cliquez sur « Scrape Again ». Vous devrez peut-être cliquer deux fois pour les caches récalcitrants.
• LinkedIn : utilisez Post Inspector pour forcer un nouveau scraping. LinkedIn peut parfois prendre jusqu'à 7 jours pour mettre à jour son cache naturellement.
• Twitter : utilisez le Card Validator pour demander un nouveau crawl. Twitter se met généralement à jour en quelques minutes.
• WhatsApp et Telegram : ces applications mettent en cache les aperçus côté client. Demandez aux gens de vider leur cache d'application, ou attendez l'expiration naturelle du cache (généralement 24 à 72 heures).

Erreurs Open Graph courantes à éviter

• og:image manquant : l'erreur la plus courante. Sans image, les partages sociaux ont l'air ternes et sont ignorés. Définissez toujours une image mise en avant ou un défaut à l'échelle du site.
• Image trop petite : les images en dessous de 200x200 pixels peuvent ne pas s'afficher du tout sur Facebook. Visez au moins 1200x630 pixels.
• Balises OG en double : utiliser deux extensions SEO, ou une extension SEO plus une extension de réseaux sociaux qui produisent toutes deux des balises OG, donne des métadonnées contradictoires. N'utilisez qu'une seule source pour vos balises OG.
• Décalage og:url : le og:url doit correspondre à votre URL canonique. S'ils pointent vers des URL différentes, les plateformes sociales peuvent être perturbées sur la page à créditer pour l'engagement.
• Ne pas définir og:type : certaines plateformes utilisent par défaut website si og:type est manquant, ce qui convient à votre page d'accueil mais pas idéalement aux articles de blog. Définissez article pour les articles afin que les plateformes affichent la date de publication et les informations sur l'auteur.
• Oublier les balises spécifiques à Twitter : bien que Twitter puisse se rabattre sur les balises OG, ajouter les balises twitter:card et twitter:site vous donne plus de contrôle sur le format de prévisualisation Twitter.