Thèmes V3 : balises HN corrigées avec l'Add-on HTag V3

Infographie SEO mettant en évidence les balises HTML H, entourées d'icônes de sites Web et de blogs.

Vous avez peut-être lu mes articles qui parlent de l'importance des balises HN et de la façon plus que discutable dont Blogger les gère. En tous cas, si vous êtes ici c'est sans doute que vous cherchez une solution pour arranger le balisage de votre thème de version 3 et ça tombe bien j'en ai une avec l'Add-on HTag V3 ! (Un autre article est dédié à l'Add-on HTag V2 pour les thèmes de version 2)

Vous trouverez donc dans cet article les explications concernant les effets de l'Add-On HTag V3, ses limites et une procédure d'installation.

Comment l'Add-on HTag V3 corrige les balises HN de Blogger

J'espère vous avoir convaincus de l'importance d'essayer d'améliorer la situation générée par Blogger, et si vous ne l'êtes pas testez vos propres pages, vous risquez d'être surpris...

Si l'Add-on HTag ne règle pas tous ces problèmes, il résout les principaux en évitant les sauts de balisage HN et collant au plus près de la logique des pages affichées.

Balisage HN de la page d'accueil

Voici l'analyse de la page d'accueil du même blog de test, après son intégration :

Copie d'écran d'analyse du balisage HN avec une série de balises h1, h2 et h3 correctement hiérarchisées

La balise H3 qui était tout en haut a été supprimée, "Rechercher dans ce blog" n'étant pas un élément très pertinent de contenu. Il n'y a surtout plus ce premier saut hiérarchique.

Pour améliorer la cohérence hiérarchique, tous les titres de widgets sont en H2.

Balisage HN des articles

Voici l'analyse d'un article du même blog bénéficiant de l'Add-on HTag V3 :

Comme pour la page d'accueil, la balise H3 tout en haut a été supprimée et tous les titres de widgets sont passés en H2.

Le titre du blog n'apparaît plus dans le balisage HN, car dans le cadre de l'affichage d'un article ce n'est plus l'élément principal et à vrai dire on ne sait pas trop quoi en faire !

Mais le plus important est le titre de l'article qui se retrouve bien en H1. De cette façon, il n'y a plus du tout de sauts hiérarchiques et la logique du contenu de la page est respectée.

Limites de l'Add-on HTag V3

L'Add-on HTag V3 ne fonctionne qu'avec les thèmes officiels Blogger de version 3.
Des modifications de style généralement minimes, parfois un peu plus importantes dans le titre des gadgets, peuvent apparaître. Elles varient selon le thème concerné. C'est essentiellement le changement de balisage de H3 en H2 qui engendre un affichage plus massif des titres des gadgets.
L'Add-on HTag ne corrige pas les erreurs que vous auriez pu commettre dans la mise page de vos articles qui reste sous votre contrôle :

A ce titre, avec ou sans l'Add-on HTag, ayez d'abord bien conscience de ce que vous faites en terme de balisage HN quand vous affectez titres, sous-titres etc. Ensuite si les commentaires sont activés, chacun de vos articles doit comporter au minimum un titre (H2) pour éviter un saut hiérarchique, car les commentaires sont eux aussi automatiquement balisés, H3 pour le titre "Commentaires" et H4 pour "Enregistrer un commentaire".
L'Add-on HTag V3 est évidemment utilisé dans ce blog (thème Emporio), mais surtout il a été longuement testé sur un blog de test avec l'ensemble des thèmes officiels version 3.

Malgré ce, je ne peux donner aucune garantie de bon fonctionnement, encore moins avec des thèmes non officiels ou personnalisés. Cependant, en cas de problème j'essaierai de vous aider dans la mesure de mon possible.

Installation de l'Add-on HTag V3

Attention : l'installation de l'Add-on HTag V3 va écraser les modifications antérieures qui pourraient exister dans les gadgets Header1 et Blog1 (1).

Ne faites cette installation que si vous savez pouvoir les récupérer. Par exemple, si l'Add-on TOC+ est déjà installé, il va visuellement disparaître et il faudra reprendre son installation au stade de l'intégration des appels aux inclusions.

Par contre l'Add-on SEO ne sera pas impacté par l'installation de l'Add-on HTag V3.

Modification du CSS

Important : avant tout, faites une sauvegarde du thème de votre blog.

Suivant le thème concerné, vous ne trouverez pas toujours les termes à remplacer et c'est normal. Par exemple, seul le CSS du thème Notable contient 'blog-name h1'.

Ouvrez l'éditeur HTML du thème Blogger
Remplacez toutes les occurrences de Header h1 par Header .h1
Remplacez toutes les occurrences de h3.title par h2.title
Remplacez toutes les occurrences de blog-name h1 par blog-name .h1

Introduction des inclusions

Recherchez </b:defaultmarkups>
Juste avant ce terme introduisez le code ci-dessous :



<!-- Add-on HTag V3 par https://blogger-optimisation-seo.blogspot.com/ -->

<b:defaultmarkup type='Header'>
  <b:includable id='title'>
    <div>
      <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
      <b:if cond='data:view.isSingleItem'>
        <div class='h1'>
          <a expr:href='data:blog.homepageUrl'>
            <data:blog.title/>
          </a>
        </div>
      <b:else/>
        <h1>
          <div class='h1'>
            <data:blog.title/>
          </div>
        </h1>
      </b:if>
    </div>
  </b:includable>
</b:defaultmarkup>

<b:defaultmarkup type='Blog'>
  <b:includable id='postTitle' var='post'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title != &quot;&quot;'>
      <b:with value='data:view.isSingleItem ? &quot;h1&quot; : &quot;h3&quot;' var='headingTag'>
        <b:tag class='post-title entry-title' expr:name='data:headingTag'>
          <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
            <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        </b:tag>
      </b:with>
    </b:if>
  </b:includable>
</b:defaultmarkup>

<b:defaultmarkup type='Common'>

  <b:includable id='reportAbuse'>
    <h2 class='title'>
      <a class='report_abuse' href='https://www.blogger.com/go/report-abuse' rel='noopener nofollow' target='_blank'>
        <data:messages.reportAbuse/>
      </a>
    </h2>
  </b:includable>

  <b:includable id='snippetedPostTitle'>
    <b:if cond='data:post.title != &quot;&quot;'>
      <div class='post-title'><a expr:href='data:post.url'><data:post.title/></a></div>
    </b:if>
  </b:includable>

  <b:includable id='widget-title'>
    <b:if cond='data:renderAsDetails'>
      <summary>
        <div class='collapsible-title'>
          <b:include name='widget-title-switch'/>
          <b:include data='{ iconClass: &quot;chevron-down&quot; }' name='chevronDownIcon'/>
          <b:include data='{ iconClass: &quot;chevron-up&quot; }' name='chevronUpIcon'/>
        </div>
      </summary>
    <b:elseif cond='data:defaultTitle or data:title'/>
      <b:include name='widget-title-switch'/>
    </b:if>
  </b:includable>
  
  <b:includable id='widget-title-switch'>
    <b:with value='data:title ? data:title : data:defaultTitle' var='DisplayedTitle'>
      <b:switch var='data:widget.type'>
      <b:case value='BlogSearch'/>
        <!-- Rien -->
      <b:case value='FeaturedPost'/>
        <div class='title' style='width:100%; font-weight: bold;'>
          <b:eval expr='data:DisplayedTitle'/>
        </div>
      <b:default/>
        <h2 class='title' style='width:100%'>
          <b:eval expr='data:DisplayedTitle'/>
        </h2>
      </b:switch>
    </b:with>
  </b:includable>
  
</b:defaultmarkup>

<!-- Add-on HTag V3 FIN -->

Uniquement pour le thème Soho : remplacez les 2 occurrences de
<h3 class='title'><data:messages.latestPosts/></h3>
par
<div class='title' style='font-weight: bold'><data:messages.latestPosts/></div>
Enregistrez le thème.
Rétablissez les gadgets Header1 et Blog1.
Lors de ce rétablissement un bug de Blogger fait aléatoirement (?) disparaître les conditions d'affichage de certains gadgets (2).
Il faut donc les vérifier et éventuellement les réintroduire dans les gadgets suivants, en fonction du thème concerné :

- PageList1 (sauf Soho, Emporio, Notable) : <b:widget cond='!data:view.isPost' id='PageList1'

- FeaturedPost1 (tous) : <b:widget cond='data:view.isHomepage' id='FeaturedPost1'

- PopularPosts1 (tous sauf Emporio) : <b:widget cond='data:view.isSingleItem and data:posts any (p => p.id != data:view.postId)' id='PopularPosts1'

- PopularPosts1 (uniquement Emporio) : <b:widget cond='data:posts any (p => p.id != data:view.postId)' id='PopularPosts1'

- Adsense1 (uniquement Soho) : <b:widget cond='data:view.isHomepage' id='AdSense1'
Enregistrez à nouveau le thème.
Testez votre blog sans attendre.
En cas d'anomalie faites une restauration.

Comment tester l'Add-on HTag V3

Il existe de multiples sites qui proposent de tester le balisage HN de pages web. Personnellement, j'utilise l'outil simple et gratuit fourni par Mehdi Cholat et dont les copies d'écran de cet article sont issues.

Conclusion

L'utilisation correcte des balises HN est essentielle pour améliorer l'accessibilité et le référencement de votre blog. En suivant les règles élémentaires et en corrigeant les erreurs courantes, vous pouvez (et devez !) structurer votre contenu de manière logique et efficace.

L'Add-on HTag V3 offre aux utilisateurs de Blogger une solution pratique, permettant de surmonter les erreurs natives de la plateforme. Avec ou sans, n'hésitez pas à laisser en commentaire vos retours d'expérience, merci !

Notes techniques

Le fait de rétablir les gadgets Header1 et Blog1 va automatiquement copier les inclusions contenues dans <b:defaultmarkup type='Header'> et <b:defaultmarkup type='Blog'> vers les gadgets correspondants en écrasant les éventuelles modifications qui auraient été faites préalablement directement dans les inclusions de ces gadgets.

A la suite du rétablissement des gadgets, il ne faut donc pas s'étonner de voir les mêmes inclusions à 2 endroits différents, dans les balises <b:defaultmarkup> et dans les gadgets. Dans le fonctionnement, c'est l'inclusion qui est dans le gadget qui prend le dessus.

Pour en savoir plus, lisez l'article "Les balises defaultmarkup du thème Blogger pour ajouter et diffuser du code".
Par exemple, normalement le gadget FeaturedPost n'apparait sur la page d'accueil. Cette condition est assurée par cond='data:view.isHomepage' dans la première ligne du widget :
<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' version='2' visible='true'>

Mais après le rétablissement des widgets la condition disparaît parfois et cette ligne devient de façon erronée <b:widget id='FeaturedPost1' locked='true' title='' type='FeaturedPost' version='2' visible='true'>
Les inclusions 'reportAbuse', 'snippetedPostTitle' et 'widget-title' sont des inclusions 'communes' gérées côté 'backend' et dont on ne voit pas le code XML dans les thèmes Blogger. Mais on peut le connaître grâce à l'excellente documentation de Soraya Lambrechts et c'est ainsi que j'espère les avoir améliorées en respectant au maximum leur code d'origine.

Les faire apparaître en 'frontend' dans une balise <b:defaultmarkup type='Common'> d'un thème leur permet de prendre le dessus sur la version 'backend'.

Pour voir les codes XML d'origine :
- reportAbuse
- snippetedPostTitle
- widget-title