【SEO】h1〜h6の正しい使い方

謎のプリン語る。
プログラミングの役立つ、エンジニア技術情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

【SEO】h1〜h6の正しい使い方

投稿日：2026年08月24日

2026年08月24日

【SEO】h1〜h6の正しい使い方 - サムネイル

また空いてしまった。
暑さに死にそうではありましたが、生きてました。

さて、表記の件。
正しい使い方と大上段に構えといて、まだ正直検証中の考え方・手法だ。

待って、ブラウザバックしないでもう少し読んでおくれまし。

さて、冗談はさておき、本題さっさといこう。
前提として、h1〜h6とはなんぞやとか基本的なことに関しては全割愛するので悪しからず。

少し、SEOや、HTMLの書き方を齧ったり勉強したりしてる人は、下記のような構造にしがちではないだろうか。

<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <header>
      <h1>ページタイトル</h1>
    </header>
    <nav>
      <h2>グローバルナビ</h2>
      <ul>
        <li><a href="/about/">このサイトについて</a></li>
        <li><a href="/art/">作品集</a></li>
      </ul>
    </nav>
    <main>
     <h2>中見出し</h2>
     <p>コンテンツ</p>
     <section>
       <h3>小見出し</h3>
     </section>
    </main>
    <aside>
      <h2>その他のコンテンツ</h2>
      <p>補足情報など</p>
    </aside>
    <footer>
      <nav>
        <h2>フッターのサイトナビ</h2>
        <ul>
          <li><a href="/about/">このサイトについて</a></li>
          <li><a href="/art/">作品集</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

ようは、aside要素や、nav要素など、section以外のセクショニング要素にも律儀にヘディング要素（h1〜h6のこと）を入れる、というような構造だ。
SEO的に見出し扱いできそうなものをしっかりヘディング要素でマークアップさせるということだ。
かくいう私もずっと上記のようなマークアップをしていた。

一見、しっかりやってるから、ええ構造やん、と思われがちだが、いくつかの理由から、
SEO的にはベストと言えない可能性があるのだ。

ページのユニークコンテンツが伝わりにくくなる

一発目ではあるが、これがほぼ核心となる。
見出しは、あくまで、そのWebページのユニークコンテンツの構造等を示すものであるため、
補助要素や、Webサイト内の共通要素に対して見出し要素を入れるべきでない可能性がある。
なぜなら、その共通要素にまで使ってしまうと、
その見出しも含めて、ページのユニークコンテンツとして認識されてしまう可能性があるからだ。
現代の検索エンジンはそこまでバカではないのだが、ユニークコンテンツの内容が薄まって伝わってしまう可能性は十分あると思われるので、補助要素・共通要素には、見出し要素を入れない方がよい可能性が高い。

`section`要素以外のセクショ二ング要素には見出しは必要ない

SEOやHTMLの勉強を少しでもした方はご存知だと思うが、基本、section要素には、見出し要素は必須だ。
だが、他のアウトラインを作る、または意味をもつセクショニング要素には、見出し要素は必須ではない。
article、aside、nav、headerなどだ。
つまり、あくまでページの内容・コンテンツを、sectionないし、articleなどに配置した上で、見出し要素を設置する、他の、asideなどの補助要素、ページのユニークコンテンツには直接関係ない要素には見出し要素を使用しないことで、より、ページのユニークさを強調することができると思われる。

だが、navなどは特に、ページ内に複数存在する場合、スクリーンリーダーに対応することを考えた時、
なにに関しての要素なのかを示す時、ヘディング要素を使わなければ、難しい。
そんな時に、便利なのが、ARIAの指定だ。

前述したHTMLを下記のようにする。

<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <header>
      <h1>ページタイトル</h1>
    </header>
    <nav aria-label="グローバル">
      <ul>
        <li><a href="/about/">このサイトについて</a></li>
        <li><a href="/art/">作品集</a></li>
      </ul>
    </nav>
    <main>
     <h2>中見出し</h2>
     <p>コンテンツ</p>
     <section>
       <h3>小見出し</h3>
     </section>
    </main>
    <aside aria-labelledby="asideTtl">
      <p id="asideTtl">その他のコンテンツ</p>
      <p>補足情報など</p>
    </aside>
    <footer>
      <nav aria-labelledby="footerNavTtl">
        <p id="footerNavTtl">フッターのサイト</p>
        <!-- ariaでは、nav要素のものは、スクリーンリーダーに自動的にナビゲーションと読み上げがされてしまうため、意味をもつ名称のみ記述する -->
        <ul>
          <li><a href="/about/">このサイトについて</a></li>
          <li><a href="/art/">作品集</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

と、このように、
asideや、navには、aria-label、aria-labelledby属性を使用し、タイトルを指定することで、
要素の意味合いを指示することができる。

こうすることで、ページの内容には、見出し要素を使い、
asideや、navの意味合いは、aria-*を使い指定し、ページのユニークさを薄めることなく、
アクセシビリティを担保した構造とすることができるのだ。

私も、このサイトにて、実験してみており、まだ検証段階ではあるが、
徐々にアクセスが伸びている、狙ったワードでクリックされる数が増えてきている。

SEOは、極めたと思っても、次々新しい要素など出てくるし、
興味がつきないね。

さて、次もまたSEO関連にはなりそうだな。
そして、日本中とんでもなく暑い日が続いているので、
みなさんも本当に熱中症などに気をつけて。

ではまた。