Prestashop 1.0 à 1.6 : Ajouter un Rich Snippet « fil d’ariane »

Depuis quelques mois, Google met en oeuvre les micro-formats au sein de ses résultats de recherche, et plus particulièrement quelques améliorations visuelles, dont la plus connue est la « review » (issue de votes d’utilisateurs, avec des étoiles apparaissant dans les résultats Google). Il existe d’autres formes de rich snippet, et plus particulièrement ceux liés à la navigation : le fil d’ariane (ou breadcrumbs en anglais) en fait partie.

Voici une méthode très simple pour mettre en oeuvre cette forme d’amélioration visuelle sur votre boutique Prestashop, l’objectif étant au final d’attirer l’oeil des internautes et donc d’augmenter (un peu) les clics menant à votre e-commerce !

Structure du Rich Snippet « Breadcrumbs »

Il existe deux formats de métadonnées pour indiquer aux moteurs de recherche la présence d’informations additionnelles dans vos pages : le format Microdata (que nous allons mettre en oeuvre ici) et le format RDFa (ces deux formats de microdonnées sont bien évidemment reconnus par le W3C, dans la mesure où ils en sont issus !)

La syntaxe en Microdata, que nous allons donc mettre en oeuvre, repose sur trois attributs HTML :

• itemscope (qui définit la balise encadrant la définition des microdonnées)
• itemtype (qui définit le type de microdonnée définit dans ladite balise)
• itemprop (qui définit les propriétés contenues par les balises filles encadrées par celle définie par itemscope)

Dans le cas des fils d’Ariane, il y aura donc 2 propriétés à définir : l’adresse du lien (appelée url), et l’ancre de ce dernier (appelée title).

En pratique, cela donne un code ressemblant à ceci :

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 	<a href="/" title="retour à Accueil" itemprop="url"> 		<span itemprop="title">Accueil</span> 	</a> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 	<a href="/3-cuisson" itemprop="url"> 		<span itemprop="title">Cuisson</span> 	</a> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 	<a href="/8-fourneau" itemprop="url"> 		<span itemprop="title">Fourneau</span> 	</a> </div> Langage du code : HTML, XML (xml)

Ce qui donnera par exemple le résultat visible sur la capture d’écran en début d’article 🙂

L’insertion de ce microformat au niveau du fil d’Ariane de Prestashop nécessite donc d’aller ajouter ces attributs HTML au sein du code généré : pour cela, il va nous falloir (malheureusement) toucher au core de Prestashop…

1ère étape : modifier notre template (thème)

Dans le modèle de template de Prestashop, le fil d’Ariane passe en premier lieu par le fichier breadcrumb.tpl, situé dans votre thème de boutique. Ce fichier contient en réalité le premier niveau de lien pointant vers la homepage de notre site e-commerce (les liens suivants étant générés par une fonction interne à Prestashop, que nous irons modifier en second lieu)

<!-- Breadcrumb --> {if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if} <div class="breadcrumb"> 	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{$base_dir}" title="{l s='return to'} {l s='Home'}" itemprop="url"><span itemprop="title">{l s='Home'}</span></a></div>{if isset($path) AND $path}<span class="navigation-pipe">{$navigationPipe|escape:html:'UTF-8'}</span>{if !$path|strpos:'span'}<span class="navigation_page">{$path}</span>{else}{$path}{/if}{/if} </div> <!-- /Breadcrumb --> Langage du code : HTML, XML (xml)

Ce que nous avons modifié :

• Encadrement du lien (balise A) par une balise DIV définissant l’itemscope et le type de microformat
• Ajout de l’attribut itemprop dans notre balise A
• Ajout d’un SPAN avec l’itemprop définissant le texte à afficher, encadrant l’ancre du lien

2ème étape : modifier la fonction générant les liens internes

Je ne détaillerai pas les explications techniques déterminant quelle fonction doit être modifiée, aussi voici directement le code à retoucher, celui même qui génère le fil d’Ariane à partir de l’URL appelée. La fonction à modifier est située dans /classes/Tools.php (attention à procéder à une sauvegarde préalable de tous les fichiers modifiés !)

Si vous utilisez Prestashop 1.6.x

Un excellent tutoriel ici chez Café++ (pas besoin de réinventer ce qui a été très bien fait 😉 )

Si vous utilisez Prestashop 1.5.x

Rendez-vous dans Tools.php, aux environs de la ligne 800, sur la fonction getPath dont voici le code adapté à la version 1.5.x dans ce commentaire 😉  (merci à Radus)

Si vous utilisez Prestashop 1.4.x

Rendez-vous dans Tools.php, aux environs de la ligne 797, sur la fonction getPath dont voici le code modifié :

public static function getPath($id_category, $path = '', $linkOntheLastItem = false, $categoryType = 'products') 	{ 		global $link, $cookie; 		if ($id_category == 1) 			return '<span class="navigation_end">'.$path.'</span>'; 		$pipe = Configuration::get('PS_NAVIGATION_PIPE'); 		if (empty($pipe)) 			$pipe = '>'; 		$fullPath = ''; 		if ($categoryType === 'products') 		{ 			$category = Db::getInstance()->getRow(' 			SELECT id_category, level_depth, nleft, nright 			FROM '._DB_PREFIX_.'category 			WHERE id_category = '.(int)$id_category); 			if (isset($category['id_category'])) 			{ 				$categories = Db::getInstance()->ExecuteS(' 				SELECT c.id_category, cl.name, cl.link_rewrite 				FROM '._DB_PREFIX_.'category c 				LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cl.id_category = c.id_category) 				WHERE c.nleft <= '.(int)$category['nleft'].' AND c.nright >= '.(int)$category['nright'].' AND cl.id_lang = '.(int)($cookie->id_lang).' AND c.id_category != 1 				ORDER BY c.level_depth ASC 				LIMIT '.(int)$category['level_depth']); 				$n = 1; 				$nCategories = (int)sizeof($categories); 				foreach ($categories AS $category) 				{ 					$fullPath .= 					(($n < $nCategories OR $linkOntheLastItem) ? '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.self::safeOutput($link->getCategoryLink((int)$category['id_category'], $category['link_rewrite'])).'" title="'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'" itemprop="url"><span itemprop="title">' : ''). 					htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8'). 					(($n < $nCategories OR $linkOntheLastItem) ? '</span></a></div>' : ''). 					(($n++ != $nCategories OR !empty($path)) ? '<span class="navigation-pipe">'.$pipe.'</span>' : ''); 				} 				return $fullPath.$path; 			} 		} 		elseif ($categoryType === 'CMS') 		{ 			$category = new CMSCategory((int)($id_category), (int)($cookie->id_lang)); 			if (!Validate::isLoadedObject($category)) 				die(self::displayError()); 			$categoryLink = $link->getCMSCategoryLink($category); 			if ($path != $category->name) 				$fullPath .= '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.self::safeOutput($categoryLink).'" itemprop="url"><span itemprop="title">'.htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').'</span></a></div><span class="navigation-pipe">'.$pipe.'</span>'.$path; 			else 				$fullPath = ($linkOntheLastItem ? '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.self::safeOutput($categoryLink).'" itemprop="url"><span itemprop="title">' : '').htmlentities($path, ENT_NOQUOTES, 'UTF-8').($linkOntheLastItem ? '</span></a></div>' : ''); 			return self::getPath((int)($category->id_parent), $fullPath, $linkOntheLastItem, $categoryType); 		} 	} Langage du code : PHP (php)

Nous y avons simplement intégré les mêmes éléments que dans notre fichier de template, sur les liens générés via PHP.

Si vous utilisez Prestashop jusqu’aux versions 1.3.x

La fonction getPath étant différente dans les anciennes versions de Prestashop, voici le code fonctionnant avec ces versions (la fonction se trouve vers la ligne 559) :

static public function getPath($id_category, $path = '') 	{ 		global $link, $cookie; 		$category = new Category(intval($id_category), intval($cookie->id_lang)); 		if (!Validate::isLoadedObject($category)) 			die (Tools::displayError()); 		if ($category->id == 1) 			return '<span class="navigation_end">'.$path.'</span>'; 		$pipe = (Configuration::get('PS_NAVIGATION_PIPE') ? Configuration::get('PS_NAVIGATION_PIPE') : '>'); 		$category_name = Category::hideCategoryPosition($category->name); 		if ($path != $category_name) 			$path = '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.Tools::safeOutput($link->getCategoryLink($category)).'" itemprop="url"><span itemprop="title">'.$category_name.'</span></a></div> '.$pipe.' '.$path; 		return Tools::getPath(intval($category->id_parent), $path); 	} Langage du code : PHP (php)

Nous y avons réalisé strictement la même opération ! En fait, Prestashop, jusqu’aux versions 1.3.x, n’incluait pas un fil d’Ariane identique selon que les pages produit étaient appelées depuis une page catégorie ou directement, ce qui explique la légèreté du code…

3ème étape : retoucher la feuille de style CSS !

Ridiculement simple mais néanmoins indispensable si vous ne voulez pas d’un fil d’Ariane en vrac dans votre boutique, il vous faut retoucher très légèrement la feuille de style global.css de votre thème (située dans le sous-répertoire /css/ de ce dernier), simplement ajoutant la définition suivante (qui évite aux balises DIV contenues dans la classe .breadcrumb d’être affichées en bloc par défaut, mais bien en ligne dans le flux)

.breadcrumb div { 	display: inline; } Langage du code : CSS (css)

Pour des raisons de propreté, veillez à intégrer cette définition au bon endroit dans votre feuille de style (même si cela fonctionnera si vous l’ajoutez simplement à la fin !)

Mise en place et conclusion

La mise en place sur la boutique ne pose pas de problèmes particuliers, si ce n’est que je vous conseille de procéder par ordre inversé : diffuser d’abord la feuille de style, puis le code PHP et Smarty ! En effet, cela évitera à vos visiteurs d’avoir (momentanément) un fil d’Ariane en vrac lorsque vous mettrez en place ce petit artifice !

Concernant le délai de prise en compte par Google, compter environ 1 à 3 semaines (c’est parfois très rapide !) même si ce n’est pas forcément mis en oeuvre sur toutes les pages de la boutique !