Contact
Rechercher dans les tutoriels Genisoft ESC
Balises Open Graph : WordPress, PrestaShop 9.2 et contrôle
Marketing

Balises Open Graph : WordPress, PrestaShop 9.2 et contrôle

Balises og: et twitter: : ce que WordPress et PrestaShop 9.2 produisent vraiment, ce qui manque, comment le compléter et le vérifier, et le rôle de l'IA.

Par

Mis à jour le 1er novembre 2026. Article réécrit : balises réellement produites par WordPress 7.1 et par les thèmes Hummingbird et Classic de PrestaShop 9.2 (lecture du code et pages générées), exigences publiées par Meta et LinkedIn, code testé pour compléter les balises, et méthode de génération assistée par IA avec relecture.

Quand un lien est partagé sur Facebook, LinkedIn, Mastodon ou une messagerie, la plateforme lit les balises <meta> de la page pour construire l’aperçu : titre, description, image. Sans elles, elle devine, souvent mal. Avant d’ajouter une extension ou un module, il faut savoir ce que votre CMS produit déjà. Nous avons vérifié les deux cas, et les résultats surprennent : WordPress ne produit rien, PrestaShop produit l’essentiel mais avec des trous.

Les balises qui comptent

Le protocole Open Graph, décrit sur ogp.me, impose quatre propriétés : og:title, og:type, og:image et og:url. Il recommande og:description, og:site_name et og:locale (au format fr_FR). L’image accepte des propriétés structurées : og:image:width, og:image:height, og:image:type et og:image:alt, à fournir dès qu’une og:image est déclarée. Si une propriété est répétée, la première rencontrée l’emporte.

Les types définis par ogp.me sont notamment website, article, profile et book. Le type product utilisé par PrestaShop n’en fait pas partie.

X lit d’abord ses propres balises, dont twitter:card (summary ou summary_large_image), et se rabat sur les balises og: pour le titre, la description et l’image.

PlateformeBalises luesImage recommandée (documentation officielle)
Facebookog:url, og:title, og:description, og:image, og:type, og:localeAu moins 1 080 px de large ; formats JPEG, PNG ou GIF déclarés dans og:image:type
LinkedInog:title, og:image, og:description, og:urlAu moins 1 200 × 627 px, ratio 1,91:1, moins de 5 Mo ; sous 401 px de large, l’image devient une vignette ; carrée, elle peut être recadrée
Xtwitter:card, puis repli sur og:Selon le type de carte

Facebook met les images en cache par adresse : pour changer l’image d’un contenu déjà partagé, changez l’URL du fichier. Déclarer la largeur et la hauteur permet aussi d’afficher l’image dès le premier partage.

WordPress : rien par défaut

Nous avons cherché la chaîne og: dans tout le dossier wp-includes de WordPress 7.1.3. Elle n’apparaît que dans le contrôleur REST qui lit les métadonnées des sites externes pour les aperçus de liens de l’éditeur. Le cœur ne produit aucune balise Open Graph ni Twitter sur vos pages. Trois solutions :

add_action( 'after_setup_theme', function () {
    add_image_size( 'partage-social', 1200, 630, true );
} );

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

function genisoft_balises_partage() {
    if ( ! is_singular() ) {
        return;
    }
    $id    = get_queried_object_id();
    $texte = has_excerpt( $id ) ? get_the_excerpt( $id ) : get_post_field( 'post_content', $id );
    $desc  = wp_trim_words( wp_strip_all_tags( strip_shortcodes( $texte ) ), 30, '…' );

    $balises = array(
        'og:type'        => 'article',
        'og:title'       => get_the_title( $id ),
        'og:description' => $desc,
        'og:url'         => get_permalink( $id ),
        'og:site_name'   => get_bloginfo( 'name' ),
        'og:locale'      => get_locale(),
    );

    $image_id = get_post_thumbnail_id( $id );
    if ( $image_id ) {
        $image = wp_get_attachment_image_src( $image_id, 'partage-social' );
        if ( $image ) {
            $balises['og:image']        = $image[0];
            $balises['og:image:width']  = $image[1];
            $balises['og:image:height'] = $image[2];
            $balises['og:image:alt']    = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
        }
    }

    foreach ( $balises as $propriete => $valeur ) {
        if ( '' !== (string) $valeur ) {
            printf( '<meta property="%s" content="%s">' . "\n", esc_attr( $propriete ), esc_attr( $valeur ) );
        }
    }
    echo '<meta name="twitter:card" content="' . ( $image_id ? 'summary_large_image' : 'summary' ) . '">' . "\n";
}

Placez-le dans une extension maison ou dans le functions.php d’un thème enfant. Exécuté sur notre site de test en WordPress 7.1.3, il produit le type, le titre, la description, l’URL, le nom du site, og:locale en fr_FR et une carte summary pour un article sans image mise en avant. La taille partage-social ne s’applique qu’aux images téléversées après son ajout : régénérez les miniatures existantes. Si votre site convertit ses images en WebP, vérifiez le format servi, car la documentation de Facebook ne cite que JPEG, PNG et GIF.

PrestaShop 9.2 : l’essentiel, avec des trous

Les thèmes Hummingbird (par défaut depuis PrestaShop 9.1) et Classic de PrestaShop 9.2.0 produisent les balises dans le bloc head_open_graph de templates/_partials/head.tpl, complété par templates/catalog/product.tpl sur les fiches produit. Nous avons lu ces fichiers et affiché les pages d’une boutique de test.

BaliseToutes les pagesFiche produit
og:titleMéta-titre de la pageMéta-titre du produit
og:descriptionMéta-description, même videMéta-description du produit
og:urlAdresse courante, paramètres comprisAdresse du produit
og:site_nameNom de la boutiqueNom de la boutique
og:typewebsiteproduct
og:imageAbsentePlus grande image du produit
product:price:* et product:pretax_price:* (prix TTC et HT, devise)—Si le prix est affiché
product:weight:value et units—Si un poids est renseigné
og:image:width, height, alt, og:locale, twitter:*AbsentesAbsentes

Quatre constats tirés de nos essais :

Compléter avec un thème enfant

Plutôt qu’un module qui ajouterait des balises en double, redéfinissez le bloc dans un thème enfant. Créez templates/_partials/head.tpl dans le thème enfant :

{extends file='parent:_partials/head.tpl'}

{block name='head_open_graph'}
  <meta property="og:title" content="{$page.meta.title}">
  {if $page.meta.description}
    <meta property="og:description" content="{$page.meta.description}">
  {/if}
  <meta property="og:url" content="{if $page.canonical}{$page.canonical}{else}{$urls.current_url}{/if}">
  <meta property="og:site_name" content="{$shop.name}">
  <meta property="og:locale" content="{$language.locale|replace:'-':'_'}">
  {if $page.page_name != 'product'}
    <meta property="og:type" content="website">
    <meta property="og:image" content="{$urls.base_url}img/partage-social.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="{$shop.name}">
  {/if}
  <meta name="twitter:card" content="summary_large_image">
{/block}

Déposez une image de 1 200 × 630 px dans le dossier img/ de la boutique sous ce nom, puis videz le cache Smarty. Le front de PrestaShop échappe automatiquement les variables (escape_html activé), d’où l’absence de filtre d’échappement. Nous avons compilé ce bloc avec le Smarty 4.5.7 livré avec PrestaShop 9.2 et des données fictives : guillemets et esperluettes du titre sont bien échappés, la description vide disparaît et og:url reprend la canonique sans paramètre. Pour l’image d’une catégorie, de son côté, il faudrait un module ou un champ dédié. Pour les données structurées, complémentaires, voir notre guide des données structurées PrestaShop.

Vérifier le rendu

  1. Code source : ouvrez la page avec Ctrl+U et cherchez og:. Les balises doivent figurer dans le HTML reçu, sans dépendre de JavaScript, et chacune une seule fois.
  2. Facebook Sharing Debugger : il affiche les balises lues, les avertissements, et relance la lecture de la page. Meta évoque une période de mise à jour standard de 24 heures, que l’outil permet d’éviter.
  3. LinkedIn Post Inspector : il montre l’aperçu tel que LinkedIn le construit.
  4. Une publication de test sur un compte secondaire, pour X et Mastodon.

💡 Outil en ligne pratique : Pour auditer immédiatement la présence et la conformité de vos balises sociales sans dépendre des outils tiers, testez directement votre page avec notre Vérificateur Open Graph. Si vous devez rédiger le bloc complet de balises pour votre code source, vous pouvez aussi le concevoir en quelques secondes grâce à notre Générateur Open Graph.

L’IA pour rédiger les textes, avec relecture

Un modèle de langage peut proposer des variantes de og:title et de og:description à partir du contenu d’une page. C’est utile pour un catalogue dont les méta-descriptions sont vides. Donnez-lui uniquement les données de la page et des contraintes explicites :

À partir des données ci-dessous, propose 3 couples titre / description
pour un aperçu de partage social.
Contraintes : titre de 60 caractères maximum, description de 155 caractères
maximum, en français, sans prix, délai, promotion ni caractéristique absents
des données, sans point d'exclamation.
Données : [nom du produit, catégorie, caractéristiques vérifiées]

Relisez chaque proposition : elle doit rester fidèle à la page et ne rien promettre qu’elle ne tient pas. La page de Google sur le contenu généré par IA, mise à jour le 5 octobre 2026, demande de vérifier les titres, descriptions et textes alternatifs produits avant publication. Pour les visuels, préférez la photo réelle : une image générée ne doit jamais représenter un produit de façon inexacte, et ses conditions d’utilisation commerciale doivent être vérifiées. La même méthode s’applique aux textes alternatifs, décrite dans notre guide des balises ALT sur PrestaShop.

Questions fréquentes

Les balises Open Graph influencent-elles le référencement ?

Elles servent à l’affichage des partages. Les moteurs de recherche s’appuient sur la balise <title>, la méta-description et le contenu. Un aperçu soigné peut en revanche améliorer le taux de clic sur les réseaux.

Pourquoi Facebook affiche-t-il encore l’ancienne image ?

Facebook met les images en cache par adresse. Changez le nom du fichier image, puis relancez la lecture dans le Sharing Debugger.

PrestaShop a-t-il besoin d’un module Open Graph ?

Pas pour les fiches produit, déjà couvertes par les thèmes Hummingbird et Classic. Il en faut un, ou un thème enfant, pour l’image des autres pages, og:locale, les cartes X et une og:url sans paramètres.

Faut-il des balises Twitter si Open Graph est en place ?

Seule twitter:card est vraiment utile : elle choisit le format de l’aperçu sur X. Le titre, la description et l’image peuvent venir des balises og:.

Sources

Agence web PrestaShop & WordPress

Agence web spécialisée PrestaShop et WordPress : création, maintenance, sécurité, performance et référencement. Nos tutoriels sont issus de nos interventions sur de vraies boutiques.

L'agence Genisoft → LinkedIn →