Pour vendre, vous devez être visible : c’est aussi simple que ça ! Détaillons ensemble quelques astuces pour améliorer la visibilité de la page d’accueil de votre boutique PrestaShop.
L’argent ne pousse pas dans la terre ahah donc voyons comment en générer plus avec votre boutique PrestaShop !
Constat : PrestaShop peu optimisé pour le référencement par défaut
Par défaut, PrestaShop propose un module pour créer un fichier sitemap, des champs dédiés pour personnaliser les balises meta title et description…mais aucune option pour choisir quel élément dans la page d’accueil est un <h1> avec un contenu bien défini, quel élément est un <h2>, etc.
C’est bien dommage car un peu comme si on lisait un livre avec un titre choisit au hasard avec des sous-titres non pertinent. Vous passeriez devant dans la librairie sans l’acheter, c’est certain ! C’est pareil pour votre site web car la page d’accueil n’est pas référencée si le contenu n’est pas pertinent.
Le bémol : si le choix du contenu et de la position des titres de la page d’accueil n’est pas possible par défaut, c’est parce qu’il s’agit d’intégration – de code – donc pas de gestion via l’administration de PrestaShop. Il va donc falloir se retrousser les manches 🙂
Cas concret avec client réel
Je vais présenter des solutions concrètes compatibles avec versions de PrestaShop 1.4 à 1.6 et PrestaShop 1.7 pour contenter le plus grand nombre mais avant, je vais vous partager un retour d’expérience.
Pour l’exemple, j’ai travaillé sur la boutique www.artifice.re qui propose des feux d’artifice et pétards à La Réunion.
Pour ce cas précis, je suis intervenu sur la partie vitesse de chargement et optimisation du code. Le client n’était pas visible sur les requêtes qui génèrent aujourd’hui ses ventes, par exemple :
==> 2 ème position atteinte en 34 jours pour l’expression “artifice la réunion” :
==> 3 ème position atteinte en 34 jours pour l’expression “pétard la réunion” :
Et quel impact sur les ventes ?
==> La boutique a généré en juin et juillet 2017 un total de 10 commandes. Après les optimisations de vitesse et de référencement, la boutique a généré en août et septembre 14 commandes pour un chiffre d’affaires doublé !
Optimisation SEO 1 : le titre de la page ou la baseline
Votre page d’accueil doit comporter un titre ce qui n’est pas le cas par défaut. Ce titre va être un <h1> sur la page d’accueil mais un simple texte sur les autres pages qui disposent toutes d’un titre <h1>. Je vous donne le code à placer de préférence le plus haut dans votre code.
Dans le fichier www/themes/votre-theme/header.tpl avec PrestaShop 1.4 à 1.6 :
Dans le fichier www/themes/votre-theme/templates/_partials/header.tpl avec PrestaShop 1.7 :
Il ne reste plus qu’à styliser le <h1> sur la page d’accueil puis le paragraphe sur les autres pages. J’ai ajouté un id “titredepage” sur le paragraphe pour cibler simplement avec le CSS.
Optimisation SEO 2 : les catégories principales
Après la page d’accueil, les pages importantes de votre boutique sont les pages catégories peu importe le niveau : sous-catégorie, sous-sous-catégorie… Je vous conseille d’utiliser un module par défaut dans PrestaShop pour réaliser l’opération.
Concrètement, le but est ici de placer dans votre page d’accueil du contenu avec notamment des titres avec des liens (ne pas abuser sur le nombre de liens) vers vos catégories principales sous la forme de <h2> dans le code.
Il ne faut pas placer de titres type <Hn> dans le menu de votre site pour info.
[Edit du 20/10/2017] Pourquoi ne pas placer de <Hn> dans le menu ? Avoir une dizaine de titres puis de sous-titres ne serait pas pertinent car on sur-optimise. Aucun intérêt pour l’utilisateur et sur-optimisation pour Google. A éviter donc.
PrestaShop 1.4 à 1.6 : configurer le module “Editeur de page d’accueil” :
PrestaShop 1.7 : configurer le module “Blocs de texte personnalisé” :
[Edit du 20/10/2017] Sur la page d’accueil ou sur une page catégorie, je déconseille d’afficher un grand nombre de titre <h2> sur des catégories. Essayez de limiter à 4 voir 6 titres maximum. Ainsi le choix du <h2> est ciblé sur des titres pertinents pour vos clients, donc pertinent pour le SEO.
Optimisation SEO 3 : les titres des produits
Par défaut, PrestaShop 1.7 est bien construit à ce niveau puisque chaque produit dispose d’un titre présent dans une <section> ce qui est propre. PrestaShop 1.4 à 1.6 affiche des titres <h5> pour les produits ce qui n’est pas optimal. On va donc transformer les titres en paragraphe simple.
Dans le fichier www/themes/votre-theme/product-list.tpl avec PrestaShop 1.4 à 1.6 :
- Cherchez le code suivant en cherchant “<h5” :
- Remplacez par le code suivant (au passage, on pourrait enlever “|truncate:45:’…'” qui bride l’affichage des titres produits à 45 caractères) :
[Edit du 04/12/2017] Suite à un commentaire de Harriboman, j’ai complété la modification 3 pour corriger un souci avec un script.
- Remplacez la fonction display(view) (lignes 272 à 352 environ) dans le fichier www/themes/votre-theme/js/global.js sous PrestaShop 1.6 et remplacez-la par la fonction modifiée suivante :
[Edit du 20/10/2017] Suite à plusieurs personnes qui m’ont demandées : pourquoi ne pas laisser un <h3> sur les titres produits dans les listes de PrestaShop ? Comparons la boutique à une page d’un document texte :
- On a un titre de page qui serait le titre <h1> de la page web consultée
- On aurait ensuite des sous-parties qui seraient les titres des catégories ou sous-catégories <h2> avec du contenu associé à chaque partie
- On aurait enfin les sous-sous-parties avec un titre mais sans contenu, c’est ce qui se passe si on place des <h3> sur les titres des produits dans les listes : il y a des titres mais pas de contenu sauf si on alimente chaque produit avec une description étoffée
C’est donc plus une approche utilisateur que technique que je livre ici. Vous pouvez placer des <h3> sur vos titre produits mais dans ce cas il est conseillé de placer du contenu pour chaque produit.
Optimisation SEO 4 : le slider ou carousel ou diaporama
Le slider dans PrestaShop toutes versions confondues affiche un à plusieurs slides qui défilent. Chaque slide montre une image avec du texte par dessus et notamment un titre en par défaut. Je conseille de passer ce titre en paragraphe en gras avec un peu de CSS pour éventuellement augmenter la police d’écriture de ce nouveau paragraphe.
PrestaShop 1.4 à 1.6 : configurer le module “Diaporama (image slider) pour votre page d’accueil” :
PrestaShop 1.7 : configurer le module “Carrousel” :
Optimisation SEO 5 : le block d’information CMS
Aucune action nécessaire dans PrestaShop 1.7 mais les versions antérieures notamment la 1.6 affiche un module pour présenter les éléments de rassurance avec un pour chaque élément. Les éléments de rassurance bien qu’importants ne sont pas très utiles pour le référencement donc on va les passer en paragraphe simple avec du gras.
PrestaShop 1.6 : configurer le module “Bloc CMS d’information client” :
Optimisation SEO 6 (bonus) : les titres des modules
Plus complexe, cette modification est un plus car on enlève les titres sur des éléments qui n’ont pas d’impact positif sur votre référencement.
En affichant l’outil de debug de Chrome, on voit sur la capture d’écran suivante en surlignage bleu un titre pour le module Facebook. Ce titre n’est pas pertinent pour le SEO donc on va le remplacer par un paragraphe simple.
Cette astuce concerne PrestaShop 1.6, aussi par défaut les modules sont situés dans le dossier www/modules mais lorsqu’on les modifie proprement, il faut placer les overrides dans le dossier www/themes/votre-theme/modules/votre-module/votre-fichier.tpl
Ainsi pour le module Facebook, on va créer le dossier “blockfacebook” dans www/themes/votre-theme/modules/ et placer à l’intérieur de ce dossier une copie du fichier blockfacebook.tpl issu de www/modules/blockfacebook/.
A présent ouvrez le fichier www/themes/votre-theme/modules/blockfacebook.tpl et changez le par un comme l’exemple :
Pour conserver une mise en page propre, on va ajouter quelques lignes de CSS à la fin de votre fichierwww/themes/votre-theme/css/global.css :
Visuellement, rien ne change mais le code est lui plus optimisé car l’accent est à présent mis sur les contenus liés à votre activité et à vos produits.
Répétez cette opération pour chacun de vos modules qui affiche un titre <h4> pour l’optimiser !
Bilan
L’optimisation du code PrestaShop est une chose, avoir du contenu de qualité en est une autre. Les actions proposées ici sont une base de travail à compléter par du contenu détaillé et unique pour vos clients avant tout. Si vos clients sont satisfaits, les moteurs de recherche et notamment Google ne tardera pas à vous placer dans les premiers résultats de recherche.
Je vous conseille aussi de lire deux articles pour tester et booster la vitesse de PrestaShop. La vitesse de chargement améliore aussi le SEO de votre site web : 10 outils gratuits pour tester la vitesse de votre site e-commerce et Optimisation des performances de PrestaShop.
A bientôt 🙂
Si vous n’avez pas le temps ou les compétences pour optimiser votre boutique PrestaShop, je peux m’en charger !
Bonjour, je souhaite afficher l’adresse de facturation dans la page Myaccount. J’ai réussi à afficher l’od avec {cart->id_address_invoice}, mais comment afficher le nom de l’adresse (soit la rue + code postal + ville + numéro de tel)? je ne trouve aucune informations à ce sujet, même en regardant dans les fichier TPL addresses et address. Merci pour vos précieux conseils. Presta 1.6
Bonjour Sarah,
Dans ton cas, il faut soit afficher les variables avec {debug} et voir si celle que tu cherches est disponible, soit modifier l’override du controller du compte client en ajoutant la variable des adresses clients puis l’ajouter dans le tpl.
Slaut arnaud , est ce que on peut faire ces modification aussi sur des thème no standard ( thème acheter depuis themeforest ) , merci d’avance pour ton explication
Bonjour Faycal,
Oui c’est possible et recommandé !
Le code va changer forcément mais le principe est le même 😉
Bonjour Arnaud
Est ce que vous pourriez m’indiquer comment styliser le titre dans le header
J’ai bien effectuer les modifications dans le header.tpl mais je n’arrive pas à modifier le fichier css
merci d’avance
Bonjour Jean Paul,
Merci pour votre commentaire,
Pour le point Optimisation SEO 1 : le titre de la page ou la baseline, il faut vous rendre dans le fichier css de votre thème puis ajouter les lignes de CSS nécessaires et selon vos envies, par exemple si mon titre de page a l’id “titredepage” alors :
#titredepage{votre css...}
Bonjour
J’ai trouvé votre article sur les 5 méthodes pour optimiser prestashop très intéressant.
Par contre pourriez vous me dire comment vous avez fait sur le site artifice.re pour mettre le titre de la page dans le header du haut .
Quels sont les fichiers à modifier pour avoir le même rendu. (fichier tpl et css)
merci d’avance
Bonjour Jean Paul,
Merci pour votre commentaire
J’ai tout indiqué dans mon article dans la partie “Optimisation SEO 1 pour PrestaShop”, c’est dans le fichier header.tpl que ça se passe
Bonjour,
Top le tuto ! Merci
J’ai apporté la modification de la H1 sur l’accueil, mais je ne trouve pas le texte administrable en back office.. je vois bien la modification dans la source de la page par contre. C’est normal ? il y a une manipulation à faire ?
Merci d’avance
Bonjour Jeremy,
Peu importe la version de PrestaShop, il s’agit ensuite de modifier les traductions dans le back office de PrestaShop.
La documentation officielle est claire à ce sujet pour vous aider : http://doc.prestashop.com/dashboard.action
Bon courage 🙂
Bonjour,
merci pour ce billet qui est une piqure de rappel concernant les bases du seo, par contre j’attire votre attention sur l’optimisation 3 concernant les titres des fiches produits de la product_list.
Votre modification fonctionne correctement jusqu’a ce qu’on passe l’affichage des listes de produits en ligne, une fois cette affichage sélectionné on a la place du titre un “undefined”.
Bonjour Harriboman,
Je viens de compléter l’article et vous avez donc à ajouter la class “p_name” à la balise anciennement <h5> puis à modifier le global.js comme indiqué
A bientôt 🙂
Hello,
Merci pour ce super retour d’expérience, je suis tout à fait d’accord avec ta manière de procéder. Tu ne trouves pas que le nouveau thème de Prestashop 1.7 manque quand même d’organisation et que c’est un peu le fouilli ? Pour cela je propose aussi de réviser la structure des balises HX : https://www.webbax.ch/2017/05/15/ameliorer-balises-h1-h2-h3/
Et pour la page d’accueil, il faut essayer de faire quelque chose qui soit vendeur, mais aussi qui contienne effectivement du texte pour pouvoir se positionner. Une page vide ne peut pas bien se placer sur Google encore moins s’il s’agit de la page d’accueil (il faut une densité textuelle). Pour avoir quelque chose de présentable, à tester aussi ma méthode de révision de la page d’accueil : https://www.webbax.ch/2017/07/17/prestashop-1-7-ameliorer-page-daccueil-ep-27/
Sinon, je dois dire que c’est un projet bien fun les pétards d’artifices 😉
A bientôt et merci pour le post !
Hello Germain, je conseille et pour l’instant on a de bons retours avec mes clients d’orienter les sites vers l’utilisateur avant les robots et généralement avec une couche d’optimisation du code, on obtient de très bons résultats 😉 La 1.7 est un peu fouillie oui ahah ! ++