Lorsqu’un agent IA lit votre page, il ne voit pas son apparence : il parcourt l’arborescence du DOM. Une mise en page élégante composée d’une succession de <div> ne représente, pour l’analyseur, qu’un empilement de conteneurs sans signification. Remplacez-les par des balises sémantiques autour du même texte et la précision de l’extraction change radicalement. Le HTML sémantique n’est pas un simple bonus en matière d’accessibilité : c’est le moyen le moins coûteux d’aider les moteurs d’IA à vous citer proprement.
Pourquoi les agents IA privilégient les balises sémantiques
Lorsque Google AI Overview, Perplexity ou ChatGPT explore une URL, une chaîne de traitement convertit le HTML en texte brut. Les styles disparaissent, mais la structure demeure : <h1> indique le sujet de la page, <article> délimite le contenu et <nav> ou <footer> sont écartés comme éléments récurrents du gabarit. Le choix des bonnes balises aide donc directement le modèle à dégager les points essentiels. Si tout repose sur des div, il doit se fier au nombre de mots, à la position des blocs et à une part de hasard pour déterminer quel passage mérite d’être cité.
La différence tient au degré de confiance de l’analyse. Un contenu placé dans <main><article>, avec une hiérarchie continue de <h2>, forme une unité aux limites nettes que l’analyseur peut extraire. Remplacez cette structure par <div class="content-wrapper-2"> et le même texte perd tous ses signaux. Lors de nos audits GEO, le problème de visibilité le plus fréquent chez nos clients n’est pas un contenu insuffisant, mais un bon contenu enfoui sous des div imbriquées sans valeur sémantique. Le moteur d’IA ne parvient alors pas à en isoler un extrait propre.
Une balise décrit un sens, pas une apparence
La sémantique repose sur un principe unique : chaque balise déclare le « rôle » d’un contenu, et non son apparence. <button> désigne un élément qui déclenche une action, <a> un lien qui mène ailleurs et <ul> un ensemble d’éléments associés. Cette signification est interprétée à la fois par les navigateurs, les lecteurs d’écran et les analyseurs IA. Au moment de choisir une balise, ne vous demandez pas « à quoi cet élément doit-il ressembler ? », mais « quelle est sa véritable fonction ? ».
- <main> : une seule occurrence sur toute la page. Cette balise délimite « le véritable sujet de cette page » et permet à l’analyseur d’ignorer directement l’en-tête, la barre latérale et le pied de page.
- <article> : une unité de contenu pouvant être extraite de manière autonome tout en conservant son sens, par exemple un article, une FAQ ou une fiche produit.
- <h1> à <h6> : le sommaire de la page. Les niveaux doivent se suivre sans rupture ; ne les choisissez jamais en fonction de la taille de police souhaitée.
- <nav> : une zone de navigation. Cette balise indique au moteur qu’il s’agit d’un menu, et non du contenu principal.
- <section> avec un titre : un groupe de paragraphes consacré à un même thème, généralement introduit par un titre.
- <table>, <thead>, <th> : réservez les balises de tableau aux véritables données tabulaires et n’utilisez pas de div pour les mettre en page. C’est à partir de ces balises que l’IA peut reconstituer des tableaux.
- <time datetime> et <address> : rendez les dates et les coordonnées directement lisibles par les machines.
Voici un test simple : prononcez le nom de la balise. Décrit-il la nature du contenu ? Si vous utilisez une <div> pour une action cliquable, son nom ne dit rien de plus que « conteneur » : ce n’est pas la bonne balise. Il faut employer <button>. Confiez l’apparence au CSS et réservez aux balises la définition du sens. C’est en séparant clairement ces deux fonctions que vous rendez la page lisible par les machines.
Les pièges les plus courants : la « soupe de div » et les titres désordonnés
Dans la pratique, les mêmes problèmes reviennent sans cesse. Certaines pages ne comportent que des div et des spans, sans aucune balise sémantique : c’est ce que l’on appelle une « soupe de div ». Ailleurs, plusieurs <h1> coexistent sur une même page ou un <h4> remplace un <h2> uniquement pour obtenir la bonne taille de police. La hiérarchie des titres devient alors incohérente et le plan reconstitué par le modèle est erroné. On rencontre aussi de fausses listes assemblées à coups de sauts de ligne <br>, ou des boutons simulés avec <div onclick>. À l’écran, la différence semble inexistante ; dans le DOM, leur fonction reste invisible.
Dans quel ordre rendre une page sémantique
Inutile de refondre tout votre site en une seule fois. Choisissez la page la plus stratégique pour votre visibilité, puis suivez les étapes ci-dessous. Vous assimilerez rapidement la logique.
- Commencez par la structure générale : assurez-vous qu’il existe une seule et unique balise <main> sur toute la page, puis placez respectivement l’en-tête, la navigation et le pied de page dans <header>, <nav> et <footer>.
- Corrigez la hiérarchie des titres : un seul <h1> par page, un <h3> uniquement sous un <h2>, sans jamais sauter de niveau. Utilisez une extension de navigateur ou une commande pour afficher et contrôler le plan du document.
- Encadrez le contenu avec <article> : donnez des limites claires à chaque bloc susceptible d’être cité indépendamment, notamment les FAQ, les procédures et les définitions.
- Remplacez les faux composants : transformez <div onclick> en <button>, et les faux boutons de navigation en <a href>.
- Structurez les données : utilisez <table> pour les tableaux, <ul> ou <ol> pour les listes, et <time> pour les dates.
- Ajoutez les libellés et les textes alternatifs : associez <label for> aux champs de formulaire et renseignez l’attribut alt des images, afin que les machines et les lecteurs d’écran accèdent à la même information sémantique.
Comment vérifier que la machine comprend réellement votre page
Après vos modifications, ne vous fiez pas à votre seule impression. Le test le plus rapide consiste à activer le « mode lecture » du navigateur. Safari ou Firefox parvient-il à extraire proprement votre texte ? Si oui, il est probable qu’un analyseur IA y parvienne également. Deuxième méthode : récupérez le HTML d’origine en ligne de commande et vérifiez que le texte n’est pas injecté par JavaScript. Troisième méthode : ouvrez l’arbre d’accessibilité dans les outils de développement. Sa structure se rapproche fortement de la manière dont une machine perçoit la page. Une page ne peut être considérée comme véritablement lisible qu’après avoir réussi ces trois tests.
Si vous désactivez tout le CSS du site, votre page reste-t-elle lisible ? Lorsque l’ordre du contenu demeure logique, que les titres restent clairs et que les listes sont toujours identifiables comme telles, l’agent IA peut comprendre la page. Si vous n’obtenez plus qu’un amas de texte désordonné, la machine sera elle aussi perdue.
Une fois le HTML sémantique en place, ajoutez les données structurées
Le HTML sémantique constitue le socle, pas l’aboutissement. Une fois cette base assainie, ajoutez le JSON-LD de Schema.org et employez des types comme Article, FAQPage et Product pour expliciter auprès des machines des informations telles que la date, l’auteur ou le prix. Ne procédez toutefois pas dans l’ordre inverse : plaquer un schéma sur une soupe de div revient à maquiller le problème. Le robot d’exploration compare en effet le contenu balisé au DOM réellement présent sur la page et peut vous pénaliser en cas d’écart. Commencez par corriger la sémantique du HTML pour donner une assise solide au schéma. Si vous souhaitez savoir comment un analyseur IA perçoit votre page et où se situent les lacunes, vous pouvez réserver un diagnostic GEO de 30 minutes : nous les examinerons avec vous à partir des résultats d’extraction réels.
