Balises Open Graph mal positionnées dans PrestaShop : diagnostic et correction

Comprendre le problème : des balises Open Graph visibles à l'écran

Il arrive qu'un marchand PrestaShop découvre des lignes de texte incompréhensibles affichées directement sur sa boutique — des fragments ressemblant à og:title, og:description ou og:image apparaissent dans le corps visible de la page. Ce phénomène, loin d'être anodin, révèle un problème de positionnement des balises Open Graph dans le code source du thème.

Qu'est-ce que les balises Open Graph ?

Les balises Open Graph (spécification ogp.me) sont des métadonnées HTML qui permettent aux réseaux sociaux — Facebook, LinkedIn, Twitter/X — d'afficher un aperçu riche lorsqu'un lien est partagé. Elles se présentent sous cette forme :

<meta property="og:title" content="Mon produit PrestaShop" />
<meta property="og:description" content="Description du produit" />
<meta property="og:image" content="https://ma-boutique.fr/img/produit.jpg" />
<meta property="og:url" content="https://ma-boutique.fr/produit" />
<meta property="og:type" content="product" />

Ces balises sont invisibles pour les visiteurs dans des conditions normales : elles doivent impérativement se trouver entre les balises et du document HTML. Si elles apparaissent visuellement sur la page, c'est qu'elles ont été injectées dans le au lieu du .

Diagnostic : identifier l'origine du problème

Étape 1 — Inspecter le code source

Ouvrez le code source de votre page (Ctrl+U dans votre navigateur) et recherchez les balises og:. Vérifiez si elles se trouvent :

• **Dans le ``** → comportement normal, elles ne devraient pas être visibles
• **Après la balise `` ou dans un conteneur comme `#center_column`** → c'est la cause du problème

Étape 2 — Identifier le module ou le template responsable

Dans la grande majorité des cas, ce problème provient d'un module tiers (souvent un module d'intégration Facebook ou de partage social) qui accroche (hook) ses balises Open Graph au mauvais endroit. Au lieu d'utiliser le hook displayHeader qui injecte dans le , le module utilise un hook de contenu comme displayTop, displayHome ou displayBanner.

Les pistes à explorer dans l'ordre :

1. **Module Facebook / Social Sharing** — Vérifiez si un module de type « Facebook Open Graph » ou « Social Share » est installé. Désinstallez-le temporairement pour confirmer qu'il est en cause.
2. **Module slider ou carrousel** — Certains modules de slider injectent des balises meta dans leurs templates `.tpl` de façon incorrecte.
3. **Template `header.tpl` personnalisé** — Si le thème a été modifié manuellement, vérifiez que les balises n'ont pas été placées après la fermeture du `` ou après le début du contenu principal.

Étape 3 — Vérification rapide via le hook

Dans le back-office PrestaShop, allez dans Apparence > Positions et recherchez le module suspect. Vérifiez sur quel hook il est greffé :

• `displayHeader` → correct (injection dans le ``)
• `displayTop`, `displayHome`, `displayBanner`, etc. → incorrect pour des balises meta

Correction selon la version de PrestaShop

Sur PrestaShop 1.6

Le fichier à vérifier est themes/votre-theme/header.tpl. Les balises Open Graph doivent se trouver avant la fermeture :

{* Dans header.tpl, AVANT </head> *}
<meta property="og:title" content="{$meta_title|escape:'html':'UTF-8'}" />
<meta property="og:description" content="{$meta_description|escape:'html':'UTF-8'}" />
<meta property="og:url" content="{$canonical_url|escape:'html':'UTF-8'}" />
{if isset($product) && $product->id}
  <meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $product->id_image, 'large_default')|escape:'html':'UTF-8'}" />
  <meta property="og:type" content="product" />
{else}
  <meta property="og:image" content="{$img_ps_dir}logo.jpg" />
  <meta property="og:type" content="website" />
{/if}
</head>

Si un module injecte les balises au mauvais endroit, déplacez-le vers le hook displayHeader depuis Apparence > Positions > Greffer un module.

Sur PrestaShop 1.7 et 8.x

L'architecture a évolué. Les balises meta sont gérées dans themes/votre-theme/templates/_partials/head.tpl. PrestaShop 1.7+ gère nativement certaines balises Open Graph, mais les modules peuvent toujours interférer.

Vérifiez le fichier head.tpl :

{block name='head_open_graph'}
  <meta property="og:title" content="{$page.meta.title}" />
  <meta property="og:description" content="{$page.meta.description}" />
  <meta property="og:url" content="{$urls.current_url}" />
  <meta property="og:site_name" content="{$shop.name}" />
{/block}

Sur PrestaShop 8.x, si vous utilisez un module qui doit injecter des balises dans le , assurez-vous qu'il utilise le hook displayHeader ou la méthode Media::addJsDef() / $this->context->controller->addCSS() pour ses ressources.

Bonnes pratiques pour les balises Open Graph

1. Valider systématiquement le rendu

Utilisez l'outil Facebook Sharing Debugger pour vérifier que vos balises sont correctement lues. Cet outil vous montre exactement ce que Facebook détecte sur votre page.

2. Balises recommandées pour un site e-commerce

<!-- Balises obligatoires -->
<meta property="og:title" content="Titre du produit ou de la page" />
<meta property="og:type" content="product" />
<meta property="og:image" content="URL de l'image principale" />
<meta property="og:url" content="URL canonique" />

<!-- Balises recommandées -->
<meta property="og:description" content="Description courte" />
<meta property="og:site_name" content="Nom de la boutique" />
<meta property="og:locale" content="fr_FR" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="EUR" />

3. Ne jamais supprimer les balises Open Graph

Même si ces balises semblent « inutiles » au quotidien, elles jouent un rôle stratégique. Le web sémantique repose de plus en plus sur ces métadonnées structurées. Facebook, LinkedIn et même certains moteurs de recherche les exploitent pour comprendre et afficher votre contenu. La bonne approche n'est pas de les supprimer, mais de les optimiser et les positionner correctement.

4. Attention aux modules qui dupliquent les balises

Sur PrestaShop 8.x, vérifiez que vous n'avez pas à la fois un module et votre thème qui génèrent des balises Open Graph. Les doublons peuvent créer des conflits — Facebook prend généralement la première occurrence, ce qui n'est pas toujours celle que vous souhaitez.

Pour détecter les doublons dans le code source :

curl -s https://votre-boutique.fr | grep -c 'og:title'
# Si le résultat est > 1, vous avez des doublons

Récapitulatif de la procédure

1. **Constatez** le problème : des balises Open Graph visibles sur la page
2. **Inspectez** le code source pour localiser les balises dans le ``
3. **Identifiez** le module ou le template responsable (module Facebook, slider, header.tpl)
4. **Corrigez** en déplaçant les balises dans le `` ou en reconfigurant le hook du module
5. **Validez** avec le Facebook Sharing Debugger
6. **Vérifiez** l'absence de doublons