Mauvais balisage HN de Blogger : exemples et solutions

Dans un article précédent, nous avons vu le rôle et l'importance des balises de titre (ou balises HN) pour l'expérience utilisateur (UX) et le référencement d'un blog ou d'un site (SEO).

Contrairement à ce qu'on pourrait naïvement espérer, Blogger les gère nativement assez mal sur plusieurs aspects, générant même des erreurs capitales. En voici le détail dans cet article, avec quand même une lumière au bout de ce tunnel !

Les erreurs du balisage HN automatique de Blogger

Pour se rendre compte des problèmes que pose Blogger avec les balises HN, rien de mieux que des exemples. J'ai donc passé à l'analyse des blogs de test avec des thèmes de version 2 et 3. Pour cela j'ai utilisé l'outil proposé par Mehdi Cholat à partir duquel les copies d'écran ci-dessous sont tirées.

Thèmes version 2

Avant d'aller dans le détail, il faut savoir que le thème Dynamic Views ne génère aucune balise HN et qu'il est donc fortement déconseillé de ce point vue.

Les autres thèmes sont heureusement mieux servis, mais non sans quelques soucis. Voici l'analyse du balisage HN de la page d'accueil d'un blog avec un thème version 2 (sauf Dynamic views bien sûr) :

Au premier coup d'œil ça ne paraît pas mal, mais si on s'approche on voit quelques bizarreries : les dates de publication en H2 ne paraissent pas très pertinentes, alors qu'on y verrait plutôt le titre des articles récents qui ne sont qu'en H3. A part ça, les règles de balisage sont globalement respectées. 

On va voir que ça se gâte avec le balisage des articles :

Tous les articles se retrouvent avec le titre du blog en H1. En termes de SEO, il y a mieux, les moteurs de recherche risquent de considérer que vous publiez presque toujours la même chose...

Le titre de l'article en cours d'affichage n'est qu'en H3, alors que les titres de son propre contenu sont en H2. Là ça devient grave en termes de cohérence !

Thèmes version 3

On aurait pu espérer une amélioration avec les thèmes plus récents de version 3, mais malheureusement c'est le contraire, c'est pire. Voici le résultat de l'analyse de la page d'accueil d'un blog de test avec le thème Contempo qui fait partie des thèmes officiels 'modernes' :

Le balisage natif de la page d'accueil commence par H3 à cause du widget 'Rechercher dans ce blog', puis saute en H1 avec le titre du blog, ce qui contrevient gravement aux règles 2 et surtout 3. 

Les titres des gadgets comme, 'Archiver, 'Libellés' ou 'Signaler un abus' sont tous en H3, alors qu'ils devraient être en H2 puisqu'ils sont du même niveau logique que 'Articles', ce qui enfreint la règle 2.

Passons au balisage natif d'un article :

On retrouve les mêmes erreurs que pour la page d'accueil, mais en plus il y a un nouveau saut hiérarchique H1 -> H3 entre le titre du blog et celui de l'article. 

Tous les articles d'un blog se retrouvent systématiquement avec le titre du blog en H1. Le titre de l'article est relégué en H3, ce qui n'est pas logique puisque le plus important c'est lui !

Suivant les thèmes, et donc suivant la disposition des gadgets, les erreurs ne sont pas exactement les mêmes, mais ça ne change pas grand chose au constat qui n'est pas fameux : sauts hiérarchiques automatiques et non respect de la structure réelle du contenu.

Les erreurs de mise en page du blogueur

Un autre problème est que Blogger associe le balisage HN avec le style, ce qui contrevient à la règle 5. Par exemple lorsqu'on écrit un article et qu'on affecte à une ligne la propriété "Titre" pour une bonne mise en page, Blogger lui colle automatiquement une balise H2. Les sous-titres sont automatiquement en H3 et les titres secondaires en H4 etc.

L'intention de départ est bonne, puisque ça évite au rédacteur de se préoccuper des balises HN, et c'est souvent comme ça avec ce genre de plateforme. Mais le blogueur est-il conscient qu'il peut générer des sauts hiérarchiques à cause d'une simple mise en forme ? Pour ma part, il m'a fallu un bon moment avant de m'en apercevoir et d'en tenir compte ! 

De même donner accès à la propriété "Titre principal", à laquelle Blogger  associe automatiquement la balise H1, risque de générer plusieurs balises H1 puisque le titre du blog est déjà à ce niveau hiérarchique. Donc si on s'en sert on ne respecte pas la règle 1... Voici un exemple de balisage HN d'un article mis en forme "pour faire joli" et sans précaution : c'est la catastrophe !

Que faire ? Installer l'Add-on HTag bien sûr !

J'avoue que j'ai été surpris quand je me suis penché sur la question, d'abord pour mes propres blogs. Moi qui faisais bêtement confiance à Blogger, je ne pouvais pas imaginer que de telles anomalies de référencement et d'accessibilité puissent exister dans un produit Google, dont c'est quand même la spécialité ! 

Ayant été informaticien dans une autre vie, je n'ai pas pu m'empêcher de mettre mon nez dans le code de mes thèmes et d'essayer d'arranger les choses. J'y suis parvenu, non sans mal, et avec beaucoup de temps passé dessus.

Finalement, je me suis dit que ce que j'avais trouvé pour moi pouvait intéresser d'autres utilisateurs de Blogger. Alors je vous propose ce que j'appelle un peu pompeusement "Add-on HTag" et que j'ai écrit pour les versions 2 et 3 des thèmes de Blogger. Il y a donc HTag V2 et HTag V3. Ne vous trompez pas de version en suivant les liens ! Ils vous mèneront aux procédures d'installation. Et n'hésitez pas non plus à laisser un commentaire si vous avez des questions ou des remarques.