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.

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}

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

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

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

• 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');
	}
}

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

{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}

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

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