Tutoriels

#SEO #Prestashop : quelques optimisations techniques pour votre boutique

#SEO #Prestashop : quelques optimisations techniques pour votre boutique

Je vous invite à lire cet article avant : Quelques conseils SEO du site Asos.fr pour avoir un peu plus d’explications sur ces optimisations.

1.Attribut nofollow

Lorsqu’un lien a un attribut nofollow, cela indique aux moteurs de recherche de ne pas suivre ce lien car il mène vers une page sans valeur ajoutée pour le SEO.

Dans une boutique Prestashop (ou autre), plusieurs pages ne sont pas intéressantes :

  • pages mon compte (se connecter, mot de passe perdu…)
  • page panier
  • page login
  • pages information : mentions légales, CGV, droit de rétractation
  • page CGV
  • page contact
  • page commander
  • lien envoyer à un ami
  • llien vers le flux RSS

Pour indiquer leur désintérêt, nous devons donc trouver les liens vers ces pages dans les modules et le thème Prestashop actif.

Attribut nofollow dans le thème Prestashop

Pour trouver facilement ces liens dans votre thème Prestashop, ouvrez le dossier de votre thème dans un éditeur de code (personnellement j’utilise Sublime Text pour sa rapidité), et recherchez dans tous les fichiers les expressions suivantes (certains fichiers appartiennent à des modules et sont placés dans le dossier modules du thème ) :

  • <a href= »{$link->getPageLink(‘order.php’, true)}
  • <a href= »{$link->getPageLink(‘my-account.php’, true)}
  • <a href= »{$link->getPageLink(‘authentication.php’, true)}
  • <a href= »{$link->getPageLink(‘password.php’)}
  • <a href= »{$link->getPageLink(« $order_process.php », true)}
  • <a href= »{$link->getPageLink(‘contact-form.php’, true)}
  • <a href= »{$this_path}sendtoafriend-form.php?id_product={$smarty.get.id_product|intval}
  • <a href= »{$rss_link.url}

Remplacez chacune de ces expressions par :

  • <a href= »{$link->getPageLink(‘order.php’, true)} » ….rel= »nofollow »
  • <a href= »{$link->getPageLink(‘my-account.php’, true)} » ….rel= »nofollow »
  • etc…

Attribut nofollow dans les modules Prestashop

Comme pour le thème, faites les mêmes modifications avec le dossier Modules situé à la racine de votre site.

Attribut nofollow dans le module Bloc CMS

Le module bloc CMS permet d’ajouter un bloc Informations dans le footer de votre boutique Prestashop, avec des liens vers les pages Mon compte, Livraison etc.. Ces liens sont générés via une boucle dans le fichier blockcms.tpl. Trouvez ce fichier dans le dossier modules>blockcms ou le dossier themes>nom_du_theme>modules>blockcms.

Remplacez les lignes suivantes à la fin du fichier :

[code]
<!– MODULE Block footer –>
<div class="block_various_links" id="block_various_links_footer">
<h4>{l s=’Informations’ mod=’blockcms’}</h4>
<ul>
{foreach from=$cmslinks item=cmslink}
{if $cmslink.meta_title !=  »}
<li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:’htmlall’:’UTF-8′}">{$cmslink.meta_title|escape:’htmlall’:’UTF-8′}</a></li>
{/if}
{/foreach}
<!– <li class="last_item">{l s=’Powered by’ mod=’blockcms’} <a href="http://www.prestashop.com">PrestaShop</a>&trade;</li> –>
</ul>
</div>
<!– /MODULE Block footer –>
[/code]

Par

[code]
<!– MODULE Block footer –>
<ul class="block_various_links" id="block_various_links_footer">
{if !$PS_CATALOG_MODE}<li class="first_item"><a href="{$link->getPageLink(‘prices-drop.php’)}" title="{l s=’Specials’ mod=’blockcms’}">{l s=’Specials’ mod=’blockcms’}</a></li>{/if}
<li class="{if $PS_CATALOG_MODE}first_{/if}item"><a href="{$link->getPageLink(‘new-products.php’)}" title="{l s=’New products’ mod=’blockcms’}">{l s=’New products’ mod=’blockcms’}</a></li>
{if !$PS_CATALOG_MODE}<li class="item"><a href="{$link->getPageLink(‘best-sales.php’)}" title="{l s=’Top sellers’ mod=’blockcms’}">{l s=’Top sellers’ mod=’blockcms’}</a></li>{/if}
{if $display_stores_footer}<li class="item"><a href="{$link->getPageLink(‘stores.php’)}" title="{l s=’Our stores’ mod=’blockcms’}">{l s=’Our stores’ mod=’blockcms’}</a></li>{/if}
<li class="item"><a href="{$link->getPageLink(‘contact-form.php’, true)}" title="{l s=’Contact us’ mod=’blockcms’}" rel="nofollow">{l s=’Contact us’ mod=’blockcms’}</a></li>
{foreach from=$cmslinks item=cmslink}
{if $cmslink.meta_title !=  »}
<li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:’htmlall’:’UTF-8′}" rel="nofollow">{$cmslink.meta_title|escape:’htmlall’:’UTF-8′}</a></li>
{/if}
{/foreach}
{if $display_poweredby}<li class="last_item">{l s=’Powered by’ mod=’blockcms’} <a href="http://www.prestashop.com" rel="nofollow">PrestaShop</a>&trade;</li>{/if}
</ul>
<!– /MODULE Block footer –>
[/code]

Voici le gist pour être sûr de ne pas avoir de caractères qui passent mal dans le code ci-dessus : https://gist.github.com/2872742

2.Optimisations SEO avec les CSS

Le site Asos « remonte » le contenu intéressant pour les moteurs de recherche en jouant avec les CSS (cf article sur Asos).

Le nouveau thème par défaut de Prestashop est en 3 colonnes : 2 sidebars (left_column et right_column) et une colonne principale (center_column) pour le contenu intéressant :

Prestashop référencement

En référencement naturel, le contenu pertinent doit être placé le plus haut possible. Comme vous pouvez le voir ci-dessus, les robots vont d’abord lire le contenu de la colonne de gauche puis le contenu de la colonne centrale.
Pour afficher en premier le contenu de la colonne centrale aux robots tout en gardant le même affichage, nous utiliserons la propriété float comme sur le site d’Asos et modifierons 2 fichiers tpl dans le thème Prestashop.

Modification du thème Prestashop

Nous allons placer la colonne de gauche après la colonne centrale et englober ces 2 colonnes dans un div :

Dans le fichier header.tpl du thème, supprimer le code permettant d’afficher la colonne de gauche et ajouter une balise div.seo_column :

[code][/code]

Plaçons la colonne de gauche dans le fichier footer.tpl avant (l.27 environ) et fermons le div.seo_column :
[code][/code]

Le site ressemble à cela pour l’instant :

Prestashop SEO

Passons aux CSS : dans le fichier global.css de votre thème, à partir de la ligne 40, ajouter ou modifiez les styles suivants :

[code lang= »css »]
#page {}
#header {z-index:10}
#columns {z-index:1}
.seo_column{float:left}
#left_column {float:left}
#center_column {float:right}
#right_column {}
#footer {}
[/code]

N’oubliez pas de vider le cache et de supprimer les fichiers compile !
L’affichage est bon et le code source présente le contenu de la colonne centrale avant celui de la colonne de gauche :
prestashop seo

Encore une fois, ces modifications ne vont pas radicalement changer votre référencement naturel car le SEO est un travail de fourmi qui demande patience et persévérance !