# Auditer une bibliothèque de 300 composants Gutenberg partagée entre plusieurs sites

> Retour d'expérience sur l'harmonisation SEO d'un design system de blocs utilisé par plusieurs sites d'un même groupe, et les vérifications de balisage sémantique à imposer.

- Auteur : WordPress Développement
- Publié le : 2023-03-24
- Mis à jour le : 2023-03-24
- Catégorie : SEO & GEO
- URL : https://www.wpmoderne.fr/seo/auditer-bibliotheque-300-composants-gutenberg/

## L’essentiel

- Un bloc partagé propage ses erreurs sur tous les sites
- La hiérarchie des titres est le premier point de rupture
- Un audit ponctuel ne suffit pas, il faut un contrôle continu

300 composants Gutenberg, six sites différents d'un même groupe média, et une seule bibliothèque de blocs source maintenue par une équipe centrale : c'est le contexte d'un audit mené pour repérer les défauts de balisage sémantique qui, une fois présents dans un composant partagé, se propageaient identiquement sur l'ensemble des sites du groupe.

Un design system de blocs a l'avantage de la cohérence visuelle, mais il inverse le rapport de risque habituel : une erreur de balisage sur un site isolé reste locale, tandis qu'une erreur dans un bloc partagé se démultiplie instantanément sur chaque site qui l'utilise, souvent sans que personne ne s'en aperçoive avant un audit dédié.

## Premier constat : la hiérarchie des titres cassée dans un seul bloc

Le premier problème identifié concernait un bloc « Mise en avant d'article », utilisé en tête de page d'accueil sur les six sites, qui générait systématiquement un `<h2>` pour le titre de l'article mis en avant — y compris lorsque ce bloc était la première structure de titre de la page, avant même le `<h1>` de la page elle-même. Ce défaut, invisible visuellement puisque la taille de police était gérée en CSS indépendamment du niveau de titre, cassait la hiérarchie sémantique sur des centaines de pages d'accueil et de rubriques à la fois.

La correction a nécessité de rendre le niveau de titre configurable au niveau du bloc, avec un attribut dédié, plutôt qu'un niveau fixe codé en dur :

```
registerBlockType( 'groupe/mise-en-avant', {
    attributes: {
        niveauTitre: { type: 'number', default: 2 }
    },
});
```

## Deuxième constat : des liens de bloc sans texte d'ancre explicite

> L'essentiel à retenir : Un bloc partagé propage ses erreurs sur tous les sites ; La hiérarchie des titres est le premier point de rupture ; Un audit ponctuel ne suffit pas, il faut un contrôle continu

Le second problème touchait un bloc « Carrousel d'articles liés », qui enveloppait chaque image dans un lien, mais laissait le texte du titre d'article en dehors de la zone cliquable, dans un élément distinct sans lien propre. Résultat : le texte d'ancrage du lien généré était vide ou réduit à un attribut `alt` d'image générique, ce qui privait chaque lien interne de tout signal thématique pour le maillage — un défaut multiplié par le nombre de carrousels affichés sur chaque site, potentiellement plusieurs milliers de liens concernés.

L'audit a été mené avec Screaming Frog en mode liste, en ciblant spécifiquement les URL des pages contenant ce bloc sur chacun des six sites, puis en exportant le texte d'ancre de chaque lien sortant de ces blocs pour un contrôle par échantillonnage.

## Les vérifications imposées à la bibliothèque

À l'issue de cet audit, une checklist de vérifications sémantiques a été formalisée et imposée à tout nouveau composant avant son intégration à la bibliothèque partagée :

- Le niveau de titre généré par le bloc doit être configurable, jamais fixé en dur à `h2` ou `h3`.
- Tout lien généré par un bloc doit inclure un texte d'ancre visible et descriptif, pas seulement une image.
- Un bloc de liste doit générer une vraie balise `<ul>` ou `<ol>`, jamais une succession de `<div>` stylées pour ressembler à une liste.
- Aucun bloc ne doit générer de balise `<h1>`, réservée au titre principal du gabarit de page.

## Un contrôle continu plutôt qu'un audit ponctuel

L'audit initial a permis de corriger les défauts existants, mais l'équipe centrale a rapidement constaté qu'un audit ponctuel ne suffisait pas : chaque nouveau composant ajouté à la bibliothèque devait être vérifié avant sa mise en production sur l'ensemble des sites, sous peine de reproduire le même schéma de propagation d'erreur. Un test automatisé, exécuté sur une page de démonstration regroupant tous les blocs de la bibliothèque, a été mis en place pour vérifier la présence d'un seul `<h1>` par page et l'absence de saut de niveau de titre.

> Dans un design system partagé, chaque composant ajouté à la bibliothèque doit être audité comme s'il allait être déployé sur cent pages en une seule fois — parce que c'est exactement ce qui se produit.

## En résumé

Un design system de blocs Gutenberg partagé entre plusieurs sites transforme chaque défaut de balisage sémantique en un défaut systémique, propagé instantanément à l'échelle du groupe. L'audit doit porter en priorité sur la hiérarchie des titres et la qualité des liens générés par les blocs, et surtout se prolonger par un contrôle continu à chaque nouveau composant, plutôt que de se limiter à une correction ponctuelle des blocs déjà existants.