Prestashop 1.6 couplé à Smarty permet d’améliorer grandement et d’automatiser le SEO de son e-commerce, ce en quelques lignes de code à peine. Il est ainsi possible d’automatiser les balises title et description, les balises Open Graph pour Facebook, mais dans le cas d’un Prestashop multilingue, Google suggère l’utilisation d’une balise meta nommée hreflang.
Voyons en détail ce qu’est une balise hreflang, puis comment l’implémenter aisément dans notre thème Prestashop 1.6.
1/ La balise hreflang
Dans le cadre d’un site en plusieurs langues, deux solutions sont envisageables :
- posséder le même site avec une extension de domaine correspondant à un pays spécifique (comme avoir https://www.monsite.fr et parallèlement https://www.mysite.co.uk)
- posséder un seul site internet mais avec dans l’URL un paramètre de langue, ce qui donnerait https://www.monsite.fr/fr/ et https://www.monsite.fr/en/
L’avantage de posséder une extension de domaine permet un meilleur positionnement aux niveaux des moteurs de recherche selon le pays, mais le coût en hébergement peut se retrouver nettement plus considérable (et cela sous-entend bien évidemment une conception SEO irréprochable, par site, selon la langue)
En revanche, les paramètres de langue ne permettent pas un référencement équivalent à la première solution, malgré un coût pour le e-commerçant bien amoindri. Heureusement, la balise hreflang optimise le crawl des moteurs de recherche afin d’optimiser cela.
La balise hreflang est une indication fournie aux moteurs de recherche précisant une version d’une page internet dans une langue différente que celle affichée.
Ainsi, si notre page est en /fr/, nous indiquerons toutes les autres langues, aidant de la sorte les moteurs à bien enregistrer et mettre en avant notre contenu multilingue.
Cette balise n’est donc utile que dans un contexte international. Plus loin encore, sachez que les codes langues sur internet précisent le pays. Vous aurez ainsi peut-être croisé (comme Team Ever le constate régulièrement) des codes langues comme en-us, en-uk (qui spécifient une langue commune mais parlée dans des pays différents).
Il s’agit là d’une information optionnelle, mais non négligeable, à passer dans l’en-tête HTTP de son site. Il est à noter que le HTTPS impacte ces informations (et voyez ici comment correctement passer votre site Prestashop sous un certificat SSL).
Donc, comment automatiser ces balises, dans l’idée où vous pourriez ajouter dans le temps davantage de langues, et de manière à ne pas renseigner manuellement l’information hreflang ?
2/ Automatiser le hreflang sur Prestashop
Afin de mettre en place une telle balise, il est important de bien définir sur quelle page l’on se trouve. Le code ne prend pas en compte les modules mettant en avant des pages spécifiques, comme un blog, ou comme toute page étant générée depuis un module.
La variable Smarty de Prestashop $page_name nous permet d’emblée de définir sur quel template nous nous trouvons (un produit, une catégorie, la page d’accueil…)
Il nous faut plusieurs informations :
- La page affichée (produit, etc)
- Le code langue
- Les paramètres passés dans l’URL (tout ce qui suit le nom de domaine suivi du code langue)
Smarty sous Prestashop 1.6 nous permet donc, grâce à $link, de récupérer un lien précis.
Le code, à placer parmi les meta dans le header.tpl (mais surtout pas dans une boucle foreach) est par conséquent celui-ci :
<!-- add balise hreflang -->
{if $page_name == 'category'}
{foreach $languages as $lang}
{if $lang_iso != $lang.iso_code}
<link rel="alternate" hreflang="{$lang.language_code}" href="{$link->getCategoryLink($smarty.get.id_category, null, $lang.id_lang,null,null )}/" />
{/if}
{/foreach}
{/if}
{if $page_name == 'product'}
{foreach $languages as $lang}
{if $lang_iso != $lang.iso_code}
<link rel="alternate" hreflang="{$lang.language_code}" href="{$link->getProductLink($smarty.get.id_product, null, null, null, $lang.id_lang, null, 0, false)}/" />
{/if}
{/foreach}
{/if}
{if $page_name == 'cms'}
{foreach $languages as $lang}
{if $lang_iso != $lang.iso_code}
<link rel="alternate" hreflang="{$lang.language_code}" href="{$link->getCMSLink($smarty.get.id_cms, null, false, $lang.id_lang)}/" />
{/if}
{/foreach}
{/if}
{if $page_name == 'manufacturer'}
{foreach $languages as $lang}
{if $lang_iso != $lang.iso_code}
<link rel="alternate" hreflang="{$lang.language_code}" href="{$link->getManufacturerLink($smarty.get.id_manufacturer, null, $lang.id_lang , null)}/" />
{/if}
{/foreach}
{/if}
{if $page_name == 'index'}
{foreach $languages as $lang}
{if $lang_iso != $lang.iso_code}
<link rel="alternate" hreflang="{$lang.language_code}" href="/{$lang.iso_code}/"/>
{/if}
{/foreach}
{/if}
Notez que systématiquement le foreach nous permet de lister toutes les langues disponibles sur le site. En outre, la condition if nous permet de tester directement la page affichée.
Le résultat ?
Bluffant ! A vous d’essayer !
Si vous utilisez Prestashop 1.7, plus la peine de vous embêter, un module gratuit est disponible ici :
Module hreflang pour Prestashop 1.7
Imprimer
Ludovic
Bonjour,
Ce code fonctionne-t-il aussi pour Prestashop 1.7.2 ?
Si oui dans quel fichier header.tpl dois-je le coller ? J’ai un fichier à la racine du site mais j’en ai aussi 9 autres… dont certains dans les thèmes.
Si je comprends bien le code, les pages qui seront concernées seront la homepage, les pages catégories, produits, cms, fabricants. Si j’ai des pages supplémentaires qui ne dépendent pas d’une « catégorie » particulière coment faire en sorte qu’elles soient prises en compte ?
Merci pour vos lumières.
Cordialement
Cyril CHALAMON
Bonjour Ludovic,
Ce code fonctionne sous Prestashop 1.7 mais une syntaxe change : il faut utiliser la variable
$page.page_nameet placer le code dans le thème dans /templates/partials/head.tplCela dépend parfois du thème utilisé cependant.
Alexandre
Bonjour Cyril,
J’ai essayé ce bout de code, mais je ne vois pas d’effet depuis la console. J’utilise le thème classic sur prestashop 1.7.2.
Il suffit juste de placer ce code à la fin du fichier /templates/partials/head.tpl et remplacer $page_name par $page.page_name ?
Merci pour votre aide.
Bien cordialement
Alexandre
Cyril CHALAMON
Bonjour,
En effet, la liste complète des langues n’est plus semble-t-il accessible aussi facilement. Par exemple, le module ps_languageselector semble le seul à retourner les informations utiles, à savoir
$languages = Language::getLanguages(true, $this->context->shop->id);Je crois donc que sans un override du FrontController ou un module externe, il ne sera pas aussi facile de mettre en place du hreflang.
Un futur module peut-être ?. 🙂
Alexandre
Bonjour,
Merci pour votre réponse rapide. Bon développement !
Bien cordialement.
Roche
Bonjour,
je suis sur la 1.7 de presta, j’ai modifié le code avec $page.page_name mais cela ne fonctionne pas, je me demande si les variables dans la balise foreach sont les même sur presta 1.7 et je me demande aussi si les autres balise $lang.language_code etc sont toujours bonne ainsi que le lien href.
J’ai l’impression que mon code ne fonctionne pas a cause des variables mais je me demande aussi si cela ne viens pas du fait que je soit en ssl sur tout le site.
Une idée ?
Merci d’avance, cordialement.
Cyril CHALAMON
Oui en effet, sous Prestashop 1.7 les variables de langue ne sont plus aussi facilement accessibles. J’ai donc bien l’intention de coder un petit module facile pour résoudre tout cela une bonne fois pour toutes.
Je suis assez d’accord avec le choix de Prestashop de brider un peu les variables renvoyées, trop d’infos tue l’info 🙂
« Stay tuned » pour la sortie du module, qui ne sera pas bien complexe à créer !
Roche
Super on trouve beaucoup de module mais beaucoup de module payant mon but étant a la base d’apprendre les choses par moi même en tout cas merci de répondre.
Il serait possible de comprendre un peu se qu’il se passe sur presta 1.7 ? Car j’ai un peu de mal je me demande si je ne vais pas créer moi même une variable pour résoudre le souci ^^
Cyril CHALAMON
Sous Prestashop 1.7, les informations de langue ne sont plus appelées que dans leur propre contexte dans le FrontController. Il faut donc ajouter une nouvelle variable pour résoudre cela.
Avec le constructeur de module de Prestashop, il n’est pas difficile de résoudre cela rapidement, en une vingtaine de minutes j’ai pu en réaliser un, disponible gratuitement ici : https://www.team-ever.com/produit/prestashop-module-hreflang/
Sans override, c’est tout de même plus propre 🙂
violetfashionshop
Bonjour Cyril,
Merci pour le partage de ce module, en plus gratuit ! N’étant pas expert, j’ai fait un test sur https://app.hreflang.org/ et il semble bien avoir mes langues alternatives, mais la langue principale de l’url ne semble pas référencée. Qu’en pensez vous ?
Voici le résultat du test :
0 http://violetfashionshop.com/en/62-wellness-beauty Errors
Page does not self-reference itself in any of its Hreflang tags/headers what is self-referencing?
1 fr-FR http://violetfashionshop.com/fr/62-bien-etre-beaute Errors
Page does not self-reference itself in any of its Hreflang tags/headers what is self-referencing?
2 vi-VN http://violetfashionshop.com/vn/62-suc-khoe-lam-dep Errors
Page does not self-reference itself in any of its Hreflang tags/headers what is self-referencing?
Cordialement.
Alexandre
Cyril CHALAMON
Ah je vois, il s’agit de l’absence de
x-defaultdans le code. Je viens de mettre à jour le module pour ajouter cela, c’est très facile à faire avecConfiguration::get('PS_LANG_DEFAULT')Il s’agit en fait de préciser la page de langue par défaut aux moteurs de recherche
violetfashionshop
Bonjour,
Google a enfin vu les balises, cependant il me trouve aussi des erreurs. Il me dit qu’il n’y a pas de balise de renvoi, et cela semble être pour les Url de déclinaisons de produit.
Url prinicipal : /vn/ao-phong/645-b-doi-ao-nam-n-dai-tay-trn-mau-kiu-dang.html
Url d’une déclinaison de produit :/vn/ao-phong/645-807-b-doi-ao-nam-n-dai-tay-trn-mau-kiu-dang.html
Qu’en pensez vous ?
Cordialement
sysyx63
Le souci est toujours la, sur index tout est rouge et la langue de base est rempalcé par x-default, les catégories tout est vert mais la langue de base est aussi x-default,
Les produits avec déclinaison sont rouge et langue de base changé par x-default, produit sans déclinaison sont vert mais toujours la même chose x-default a la place de la langue de base.
En résumé la langue de base est modifié par x-default ( pour moi le français n’existe donc pas ) sur tout les test.
Le code se met en vert pour les produits sans déclinaison, les categories, les cms et les marques ( mais toujours avec le souci x-deault)
Le code se met en rouge pour l’index et les produits avec déclinaison.
sysyx63
Un truc dans se style dans le code devrais fonctionner
{foreach $everpshreflang as $everlang}
{if $page.page_name == ‘cms’}
getCMSLink($smarty.get.id_cms, null, false, $everlang.id_lang, null, false)} »/>
{/if}
{if $page.page_name == ‘manufacturer’}
getManufacturerLink($smarty.get.id_manufacturer, null, $everlang.id_lang, null, false)} »/>
{/if}
{if $page.page_name == ‘category’}
getCategoryLink($smarty.get.id_category, null, $everlang.id_lang, null, null, false)} »/>
{/if}
{if $page.page_name == ‘product’}
getProductLink($smarty.get.id_product, null, {$product.category}, null, $everlang.id_lang, null, $product.id_product_attribute, false, false, $product.attributes.id_attribute, array())} »/>
{/if}
{if $page.page_name == ‘index’}
{/if}
{/foreach}
sauf qu’après pour le xdefault je ne sais pas comment l’intégrer correctement
Cyril CHALAMON
Le x-default devrait être la racine du site sans aucun paramètre de langue, mais avec Prestashop cela vous retournera des erreurs de redirection (code 301 au lieu de 200). Il faut donc ajouter la langue par défaut du site.
Ce qui donnerait donc ceci :
{if $xdefault == $everlang.id_lang}
< link rel="alternate" href="{$urls.base_url}{$everlang.iso_code}/" hreflang="x-default"/ >{/if}
A placer directement dans la boucle foreach
sysyx63
Merci beaucoup vous êtes très réactif je test tout cela ce soir sinon je vais finir par prendre des dolipranes a force de regarder tout se code ^^
Ce qui m’inquiète le plus c’est les produits avec déclinaison je ne comprend pas ce n’est pas pris en charge
Cyril CHALAMON
Essayez alors avec ceci :
{$link->getProductLink($smarty.get.id_product, null, null, null, $everlang.id_lang, null, $product.id_product_attribute)}En cas de besoin, le module est à jour sur notre site, il suffit de se rendre sur l’interface « Mon compte » pour en récupérer la dernière version.
Valérie
Bonjour, j’ai installé un module hreflang pour google, car ça manquait sur mon site souriredessaveurs.com . Seulement je me retrouve avec quelques erreurs chez google (aucune balise de renvoi), pas énormément d’erreur, mais qui me fait me poser cette question : dans localisation/langue de prestashop, les codes de langue par défaut avec prestashop sont par exemple pour la France fr-fr, ne vaudrait-il pas mieux le modifier en fr ? Car il me semble que cela voudrait exclure, pour ce cas les pays francophones et ne laisser google qu’informer les Français de France ? Que me suggérez-vous ? merci
Cyril CHALAMON
En fait sous Prestashop l’information « fr » (au lieu de « fr-fr ») est déjà existante. Le fait de mettre « fr-fr » dans les balises hreflang permet de différencier la France de la Belgique (« fr-be »).
Si on dispose d’un site à la fois en fr-fr et en fr-be, il faudra surtout bien faire attention au contenu dupliqué en revanche, car le contenu sera affiché deux fois en français.
Il est possible de mettre en place simplement « fr », en utilisant sous Prestashop 1.7 la valeur native « iso_code » au lieu de « locale ». Il doit y avoir une valeur similaire sous Prestashop 1.6 (puisqu’elle ressort notamment dans l’URL). Votre module devrait donc permettre cette modification, ce qui évitera d’exclure des pays (ou « variantes régionales »).
Dans votre cas je supprimerai le code langue iso supplémentaire, pour ne conserver que en, fr, es, it et de, puisque vous ne différenciez pas les régions.
Attention à l’encodage ainsi qu’à « be » (qui fait référence à la Biélorussie) 🙂
Lien d’aide de Google : https://support.google.com/webmasters/answer/189077?hl=fr
VALERIE
Bonjour et merci de m’avoir répondu.
Dans prestashop 1.6.1.0, ne peut on pas tout simplement modifier dans localisation/langues le code langue actuel fr-fr en fr ?, le code langue es-es en es….? QUel impact ça aura, autant sur mon site que pour google ? Moi, j’aurai tendance à penser que ça pourrait vouloir dire que mon site, si je mets fr au lieu de fr-fr, est accessible à tous les pays qui parlent Français.
Qu’en pensez-vous et est-ce que je peux le faire sans dégâts ? Merci
Cyril CHALAMON
Si vous modifiez le code langue actuel, vous risquez d’impacter d’autres éléments sur votre site, c’est la raison pour laquelle je vous conseille plutôt de modifier le code hreflang. Si vous le désirez, je peux le faire pour vous, contactez-moi par email à cchalamon@team-ever.com et je devrais rapidement pouvoir vous corriger cela, ce qui évitera tout dégât potentiel 🙂
Valérie
Bonjour et merci.
Je viens de vous joindre le module en pièce jointe par mail.
Merci