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.

11 réflexions au sujet de « 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 !

Laisser un commentaire

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