Le souci n'est pas HTML. Le souci, c'est quand tout se ressemble
On peut construire une page entière avec des <div>. Le navigateur l'affichera sans broncher. Pour un moteur de recherche, en revanche, une page faite uniquement de conteneurs génériques oblige à deviner ce qui relève du contenu principal et ce qui appartient à la navigation, aux modules annexes ou au pied de page.
Les balises HTML5 sémantiques servent précisément à éviter ce flou. <header>, <main>, <article>, <aside> et <section> décrivent le rôle d'une zone, pas seulement sa position dans la mise en page.
Pour le SEO, ce n'est pas un détail. Plus la hiérarchie de la page est lisible, moins Google risque de mélanger le sujet principal avec les éléments récurrents du template.
Pourquoi c'est utile pour le référencement naturel
Google comprend déjà beaucoup de choses tout seul. Cela ne veut pas dire qu'il faut lui compliquer le travail.
Sur une même URL, on retrouve souvent :
- un menu global,
- des liens connexes,
- des encarts promotionnels,
- une barre latérale,
- un footer rempli de liens sitewide.
Si tout cela est mélangé dans une structure neutre, le moteur doit estimer où se trouve le vrai centre de gravité de la page. Sur un site éditorial, un blog ou un e-commerce, cette approximation finit souvent par coûter en clarté.
Prenons un test du BMW X5. Le corps de page parle du véhicule. À côté, on pousse des liens vers le Mercedes GLE, l'Audi Q7 ou des conseils d'entretien. Ces blocs ont leur utilité, mais ils ne devraient pas brouiller le sujet principal.
Commencez par les grandes zones : <header>, <main> et <footer>
Le premier niveau de structure est simple :
<header>pour l'en-tête et la navigation principale,<main>pour le contenu unique de cette page,<footer>pour les informations de clôture.
1<body> 2 <header> 3 <!-- logo, navigation, recherche --> 4 </header> 5 6 <main> 7 <!-- contenu principal et unique de cette URL --> 8 </main> 9 10 <footer> 11 <!-- mentions, contact, liens secondaires --> 12 </footer> 13</body>
Deux rappels utiles :
- Une page ne devrait contenir qu'un seul
<main>. - Ces balises expriment une structure logique, pas un style visuel. Le design reste le travail du CSS.
Encadrez le vrai sujet avec <article>
Dans beaucoup de cas, <main> ne suffit pas. Si votre URL porte un contenu autonome, article est souvent la bonne balise.
C'est le cas pour :
- un article de blog,
- une actualité,
- un guide,
- une fiche de contenu longue,
- un test produit.
Le plus souvent, le <h1> principal se trouve à l'intérieur.
1<main> 2 <article> 3 <h1>BMW X5 : essai complet et avis</h1> 4 <p>Le contenu central de la page...</p> 5 </article> 6</main>
Vous envoyez alors un signal simple : c'est ce bloc qui répond à l'intention de recherche.
Isolez le contenu d'appui avec <aside>
Tout ce qui n'est pas central n'est pas forcément inutile. Beaucoup d'éléments sont utiles, mais secondaires. C'est exactement le rôle de <aside>.
Exemples fréquents :
- biographie de l'auteur,
- encart de contexte,
- articles liés,
- publicité,
- widget latéral.
1<main> 2 <article> 3 <h1>BMW X5 : essai complet et avis</h1> 4 <p>Contenu principal...</p> 5 6 <aside> 7 <p>Données techniques et repères utiles.</p> 8 </aside> 9 </article> 10 11 <aside> 12 <h2>À lire aussi</h2> 13 <ul> 14 <li><a href="/mercedes-gle-review">Essai du Mercedes GLE</a></li> 15 <li><a href="/audi-q7-review">Essai de l'Audi Q7</a></li> 16 </ul> 17 </aside> 18</main>
Avec cette séparation, Google comprend plus facilement que le test du BMW X5 est le sujet de la page, et que le reste sert d'appui ou de navigation.
N'utilisez pas <section> comme un simple <div>
C'est probablement l'erreur la plus fréquente.
<section> a du sens lorsqu'on regroupe une partie thématique d'un contenu, généralement avec son propre titre. Dans un guide long, c'est très utile. Pour emballer n'importe quelle boîte de mise en page, beaucoup moins.
1<article> 2 <h1>Bien utiliser les balises HTML5 sémantiques</h1> 3 4 <section> 5 <h2>Le rôle de main</h2> 6 <p>...</p> 7 </section> 8 9 <section> 10 <h2>Quand utiliser article</h2> 11 <p>...</p> 12 </section> 13</article>
Règle simple : si le bloc n'aurait pas de vrai intertitre, il n'a probablement pas besoin de <section>.
La checklist à passer sur vos templates
Avant de modifier vos gabarits, vérifiez au moins cela :
- un seul
<main>par page, - le contenu qui porte l'intention principale est bien dans
<article>, - les recommandations, promos et sidebars sont séparées,
<section>sert à découper un sujet, pas à faire du layout,- l'ordre sémantique reste cohérent avec l'ordre de lecture,
- la logique est la même sur les pages éditoriales, catégories, fiches et landing pages.
Sur un site large, ces écarts se répètent souvent d'un template à l'autre. Une correction bien placée peut donc avoir un effet bien plus large qu'une seule page.
En bref
Le HTML5 sémantique ne remplace ni le contenu, ni l'intention de recherche, ni une bonne architecture interne. En revanche, il aide le moteur à distinguer plus vite ce qui constitue la réponse principale et ce qui relève du bruit de template.
Si certaines pages ont déjà de la visibilité mais peinent à transformer cette visibilité en performance solide, ce point mérite d'être audité. Dans SeoSpeedup Site Audit, ce type de problème structurel ressort généralement très vite.
