Commençons par l’essentiel : lorsqu’une IA lit votre page web, elle ne juge pas d’abord la qualité de votre texte. Elle décompose le HTML en arborescence, élimine les éléments qu’elle considère comme du bruit, puis convertit le contenu restant en texte brut ou en Markdown. Si votre page empile des dizaines de div et que ses titres ne sont que du texte agrandi en gras, son contenu risque d’être fragmenté, pris pour une barre latérale et écarté des sources susceptibles d’être citées. Un HTML propre n’est donc pas une lubie d’ingénieur : c’est une condition préalable pour qu’une IA puisse exploiter et citer votre contenu.
La plupart des moteurs d’IA n’affichent pas intégralement votre page comme le ferait un navigateur. Ils appliquent des procédés d’extraction proches des outils de lisibilité : repérer la zone de contenu principale, retirer la navigation et le pied de page, utiliser les titres h1 à h3 comme ossature, puis conserver les paragraphes et les listes comme contenu. Toute la hiérarchie visuelle soigneusement créée en CSS leur échappe. Seule compte la structure exprimée par les balises HTML. Voilà pourquoi deux pages visuellement identiques peuvent connaître des fortunes opposées : l’une est régulièrement citée, tandis que l’autre reste absente des réponses malgré toutes les réécritures de son contenu.
Trop de div imbriquées, et l’outil d’extraction perd le fil
Les frameworks front-end modernes produisent facilement une « soupe de div » : chaque élément reçoit son propre conteneur, jusqu’à enfouir sous huit à dix niveaux de div un texte qui devrait former une explication continue. Pour identifier le contenu principal, l’outil d’extraction s’appuie sur des règles heuristiques liées notamment à la densité du texte et au type de balises. Plus l’imbrication est profonde et mêlée à de courts fragments — boutons, libellés ou autres éléments d’interface — plus son niveau de confiance baisse. Il peut alors sélectionner la mauvaise zone ou découper un paragraphe continu en trois fragments sans rapport apparent, qu’il traitera séparément.
La solution est simple : encadrez le contenu principal avec des balises sémantiques. <main> désigne le contenu essentiel de la page, <article> un contenu autonome, <section> ses différentes parties et <figure> une illustration accompagnée de sa légende. Ces balises indiquent explicitement à l’outil d’extraction : « C’est ici que se trouve l’information importante. » Vous ne pourrez pas toujours supprimer tous les conteneurs générés par votre framework. Assurez-vous néanmoins que le niveau extérieur du contenu principal soit un <main> ou un <article>, et non la douzième div dotée d’une classe wrapper. Si une seule balise sémantique suffit, n’ajoutez pas trois niveaux de div.
La hiérarchie des titres sert de sommaire à l’IA
L’outil d’extraction interprète les titres h1 à h6 comme la table des matières de la page et s’en sert pour segmenter le contenu. Une structure nette permet à l’IA de citer précisément le passage qui répond à une question donnée. Une structure confuse transforme l’article en bloc indistinct et fait disparaître le contexte au moment de la citation. Trois principes suffisent pour éviter ce problème.
- Utilisez un seul h1 par page, généralement pour le titre de l’article, puis structurez les différentes parties à partir du niveau h2.
- Ne sautez aucun niveau : faites suivre un h2 d’un h3, sans passer directement au h4. Une rupture de niveau peut fausser l’interprétation des liens entre les paragraphes.
- Un titre exprime une structure, pas un style. Pour agrandir une ligne de texte, utilisez le CSS. N’employez pas un h2 uniquement pour augmenter sa taille et ne multipliez pas les titres de même niveau dans le seul but d’améliorer le référencement naturel.
L’erreur la plus courante consiste à placer un unique h1 sur la page, puis à fabriquer tous les autres « titres » avec des div et du texte en gras. Pour le robot d’exploration, l’article ne comporte alors aucune partie identifiable : il ne voit qu’un long bloc de texte continu, qu’il doit extraire ou écarter dans son ensemble. Remplacer ces faux titres par de véritables h2 et h3 revient à fournir un sommaire à l’IA. Elle sait alors où commence chaque sujet.
Balises et attributs sémantiques : exprimer le sens sans dépendre du CSS
La structure permet une extraction propre ; les attributs aident la machine à comprendre ce qu’elle a extrait. Un attribut alt donne du sens à une image dans un environnement purement textuel. La balise <time datetime> permet d’identifier une date au lieu de la traiter comme une suite de caractères. L’association de <table> et <th> préserve les relations entre les champs lors de la conversion en Markdown. Enfin, les balises <dl>, <dt> et <dd> structurent les termes et leurs définitions, afin que le modèle puisse les extraire sous la forme d’un ensemble clair de questions et de réponses. Conçus à l’origine pour l’accessibilité, les attributs ARIA — aria-label et aria-labelledby — donnent aussi un sens lisible par les machines aux éléments dépourvus de texte visible.
Bien utiliser les attributs de données, sans leur prêter de pouvoirs magiques
Soyons clairs : la plupart des robots d’exploration liés à l’IA ignorent complètement vos attributs data-* personnalisés. Ils ne sont pas conçus pour interpréter une nomenclature privée. Les seuls « attributs de données » véritablement répandus sont ceux qui reposent sur des standards : itemprop pour les microdonnées, data-nosnippet pour demander au moteur de ne pas reprendre un passage dans un résumé et, surtout, JSON-LD, la couche lisible par les machines la plus fiable. Plutôt que d’inventer une série d’attributs data-geo-* en espérant que l’IA les comprendra, consignez les faits essentiels susceptibles d’être cités — auteur, date de publication, prix et FAQ — dans des données structurées JSON-LD. Les informations extraites disposeront ainsi d’une source de vérité indépendante de la mise en page.
Les attributs data-* restent bien sûr utiles, mais à d’autres fins. Vous pouvez les employer dans vos outils d’analyse ou vos systèmes internes pour identifier les passages susceptibles d’être cités et suivre les contenus effectivement repris par l’IA. Ce sont des repères destinés à vos équipes, pas des instructions adressées à l’IA. En distinguant clairement ces deux usages, vous éviterez de consacrer du temps à des attributs que personne ne lira.
La checklist pour nettoyer votre HTML
- Encadrez le contenu principal avec <main> ou <article> afin de créer une zone unique et clairement identifiable.
- Supprimez les div imbriquées qui ne servent qu’à la mise en page et privilégiez les balises sémantiques dès que possible.
- Conservez un seul h1 par page, respectez la progression entre h2 et h3 et remplacez tous les faux titres par de véritables balises de titre.
- Utilisez alt pour les images, <time> pour les dates, <th> dans les tableaux et <dl> pour les termes et leurs définitions.
- Intégrez les faits essentiels dans des données structurées JSON-LD au lieu de compter uniquement sur des attributs data-* personnalisés.
- Une fois la page finalisée, convertissez-la en Markdown et contrôlez le résultat. C’est sous une forme proche de celle-ci que l’IA la percevra.
L’IA ne vous citera pas parce que votre page est réussie dans un navigateur. Elle citera la version qu’elle aura pu extraire proprement et comprendre.— Tenten GEO
Dans une démarche GEO, le nettoyage du HTML compte parmi les chantiers les plus rentables — et les plus souvent négligés. Il ne demande aucune réécriture du fond : il consiste simplement à organiser le contenu existant dans un format lisible par les machines. Le coût reste donc faible et les résultats peuvent être rapides. Si vous souhaitez savoir ce que l’outil d’extraction de l’IA ne perçoit pas sur vos pages stratégiques, notre audit GEO examine concrètement leurs résultats d’extraction. Vous pouvez également prendre rendez-vous pour un diagnostic GEO de 30 minutes : nous analyserons vos propres pages afin d’identifier immédiatement les écarts.
