Balises h1, h2, h3 Prestashop

Prestashop 1.7 – SEO – Améliorer les balises H1,H2,H3 (ép.1)

Le référencement ce n’est pas mon coeur de métier, mais je vais progressivement le développer, car je vois bien qu’il y’a une attente des marchands. Cette semaine on va « booster » la structure de Prestashop.

Episode 1

Cela fait déjà un petit moment que je pose la question : « Comment aider tous ces marchands pour le référencement…? ». Et je me disais qu’il fallait que je prépare quelque chose sur le sujet du référencement et finalement plutôt que de vous faire un gros morceau j’ai décidé de faire une nouvelle série de vidéos segmentée sur la problématique du SEO.

Quel est mon but exactement ? En fait je vais essayer de vous proposer régulièrement de nouvelles optimisations que vous pourrez appliquer à votre boutique Prestashop ou des méthodes pour améliorer votre référencement en général. J’essaierai d’aborder à chaque fois un sujet et le traiter pour qu’ensuite vous puissiez vous débrouiller tout seul.

Une remarque qui est souvent faite à Prestashop c’est qu’ils ont tendance à mettre des balises du type HX un peu n’importe où dans le code de leur application. Cela n’est pas une bonne idée, car Google donne ensuite de l’importance à des termes / mots, qui ne le sont pas vraiment.

Le but de la manoeuvre est donc de supprimer le code du type HX inutile et de le convertir plutôt en balises du type « span », afin de donner priorité au contenu réellement important. Cette recommandation est souvent suggérée par les experts SEO.

Ressources

Pour ce tutoriel vous avez à disposition :

  • L’extrait de règle CSS
  • Les différents fichiers TPL que j’ai modifié durant la vidéo
  • La liste des emplacements des différents fichiers

Télécharger

Au programme

  • Analysons ensemble la structure des différentes pages de Prestashop.
  • Par défaut Prestashop ne respecte pas les bonnes conventions HX.
  • Pensez à vérifier la structure de chaque page (catégorie / produit / accueil).
  • Vérifiez directement via le code source ou via la console debug Chrome.
  • Soyez logiques, donnez de la visibilité uniquement au contenu utile.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (10 votes, moyenne : 5,00 sur 5)
Loading...

20 commentaires sur “Prestashop 1.7 – SEO – Améliorer les balises H1,H2,H3 (ép.1)”

  1. Bonjour,

    Quelle bonne idée cette vidéo, comme vous le faites remarqué les balises Hn son anarchiques dans prestashop et c’est surprenant qu’ils n’aient pas corrigé cette ineptie pour le référencement dans la 1.7…

    Il en effet de bon sens de présenter un contenu structuré à google, ça semble être la base même de tout type de contenu.

    Il se doit d’être ordonné et hiérarchisé selon son importance pour une compréhension logique par une machine qui ne prendra pas la peine de réorganiser.

    Je trouve très intéressant le fait d’ajouter une class block en bout de ligne pour garder le style.

    Avez-vous testé le site après modification sur chome en effectuant des zooms jusqu’à activer la version smartphone ? Le footer est-il toujours utilisable ? Lors du retour en affichage desktop le footer est-il bien apparent avec la bonne mise en page?

    Je vous pose ces question car ce topic:

    https://www.prestashop.com/forums/topic/605913-mauvaise-structure-de-page-daccueil-balises-panier-avant-mon-h1/

    aborde les problèmes rencontrés lors de la modification du balisage Hn parasites des différentes pages de presta.

    Si vous avez un instant pour le consulter, je poste un lien vers votre article.

    merci encore pour vos articles plein de pertinence 😉

    1. Bonjour,

      Effectivement, j’ai été moi-même surpris de voir que malgré que le template qui a été entièrement refondu… il semblerait que la problématique des balises HX ait été mise de côté.

      Attention pour le balisage, la méthode que je propose semble bien fonctionner sous Prestashop 1.7, car tous les titres avaient déjà une classe CSS assignée, ce qui fait que l’ajout de la règle « block » est suffisante.

      Pour une version Prestashop 1.6, cela risque d’être plus complexe, il faudra mettre une classe à chaque élément de titre et appliquer des règles cohérentes en fonction de l’emplacement où le titre se trouve (ex. header, footer, colonne gauche / droite… etc).

      Le CSS de Prestashop 1.7 est mieux structuré, ce qui permet de faire l’opération rapidement… mais pour Prestashop 1.6 cela est certainement plus long pour la mise en place des règles CSS.

      A bientôt !

  2. Bonjour,

    Je parcours votre site avec intérêt. Merci tout d’abord pour vos différents articles en prestashop 1.7. C’est un peu la jungle pour trouver des informations sur cette nouvelle version. J’ai une question sur le sitemap, je n’ai trouvé aucune version gratuite en prestashop 1.7 qui génère le fichier sitemap. Avez-vous une astuce pour cela ?
    Je vous remercie par avance pour votre aide.
    Valérie

    1. Bonjour,

      Effectivement, pour le moment sa diffusion reste limitée. En fait dans cette version le module Sitemap n’est pas encore présent, pour le moment en alternative gratuite je n’ai pas encore recherché un module qui peut le faire.

      Par contre, ça serait à tester de prendre le module pour Prestashop 1.6 et voir si celui-ci fonctionne avec la version 1.7.

      J’ai fait cette remarque l’autre jour sur Twitter, que je trouvais justement assez « fou » de mettre en avant la version officielle Prestashop sans le module Sitemap qui fait partie des modules essentiels.

      A bientôt !

  3. Bonjour, intéressé par amélioration des balises h1 qui sont en double sur mon site dans la page d’accueil ainsi que sur les pages catégorie.
    Je voudrais te demander si tu est intéressé pour regarder mon site et me faire un devis pour faire ses corrections.
    Et te remerciant d’avance
    Jorge

    1. Bonjour,

      Actuellement, je ne prends pas de nouveaux clients.

      Pour ce type de demande, je vous invite à faire appel à un prestataire freelance spécialisé sur Prestashop. Si vous cherchez des prestations à coût réduit, vous pouvez essayer de passer ce site : https://www.codeur.com/

      A bientôt !

  4. Bonjour,

    J’ai suivi ton tuto (tes tutos sont très bien fait au passage 😉 )

    Je constate un bug en changeant le balise Hx dans le footer. (sur la version PC et Mobile)

    Comme une image vaut mieux que 1000 mots, je te laisse constater le bug a travers l’image suivante : http://hpics.li/3391a34

    Aurait-tu une idée pour régler ce problème ? Je suis sure que ca va servir a d’autres personnes 🙂

    Merci

    1. Hello,

      De mon côté cela semble fonctionner, il faudrait vérifier peut-être si le code HTML est structuré comme mon exemple (avec le span et les mentions classes h3).

      <span class="h3 hidden-sm-down">Notre société</span>
      <div class="title clearfix hidden-md-up" data-target="#footer_sub_menu_12854" data-toggle="collapse">
      <span class="h3">Notre société</span>
      <span class="pull-xs-right">
        <span class="navbar-toggler collapse-icons">
      	<i class="material-icons add"></i>
      	<i class="material-icons remove"></i>
        </span>
      </span>
      

      A bientôt et merci pour la visite !

  5. Merci pour ta réponse.

    Mon code HTML semble bien correct.

    Mais il me semble que sur ton tuto, on remarque l’erreur en version PC (en version mobile, je ne sais pas dans ton cas).
    (pour ma part, cache bien vidé etc etc)

    Ne trouvant pas la solution, je vais laisser les H3 ahah

    Merci

    1. Hello,

      Je me souviens plus vraiment… j’ai encore mon ancien tutoriel et cela semble pourtant fonctionner… Au pire il est toujours possible d’ajouter des règles CSS qui disent « si on est sur un mobile », « masque ces éléments » du footer.

      A bientôt !

  6. Bonjour,
    Je viens de decouvrir ton tuto. Merci beaucoup car tres interessant.
    J’ai le meme probleme sur certaines pages produits j’ai un nombre important de balise H2 (une dizaine).
    Je voudrais les corriger donc mes questions sont :
    – Mais technique que pour les balises H1 ?
    – Quel logiciel tu utilise car j’ai commence a recherche les sources de ces erreurs mais trop galere pour trouver le fichier source.
    Merci de ta reponse.
    A plus !

  7. Bonjour,

    Merci pour ce tuto très intéressant! Je cherchais justement des informations concernant la problématique sémantique sur Prestashop…

    D’abord, j’ai une première question d’ordre général : selon les principes du HTML5, un H1 peut introduire chaque section (article, nav ou aside), il est donc possible de voir plusieurs H1 sur une même page. Donc si cette structure respecte le principe du HTML5, en quoi est-ce nuisible au SEO?

    Par ailleurs, dans ton tuto, tu remplaces les H1 présents sur les titres des produits dans les vignettes par des span, pourrait-on envisager de remplacer les H1 par des H2 sachant que les titres des catégories ou des produits contiennent généralement des mots clés importants?

    Merci pour ton aide!

    1. Hello,

      Effectivement c’est très juste pour le HTML5, mais personnellement je préconise la méthode à l’ancienne (c’est un choix personnel) je préfère éviter le risque de confusion.

      Oui après c’est une question de choix, il n’y a pas de règlse absolues… il est donc possible de mettre du H2 sur les titres des produits.

      A bientôt !

  8. Bonjour Germain,
    D’abord un grand merci pour les tonnes d’informations contenues dans tes tutoriels.
    J’ai mon premier Prestashop entre les mains à améliorer, notamment en SEO, et grâce à toi je pense avoir gagné un temps précieux en comprenant, en plus de la structure, l’utilisation de l’admin.
    Une question sur ce tuto, tu modifies le thème et même le core il m’a semblé.
    Comment cela se passe à la mise à jour de l’un ou de l’autre, on perd
    tout non ?
    Encore bravo et vive la Suisse en fait, depuis 17 ans chez Infomaniak, bien qu’à 1000 km de chez moi, et jamais déçu 🙂

    1. Hello,

      Cela dépend du cas de figure, en principe je fais un override quand je peux… au niveau du thème, je ne fais pas l’utilisation du thème enfant.

      Il faut dire qu’actuellement je ne fais jamais de mise à jour de Prestashop, car il y’a trop de contraintes à gérer et à réviser (je procède uniquement à des upgrades X années plus tard).

      Avant une mise à jour, rien n’empêche de faire une copie du thème pour conserver celui-ci et ensuite de refaire un écrasement du thème une fois la mise à jour effectuée.

      Merci pour les retours suisses 😉 à bientôt !

  9. Bonjour, j’ai mis mes pages catégories en H1 (nom de la catégorie), puis la liste des produit en H2 (avec le nom de la marque dans le titre). j’ai quelques h2 pour le contenue de la catégorie.
    Pour mes fiches produit, j’ai mon titre en H1, quelques H2.
    Ma question: j’ai les modules ‘produit similaire, produit dans la même catégories, … »
    quel balise dois-je mettre? sachant qu’il auront un titre différent (titre du produit + une caractéristique). Pour ne pas avoir toujours les mêmes lien/balise.
    merci pour votre réponse, car j’ai cherché, mais pas de réponse. Et les site fond pas la même choses

    1. Bonjour,

      Ma réponse va être un peu différente… en principe je conseille de désactiver ce module, car il inonde l’interface de produits sans forcément être pertinent (il est plus sage d’optimiser le rendu du produit en cours). Si vous voulez quand même garder le module vous pouvez mettre en H3.

      A bientôt !

      1. merci pour votre réponse,
        nous voyons beaucoup de site avec ces modules. comme exemple le site crea vea qui à un très bon référencement.
        je n’ai pas vu d’article sur le web (bon j’ai pas fait les 1 000 000 000 pages non plus 😉 ou il est indiqué la bonne pratique de balise HN pour une boutique ( prestashop ou non).
        Comme les balises HN qui sont d’origine de prestashop dans le footer, le panier, c’est juste pour la mise en page. Étonnant que prestashop laisse ça comme ca.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *