5 Optimisations PrestaShop efficaces pour améliorer le référencement de votre page d'accueil

PrestaShop, Référencement
  • Accueil
  • Blog
  • 5 Optimisations PrestaShop efficaces pour améliorer le référencement de votre page d'accueil

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.

artifice.re
page d’accueil du site artifice.re sous PrestaShop

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 » :
client référencement prestashop
==> 3 ème position atteinte en 34 jours pour l’expression « pétard la réunion » :
client référencement prestashop
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 :

{if $page_name == 'index'}
    <h1>{l s='Titre de page'}</h1>
{else}
    <p id="titredepage">{l s='Titre de page'}</p>
{/if}

Dans le fichier www/themes/votre-theme/templates/_partials/header.tpl avec PrestaShop 1.7 :
{if $page.page_name == 'index'}
    <h1>{l s='Titre de page'}</h1>
{else}
    <p id="titredepage">{l s='Titre de page'}</p>
{/if}

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 » :
améliorer référencement prestashop 1.6

PrestaShop 1.7 : configurer le module « Blocs de texte personnalisé » :

améliorer référencement prestashop 1.7

[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 » :
<h5 itemprop="name">
	{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
	<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
		{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
	</a>
</h5>
  • Remplacez par le code suivant (au passage, on pourrait enlever « |truncate:45:’…' » qui bride l’affichage des titres produits à 45 caractères) :

<p class="p_name" itemprop="name">
	{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
	<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
		{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
	</a>
</p>

[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 :

function display(view)
{
	if (view == 'list')
	{
		$('ul.product_list').removeClass('grid').addClass('list row');
		$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
		$('.product_list > li').each(function(index, element) {
			var html = '';
			html = '<div class="product-container"><div class="row">';
			html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
			html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
			html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
			html += '<p class="p_name" itemprop="name">'+ $(element).find('.p_name').html() + '</p>';
			var hookReviews = $(element).find('.hook-reviews');
			if (hookReviews.length) {
				html += hookReviews.clone().wrap('<div>').parent().html();
			}
			html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
			var colorList = $(element).find('.color-list-container').html();
			if (colorList != null) {
				html += '<div class="color-list-container">'+ colorList +'</div>';
			}
			var availability = $(element).find('.availability').html();	// check : catalog mode is enabled
			if (availability != null) {
				html += '<span class="availability">'+ availability +'</span>';
			}
			html += '</div>';
			html += '<div class="right-block col-xs-4 col-sm-12 col-md-4"><div class="right-block-content row">';
			var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
			if (price != null) {
				html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
			}
			html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
			html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
			html += '</div>';
			html += '</div></div>';
			$(element).html(html);
		});
		$('.display').find('li#list').addClass('selected');
		$('.display').find('li#grid').removeAttr('class');
		$.totalStorage('display', 'list');
	}
	else
	{
		$('ul.product_list').removeClass('list').addClass('grid row');
		$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
		$('.product_list > li').each(function(index, element) {
			var html = '';
			html += '<div class="product-container">';
			html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
			html += '<div class="right-block">';
			html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
			html += '<p class="p_name" itemprop="name">'+ $(element).find('.p_name').html() + '</p>';
			var hookReviews = $(element).find('.hook-reviews');
			if (hookReviews.length) {
				html += hookReviews.clone().wrap('<div>').parent().html();
			}
			html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
			var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
			if (price != null) {
				html += '<div class="content_price">'+ price + '</div>';
			}
			html += '<div itemprop="offers" itemscope itemtype="https://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
			var colorList = $(element).find('.color-list-container').html();
			if (colorList != null) {
				html += '<div class="color-list-container">'+ colorList +'</div>';
			}
			var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
			if (availability != null) {
				html += '<span class="availability">'+ availability +'</span>';
			}
			html += '</div>';
			html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
			html += '</div>';
			$(element).html(html);
		});
		$('.display').find('li#grid').addClass('selected');
		$('.display').find('li#list').removeAttr('class');
		$.totalStorage('display', 'grid');
	}
}

[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 » :
améliorer référencement prestashop 1.6 slider
PrestaShop 1.7 : configurer le module « Carrousel » :
améliorer référencement prestashop 1.7 slider
 

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 » :
améliorer référencement prestashop 1.6 cms
 

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.

améliorer référencement prestashop 1.6 modules
capture d’écran avec l’outil de debug du navigateur Chrome

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 :
{if $facebookurl != ''}
<div id="fb-root"></div>
<div id="facebook_block" class="col-xs-4">
	<p class="title">{l s='Follow us on Facebook' mod='blockfacebook'}</p>
	<div class="facebook-fanbox">
		<div class="fb-like-box" data-href="{$facebookurl|escape:'html':'UTF-8'}" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false">
		</div>
	</div>
</div>
{/if}

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 :
#facebook_block p.title{
  padding: 35px 0 0 0;
  margin: 0 0 12px 0;
  font: 300 21px/25px "Open Sans",sans-serif;
  color: #6f6d6d;
}

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 !

Contactez-moi

 

14 commentaires sur “5 Optimisations PrestaShop efficaces pour améliorer le référencement de votre page d'accueil

  1. 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 !

    1. 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 ! ++

  2. 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 ».

    1. 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 🙂

  3. 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

  4. 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

    1. 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

  5. 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

    1. 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...}

  6. 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

    1. Bonjour Faycal,
      Oui c’est possible et recommandé !
      Le code va changer forcément mais le principe est le même 😉

  7. 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

    1. 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.

Laisser un commentaire

Consultez les autres articles