Connexion
← Retour au lexique
⚙️ SEO Technique

Structure HTML

La structure HTML définit l'organisation sémantique d'une page web via les balises. Une bonne structure aide Google à comprendre le contenu et améliore le SEO.

Définition

La structure HTML désigne l’organisation du code HTML d’une page web à travers ses balises et leur hiérarchie. Une structure bien pensée aide les moteurs de recherche à comprendre le contenu, améliore l’accessibilité et facilite le styling CSS.

C’est le squelette sur lequel repose tout le SEO on-page.

Éléments structurels clés

Document de base

<!DOCTYPE html>
<html lang="fr">
<head>
  <!-- Métadonnées -->
</head>
<body>
  <!-- Contenu -->
</body>
</html>

Head (En-tête)

Contient les métadonnées invisibles :

  • <title> : Titre de la page
  • <meta> : Description, charset, viewport
  • <link> : CSS, canonical, hreflang
  • <script> : JavaScript

Body (Corps)

Contient le contenu visible, structuré avec des balises sémantiques.

Balises sémantiques HTML5

En-tête de la page ou d’une section. Contient souvent le logo, la navigation principale.

Zone de navigation avec les liens de menu.

main

Contenu principal unique de la page. Un seul par page.

article

Contenu autonome et redistribuable (article de blog, news).

section

Groupe de contenu thématique avec généralement un titre.

aside

Contenu secondaire, tangentiel (sidebar, encarts).

Pied de page avec informations complémentaires, liens légaux.

Structure des titres (H1-H6)

Hiérarchie logique

<h1>Titre principal (un seul)</h1>
  <h2>Section principale</h2>
    <h3>Sous-section</h3>
    <h3>Autre sous-section</h3>
  <h2>Autre section</h2>

Règles SEO

  • Un seul H1 par page
  • Pas de saut de niveau (H1 → H3 sans H2)
  • Hiérarchie logique reflétant la structure du contenu
  • Mots-clés dans les titres (naturellement)

Importance pour le SEO

Compréhension du contenu

Google utilise la structure pour comprendre la hiérarchie et l’importance relative des éléments.

Une structure claire avec H2/H3 questions + réponses aide à obtenir des extraits optimisés.

Accessibilité

Les lecteurs d’écran utilisent la structure pour naviguer. Accessibilité et SEO vont ensemble.

Crawl efficace

Une structure propre facilite le travail de Googlebot.

Bonnes pratiques

Utiliser les balises sémantiques

Préférez <article>, <section>, <nav> aux <div> génériques.

Structure logique des titres

La hiérarchie H1-H6 doit refléter la structure logique du contenu.

Balises appropriées pour chaque contenu

  • Listes : <ul>, <ol>, <li>
  • Citations : <blockquote>
  • Code : <code>, <pre>
  • Emphase : <strong>, <em>

Éviter les div-itis

Trop de <div> imbriqués sans sens sémantique complique la compréhension.

Exemple de structure optimale

<body>
  <header>
    <nav><!-- Menu --></nav>
  </header>

  <main>
    <article>
      <h1>Titre de l'article</h1>
      <section>
        <h2>Introduction</h2>
        <p>...</p>
      </section>
      <section>
        <h2>Développement</h2>
        <h3>Point 1</h3>
        <p>...</p>
      </section>
    </article>
  </main>

  <aside>
    <!-- Sidebar -->
  </aside>

  <footer>
    <!-- Pied de page -->
  </footer>
</body>

Validation

Outils

  • W3C Validator : Vérifie la conformité HTML
  • Lighthouse : Audit d’accessibilité
  • HeadingsMap (extension) : Visualise la hiérarchie des titres

Conclusion

Une structure HTML propre et sémantique est fondamentale pour le SEO. Elle aide Google à comprendre votre contenu, améliore l’accessibilité, et facilite la maintenance. Utilisez les balises HTML5 sémantiques, respectez la hiérarchie des titres, et validez votre code.

← Retour au lexique