セマンティックSEOを意識したHTMLのアウトライン

HTML2017.1.12

最終更新日：2022.9.20 Update!!

こちらのブログではプログラミングに関するコンテンツをお送りしておりますが、今回は少し視点を変えてHTMLの内部SEOについて考えていきたいと思います。HTMLにはテキストに対して意味を持たせ（マークアップ）データとしての構造化を行う役割があります。テキストなどの文書データを正しくマークアップさせることで、コンテンツとして正確な情報を伝えることができるようになります。このような手法はSEOの内部対策としても非常に有効で、セマンティックSEOとも表現されることもあります。では具体的にどのように施策をしていくかを見ていきたいと思います。

HTMLのアウトラインが重要

きちんとした構造で情報を伝えるにはHTMLのアウトラインを意識した形にしていかなければなりません。このアウトラインというのは見出しとそれを囲うセクションを指します。見出しにはhタグが用いられ、セクショニングには下記のタグが登場します。

header	ヘッダー要素であることを示します。ヘッダー部分をセクショニングする場合に用います。
footer	フッター要素であることを示します。フッター部分をセクショニングする場合に用います。
nav	ナビゲーション要素であることを示します。ナビゲーション部分をセクショニングする場合に用います。
aside	本文とは関係のない要素を示します。サイドバーなどに用いられる場合が多いです。
article	単独で完結する記事など要素であることを示します。一つのグループ内でも意味が異なる場合などは複数用いる場合も。
section	章や節ということを示します。article内でのセクショニングなどに用いるイメージです。

アウトライン構造を意識する上で、これらのセクショニングに使う要素の中では必ず見出し（hタグ）が含まれるようにします。また、セクショニングを行うタグについても、本来示すべき意味が正しく用いられるような箇所で使用します。では、これらを踏まえてコーディングする場合のサンプルを見ていきましょう。

アウトラインを意識したコーディング

ページ全体をヘッダー、メイン、フッターと大きく分けるところから始まり、最終的に細かくセクショニングし各見出しを設定します。【HTML】

<!DOCTYPE html>
  <head></head>
  <body>
    <header>
      <h1>サイトタイトル</h1>
      <h2>ヘッダー見出し</h2>
      <nav>
        <h3>ナビゲーションメニュー</h3>
      </nav>
    </header>
    <main>
      <h2>メインコンテンツタイトル</h2>
      <article>
        <h3>コンテンツ1タイトル</h3>
        <section>
          <h4>大見出し</h4>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
        </section>
        <section>
          <h4>大見出し</h4>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
        </section>
      </article>
      <article>
        <h3>コンテンツ2タイトル</h3>
        <section>
          <h4>大見出し</h4>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
        </section>
        <section>
          <h4>大見出し</h4>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
          <h5>小見出し</h5>
          <p>本文テキスト</p>
        </section>
      </article>
    </main>
    <aside>
      <h2>サブコンテンツタイトル</h2>
      <section>
        <h3>サブコンテンツ1見出し</h3>
      </section>
      <section>
        <h3>サブコンテンツ2見出し</h3>
      </section>
    </aside>
    <footer>
      <h2>フッター見出し</h2>
    </footer>
  </body>
</html>

articleタグの中に見出しタグとsectionタグ、さらにその中に見出しタグが含まれています。また、これまではh1タグは1ページに1回しか使用してはならないというルールがありましたが、現在は正しくセクショニングされている範囲内に収まっていれば、複数使用しても仕様上は問題ないようです。ただし、ページ内容を正しく解釈させるためやアクセシビリティの観点から、できるだけ多用するのは控えるべきだとされています。

アウトライン構造をチェック

完成したHTMLのアウトラインを実際に確認してみます。アウトラインの確認にはブラウザの拡張機能や下記のようなオンラインツールなどを利用します。【HTML 5 Outliner】 https://gsnedders.html5.org/outliner/ 実際にアウトラインを可視化すると次のような構造になっているのが確認できます。ちょうど本の目次のような形になっていますね。

1. サイトタイトル
    1. ヘッダー見出し
    2. ナビゲーションメニュー
    3. メインコンテンツタイトル
    4. コンテンツ1タイトル
        1. 大見出し
            1. 小見出し
            2. 小見出し
        2. 大見出し
            1. 小見出し
            2. 小見出し
    5. コンテンツ2タイトル
        1. 大見出し
            1. 小見出し
            2. 小見出し
        2. 大見出し
            1. 小見出し
            2. 小見出し
    6. サブコンテンツタイトル
        1. サブコンテンツ1見出し
        2. サブコンテンツ2見出し
    7. フッター見出し

このように構造が整理されていると、検索エンジンがスムーズにクロールしてくれるようになるのでSEOにも有利になります。見た目のデザインやコンテンツの導線には直接影響するわけではありませんが、このような視点を意識しながらサイト制作を行うのも重要ですね。