[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":22,"$fm8EToU32U55WglVrYRebOlIKZEIKKW38mSptHzUfok0":103,"footer-db":142,"megamenu":161,"$fs2QquUeTPmEJbUBFC-kftfq4OHpRBO8asgQ_ykvLO6g":216,"header-db":230},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"columns":23},[24,40,70,91],{"title":25,"links":26},"Plateforme",[27,31,34,37],{"label":28,"href":29,"external":30},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":32,"href":33,"external":30},"Devenir Ambassadeur","\u002Fambassadeur",{"label":35,"href":36,"external":30},"Modules PrestaShop","\u002Fmodules",{"label":38,"href":39,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":41,"links":42},"Le Synedre",[43,46,49,52,55,58,61,64,67],{"label":44,"href":45,"external":30},"L'histoire","\u002Fsynedre",{"label":47,"href":48,"external":30},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":50,"href":51,"external":30},"L'équipe","\u002Fequipe",{"label":53,"href":54,"external":30},"Le réacteur en direct","\u002Freacteur",{"label":56,"href":57,"external":30},"Le Drill (entraînement)","\u002Fdrill",{"label":59,"href":60,"external":30},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":62,"href":63,"external":30},"Les agents IA","\u002Fagents-ia",{"label":65,"href":66,"external":30},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":68,"href":69,"external":30},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":71,"links":72},"Ressources",[73,76,79,82,85,88],{"label":74,"href":75,"external":30},"Blog","\u002Fblog",{"label":77,"href":78,"external":30},"Academy","\u002Facademy",{"label":80,"href":81,"external":30},"Dictionnaire","\u002Fdictionnaire",{"label":83,"href":84,"external":30},"Expertise PrestaShop","\u002Fexpertise",{"label":86,"href":87,"external":30},"Flywheel","\u002Fflywheel",{"label":89,"href":90,"external":30},"Manifeste","\u002Fmanifeste",{"title":92,"links":93},"À propos",[94,97,100],{"label":95,"href":96,"external":30},"Alexandre Carette","\u002Fa-propos",{"label":98,"href":99,"external":30},"Dossier de presse","\u002Fpresse",{"label":101,"href":102,"external":30},"Contact","\u002Fcontact",{"title":104,"slug":105,"metaDescription":106,"category":107,"tags":108,"difficulty":115,"psVersions":116,"content":120,"faq":121,"tldr":137,"readingTime":138,"generatedAt":139,"publishDate":139,"relatedArticles":140,"sourceCategory":141},"Balises Open Graph mal positionnées dans PrestaShop : diagnostic et correction","balises-open-graph-mal-positionnees-prestashop-diagnostic-correction","Vos balises Open Graph s'affichent visiblement sur votre boutique PrestaShop ? Découvrez comment diagnostiquer et corriger ce problème de positionnement dans le code.","seo",[109,110,111,112,113,114],"open-graph","meta-tags","header-tpl","facebook","seo-technique","smarty","intermediaire",[117,118,119],"1.6","1.7","8.x","\u003Ch2>Comprendre le problème : des balises Open Graph visibles à l'écran\u003C\u002Fh2>\n\u003Cp>Il arrive qu'un marchand PrestaShop découvre des lignes de texte incompréhensibles affichées directement sur sa boutique — des fragments ressemblant à \u003Ccode>og:title\u003C\u002Fcode>, \u003Ccode>og:description\u003C\u002Fcode> ou \u003Ccode>og:image\u003C\u002Fcode> 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.\u003C\u002Fp>\n\u003Ch3>Qu'est-ce que les balises Open Graph ?\u003C\u002Fh3>\n\u003Cp>Les balises Open Graph (spécification \u003Ca href=\"https:\u002F\u002Fogp.me\u002F\">ogp.me\u003C\u002Fa>) sont des métadonnées HTML qui permettent aux réseaux sociaux — Facebook, LinkedIn, Twitter\u002FX — d'afficher un aperçu riche lorsqu'un lien est partagé. Elles se présentent sous cette forme :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<meta property=\"og:title\" content=\"Mon produit PrestaShop\" \u002F>\n<meta property=\"og:description\" content=\"Description du produit\" \u002F>\n<meta property=\"og:image\" content=\"https:\u002F\u002Fma-boutique.fr\u002Fimg\u002Fproduit.jpg\" \u002F>\n<meta property=\"og:url\" content=\"https:\u002F\u002Fma-boutique.fr\u002Fproduit\" \u002F>\n<meta property=\"og:type\" content=\"product\" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ces balises sont \u003Cstrong>invisibles pour les visiteurs\u003C\u002Fstrong> dans des conditions normales : elles doivent impérativement se trouver entre les balises \u003Ccode>\u003Chead>\u003C\u002Fcode> et \u003Ccode>\u003C\u002Fhead>\u003C\u002Fcode> du document HTML. Si elles apparaissent visuellement sur la page, c'est qu'elles ont été injectées dans le \u003Ccode>\u003Cbody>\u003C\u002Fcode> au lieu du \u003Ccode>\u003Chead>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Diagnostic : identifier l'origine du problème\u003C\u002Fh2>\n\u003Ch3>Étape 1 — Inspecter le code source\u003C\u002Fh3>\n\u003Cp>Ouvrez le code source de votre page (Ctrl+U dans votre navigateur) et recherchez les balises \u003Ccode>og:\u003C\u002Fcode>. Vérifiez si elles se trouvent :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Dans le `\u003Chead>`** → comportement normal, elles ne devraient pas être visibles\u003C\u002Fli>\n\u003Cli>**Après la balise `\u003Cbody>` ou dans un conteneur comme `#center_column`** → c'est la cause du problème\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Étape 2 — Identifier le module ou le template responsable\u003C\u002Fh3>\n\u003Cp>Dans la grande majorité des cas, ce problème provient d'un \u003Cstrong>module tiers\u003C\u002Fstrong> (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 \u003Ccode>displayHeader\u003C\u002Fcode> qui injecte dans le \u003Ccode>\u003Chead>\u003C\u002Fcode>, le module utilise un hook de contenu comme \u003Ccode>displayTop\u003C\u002Fcode>, \u003Ccode>displayHome\u003C\u002Fcode> ou \u003Ccode>displayBanner\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Les pistes à explorer dans l'ordre :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Module Facebook \u002F 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.\u003C\u002Fli>\n\u003Cli>**Module slider ou carrousel** — Certains modules de slider injectent des balises meta dans leurs templates `.tpl` de façon incorrecte.\u003C\u002Fli>\n\u003Cli>**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 `\u003C\u002Fhead>` ou après le début du contenu principal.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Étape 3 — Vérification rapide via le hook\u003C\u002Fh3>\n\u003Cp>Dans le back-office PrestaShop, allez dans \u003Cstrong>Apparence > Positions\u003C\u002Fstrong> et recherchez le module suspect. Vérifiez sur quel hook il est greffé :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>`displayHeader` → correct (injection dans le `\u003Chead>`)\u003C\u002Fli>\n\u003Cli>`displayTop`, `displayHome`, `displayBanner`, etc. → incorrect pour des balises meta\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Correction selon la version de PrestaShop\u003C\u002Fh2>\n\u003Ch3>Sur PrestaShop 1.6\u003C\u002Fh3>\n\u003Cp>Le fichier à vérifier est \u003Ccode>themes\u002Fvotre-theme\u002Fheader.tpl\u003C\u002Fcode>. Les balises Open Graph doivent se trouver \u003Cstrong>avant\u003C\u002Fstrong> la fermeture \u003Ccode>\u003C\u002Fhead>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* Dans header.tpl, AVANT <\u002Fhead> *}\n<meta property=\"og:title\" content=\"{$meta_title|escape:'html':'UTF-8'}\" \u002F>\n<meta property=\"og:description\" content=\"{$meta_description|escape:'html':'UTF-8'}\" \u002F>\n<meta property=\"og:url\" content=\"{$canonical_url|escape:'html':'UTF-8'}\" \u002F>\n{if isset($product) && $product->id}\n  <meta property=\"og:image\" content=\"{$link->getImageLink($product->link_rewrite, $product->id_image, 'large_default')|escape:'html':'UTF-8'}\" \u002F>\n  <meta property=\"og:type\" content=\"product\" \u002F>\n{else}\n  <meta property=\"og:image\" content=\"{$img_ps_dir}logo.jpg\" \u002F>\n  <meta property=\"og:type\" content=\"website\" \u002F>\n{\u002Fif}\n<\u002Fhead>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Si un module injecte les balises au mauvais endroit, déplacez-le vers le hook \u003Ccode>displayHeader\u003C\u002Fcode> depuis \u003Cstrong>Apparence > Positions > Greffer un module\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Ch3>Sur PrestaShop 1.7 et 8.x\u003C\u002Fh3>\n\u003Cp>L'architecture a évolué. Les balises meta sont gérées dans \u003Ccode>themes\u002Fvotre-theme\u002Ftemplates\u002F_partials\u002Fhead.tpl\u003C\u002Fcode>. PrestaShop 1.7+ gère nativement certaines balises Open Graph, mais les modules peuvent toujours interférer.\u003C\u002Fp>\n\u003Cp>Vérifiez le fichier \u003Ccode>head.tpl\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{block name='head_open_graph'}\n  <meta property=\"og:title\" content=\"{$page.meta.title}\" \u002F>\n  <meta property=\"og:description\" content=\"{$page.meta.description}\" \u002F>\n  <meta property=\"og:url\" content=\"{$urls.current_url}\" \u002F>\n  <meta property=\"og:site_name\" content=\"{$shop.name}\" \u002F>\n{\u002Fblock}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sur PrestaShop 8.x, si vous utilisez un module qui doit injecter des balises dans le \u003Ccode>\u003Chead>\u003C\u002Fcode>, assurez-vous qu'il utilise le hook \u003Ccode>displayHeader\u003C\u002Fcode> ou la méthode \u003Ccode>Media::addJsDef()\u003C\u002Fcode> \u002F \u003Ccode>$this->context->controller->addCSS()\u003C\u002Fcode> pour ses ressources.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques pour les balises Open Graph\u003C\u002Fh2>\n\u003Ch3>1. Valider systématiquement le rendu\u003C\u002Fh3>\n\u003Cp>Utilisez l'outil \u003Ca href=\"https:\u002F\u002Fdevelopers.facebook.com\u002Ftools\u002Fdebug\u002F\">Facebook Sharing Debugger\u003C\u002Fa> pour vérifier que vos balises sont correctement lues. Cet outil vous montre exactement ce que Facebook détecte sur votre page.\u003C\u002Fp>\n\u003Ch3>2. Balises recommandées pour un site e-commerce\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- Balises obligatoires -->\n<meta property=\"og:title\" content=\"Titre du produit ou de la page\" \u002F>\n<meta property=\"og:type\" content=\"product\" \u002F>\n<meta property=\"og:image\" content=\"URL de l'image principale\" \u002F>\n<meta property=\"og:url\" content=\"URL canonique\" \u002F>\n\n<!-- Balises recommandées -->\n<meta property=\"og:description\" content=\"Description courte\" \u002F>\n<meta property=\"og:site_name\" content=\"Nom de la boutique\" \u002F>\n<meta property=\"og:locale\" content=\"fr_FR\" \u002F>\n<meta property=\"product:price:amount\" content=\"29.99\" \u002F>\n<meta property=\"product:price:currency\" content=\"EUR\" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>3. Ne jamais supprimer les balises Open Graph\u003C\u002Fh3>\n\u003Cp>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 \u003Cstrong>optimiser et les positionner correctement\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Ch3>4. Attention aux modules qui dupliquent les balises\u003C\u002Fh3>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Pour détecter les doublons dans le code source :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\ncurl -s https:\u002F\u002Fvotre-boutique.fr | grep -c 'og:title'\n# Si le résultat est > 1, vous avez des doublons\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Récapitulatif de la procédure\u003C\u002Fh2>\n\u003Col>\n\u003Cli>**Constatez** le problème : des balises Open Graph visibles sur la page\u003C\u002Fli>\n\u003Cli>**Inspectez** le code source pour localiser les balises dans le `\u003Cbody>`\u003C\u002Fli>\n\u003Cli>**Identifiez** le module ou le template responsable (module Facebook, slider, header.tpl)\u003C\u002Fli>\n\u003Cli>**Corrigez** en déplaçant les balises dans le `\u003Chead>` ou en reconfigurant le hook du module\u003C\u002Fli>\n\u003Cli>**Validez** avec le Facebook Sharing Debugger\u003C\u002Fli>\n\u003Cli>**Vérifiez** l'absence de doublons\u003C\u002Fli>\n\u003C\u002Ful>",[122,125,128,131,134],{"q":123,"a":124},"Pourquoi des balises og: s'affichent en texte visible sur ma boutique PrestaShop ?","Les balises Open Graph (og:title, og:description, etc.) sont normalement invisibles car elles doivent se trouver dans la section \u003Chead> du HTML. Si elles apparaissent à l'écran, c'est qu'un module ou une modification du thème les injecte dans le \u003Cbody> de la page, souvent via un mauvais hook (displayTop au lieu de displayHeader). Identifiez le module responsable dans Apparence > Positions et déplacez-le sur le hook displayHeader.",{"q":126,"a":127},"Faut-il garder les balises Open Graph sur une boutique PrestaShop ?","Oui, absolument. Les balises Open Graph contrôlent l'apparence de vos liens lorsqu'ils sont partagés sur Facebook, LinkedIn ou Twitter\u002FX. Sans elles, les réseaux sociaux génèrent un aperçu aléatoire de votre page. Pour un site e-commerce, des balises optimisées avec le bon titre, la bonne image produit et le bon prix augmentent significativement le taux de clic depuis les réseaux sociaux.",{"q":129,"a":130},"Comment vérifier que mes balises Open Graph sont correctes sur PrestaShop ?","Utilisez le Facebook Sharing Debugger (developers.facebook.com\u002Ftools\u002Fdebug\u002F) en y collant l'URL de votre page. L'outil affiche exactement les métadonnées détectées. Vous pouvez aussi inspecter le code source de votre page (Ctrl+U) et vérifier que les balises og: se trouvent bien entre \u003Chead> et \u003C\u002Fhead>, sans doublon.",{"q":132,"a":133},"Quel hook PrestaShop utiliser pour injecter des balises meta via un module ?","Le hook displayHeader est le seul approprié pour injecter des balises \u003Cmeta> dans le \u003Chead> de la page. Les hooks comme displayTop, displayHome ou displayBanner injectent du contenu dans le \u003Cbody>, ce qui rend les balises meta visibles à l'écran au lieu de les traiter comme des métadonnées. Sur PrestaShop 8.x, vous pouvez aussi utiliser le hook actionFrontControllerSetMedia pour enregistrer des assets.",{"q":135,"a":136},"Comment éviter les doublons de balises Open Graph avec un module et un thème PrestaShop ?","Vérifiez d'abord si votre thème génère déjà des balises Open Graph dans head.tpl ou _partials\u002Fhead.tpl. Si c'est le cas et que vous installez un module qui en ajoute aussi, désactivez l'une des deux sources. Vous pouvez détecter les doublons en affichant le code source de votre page et en cherchant 'og:title' — si ce terme apparaît plus d'une fois, il y a un conflit à résoudre.","Si des balises Open Graph (og:title, og:description) s'affichent en texte visible sur votre boutique PrestaShop, c'est qu'un module les injecte dans le \u003Cbody> au lieu du \u003Chead>. Identifiez le module fautif, déplacez-le sur le hook displayHeader, et validez avec le Facebook Sharing Debugger.",5,"2026-03-21T14:33:05.000Z",[],"Utilisation de PrestaShop : configuration et difficultés",{"footer":143},{"theme":144,"description":145,"hours":145,"logo":146,"contact":149,"social":150,"bottomBar":160},"dark",null,{"src":147,"href":148,"alt":95},"\u002Flogo-ac.svg","\u002F",{"email":145,"phone":145,"address":145,"cta":145},[151,154,157],{"platform":152,"href":153,"label":152},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":155,"href":156,"label":155},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":158,"href":159,"label":158},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":145},{"items":162},[163,171,177,183,191,199,204,210],{"id":164,"type":165,"label":166,"href":84,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":168,"children":169,"psChildren":170},41,"link",{"fr":167},"Expertise",0,[],[],{"id":172,"type":165,"label":173,"href":75,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":174,"children":175,"psChildren":176},42,{"fr":74},1,[],[],{"id":178,"type":165,"label":179,"href":36,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":180,"children":181,"psChildren":182},43,{"fr":35},2,[],[],{"id":184,"type":165,"label":185,"href":187,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":188,"children":189,"psChildren":190},44,{"fr":186},"Outils IA","\u002Foutils-ia",3,[],[],{"id":192,"type":165,"label":193,"href":29,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":195,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":196,"children":197,"psChildren":198},45,{"fr":194},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":200,"type":165,"label":201,"href":78,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":138,"children":202,"psChildren":203},46,{"fr":77},[],[],{"id":205,"type":165,"label":206,"href":96,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":207,"children":208,"psChildren":209},47,{"fr":92},6,[],[],{"id":211,"type":165,"label":212,"href":102,"icon":145,"description":145,"badge":145,"groupTitle":145,"style":145,"gridColumns":145,"cssClass":145,"psCategoryId":145,"showPsChildren":30,"position":213,"children":214,"psChildren":215},48,{"fr":101},7,[],[],{"academy":217,"blog":218,"expertise":229},[],[219,223,226],{"title":220,"url":221,"score":174,"type":222},"Référencement PrestaShop 2026 : le guide complet SEO + IA","\u002Fblog\u002Fseo\u002Freferencement\u002Fguide-complet-prestashop-2026","blog",{"title":224,"url":225,"score":174,"type":222},"SEO Google classique pour PrestaShop : 7 leviers techniques","\u002Fblog\u002Fseo\u002Freferencement\u002Fseo-google-classique-prestashop",{"title":227,"url":228,"score":174,"type":222},"AIO et GEO pour PrestaShop : optimiser pour les moteurs IA","\u002Fblog\u002Fseo\u002Freferencement\u002Faio-geo-intelligence-artificielle-prestashop",[],{"header":231},{"logo":232,"topBar":235,"contactEmail":238,"features":239,"navBar":145},{"src":147,"alt":233,"text":95,"href":148,"class":234},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":145,"showLanguages":30,"align":236,"languages":237},"left",[],"contact@alexandrecarette.fr",{"showSearch":30,"showWishlist":30,"showLogin":20,"showContact":30,"showCart":30,"stickyHeader":20,"headerLayout":240},"inline"]