Optimisations PRESTASHOP : comment supprimer le H1 sur le logo ?

L'Homo œconomicus 20 février 2011 12 Commentaires

Prestashop est un excellent CMS pour boutiques en ligne c’est certain. De tous, il reste mon favoris. Toutefois, vous n’êtes pas sans savoir que nativement, prestashop n’est pas optimisé pour le référencement. Pour un référenceur, il reste quand même pas mal de choses à améliorer. Cela demande parfois 2 secondes de modification. Il ne faut pas non plus trop en demander à l’équipe Prestashop qui se démène pour mettre à notre disposition un outil fantastique et ce gratuitement.

Le cas que je vais évoquer est vraiment révélateur. Beaucoup de webmasters posent la question sur les forums sans jamais avoir une réponse simple, claire; concise et précise. Il s’agit de la balise H1 qui entoure le logo dans le “header” des sites prestashop.

Pour rappel, Les balises Hx (H1, H2, H3, H4, H5 et H6) servent à hiérarchiser le contenu de manière logique et  au niveau sémantique à accorder plus ou moins d’importance aux éléments qui constituent une page. L’utilisation des balises Hx répond bien à une logique que vous pourrez comprendre en désactivant votre feuille de style via votre navigateur.

Mettre le logo en H1, est-ce une bonne chose ?

Sémantiquement, un H1 sert un spécifier un titre de premier niveau.  Et une image sert à illustrer un article ! A chaque chose sa fonction. Il n’y donc pas d’intérêt à mettre une balise h1 autour d’une image. Rien ne le justifie. Et si sa présence ici est une réponse aux sirènes de la sur-optimisation du contenu de votre site, n’y répondez pas !

Les balises Hx servent à hiérarchiser le contenu par ordre d’importance.  Google n’a jamais vraiment donné un avis tranché sur la question. Mais le référencement, c’est aussi une affaire de bon sens. Lisez cet article et faîtes-vous une opinion personnelle : Une ou plusieurs balises H1 par page ?

Comment supprimer le H1 sur le logo de PRESTASHOP ?

Il s’agit ici d’apporter une petite modification au template de base. Une affaire de balise HTML et CSS. Mon avis est très simple. On peut passer des jours et des nuits à discuter sur la pertinences d’une telle structure du code HTML, sur le poids des balise Hx, la pondération de ces balises par rapport au reste du contenu. Mais, ce qui est sûre c’est qu’il semble que la structure actuelle prestashop gêne certains et ces derniers veulent des solutions.

Alors ma solution est la suivante et elle est assez simple (suivez les étapes) :

Avant toute chose, sauvegardez les fichiers de votre template :

1. header.tpl
2. global.css
3. product.tpl

Ensuite :
Dans header.tpl, remplacez  h1 id=“logo” doit être remplacée par div id=“logo” ou un autre nom que vous aurez choisi de lui donner.

Dans global.css, remplacez h1#logo par #logo {propriétés de la DIV }

Prenez soin de régler les propriétés “WIDTH” et “HEIGHT” selon la configuration de votre site (sinon votre “header” risque de partir dans tous les sens). A priori si vous ne changez rien d’autre, il n’y aura aucun problème).

Remplacer le h2 des pages produits par un H1

Allez dans le fichier “product.tpl” du template de votre site et à la place de : H2 mettez un H1 (ce sera le titre de vos pages produits)

Recherchez dans le fichier global.css H2 {” et remplacez-le par H1

H1 ayant pris les propriétés de H2, il faudra définir des propriétés pour “H2” selon vos goûts:
Exemple :

h2 {
background:url(”../img/xxxx.gif”) no-repeat left top;
color:#couleur-des-h2;
font-size: xxxpx;
font-weight:bold or normal;
text-transform:uppercase or not;
}

En général, il ne s’agira de modifier que le “font-size” et le “font-weight“.

En ce qui concerne les autres balises Hx, à vous d’organiser votre contenu selon que vous donnez de l’importance à tel ou tel autre élément.

Par exemple :

• h2 : pour les titres des produits similaires;
• h3 pour les les titres des nouveaux produits et Meilleures ventes;
• h4 pour les produits déjà vus ;
• etc.

Ces Articles pourraient vous intéresser :