プログラミングナレッジKnowledgeSide

2017.01.12

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

Pocket

こちらのブログではプログラミングに関するコンテンツをお送りしておりますが、今回は少し視点を変えてHTMLの内部SEOについて考えていきたいと思います。

 

HTMLにはテキストに対して意味を持たせ(マークアップ)データとしての構造化を行う役割があります。テキストなどの文書データを正しくマークアップさせることで、コンテンツとして正確な情報を伝えることができるようになります。このような手法はSEOの内部対策としても非常に有効で、セマンティックSEOとも表現されることもあります。

 

では具体的にどのように施策をしていくかを見ていきたいと思います。

 

HTMLのアウトラインが重要

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

 

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

 

アウトライン構造を意識する上で、これらのセクショニングに使う要素の中では必ず見出し(hタグ)が含まれるようにします。また、セクショニングを行うタグについても、本来示すべき意味が正しく用いられるような箇所で使用します。

 

では、これらを踏まえてコーディングする場合のサンプルを見ていきましょう。

 

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

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

 

【HTML】

<html>
  <head>
  </head>
  <body>
      <header>
          <h1>サイトタイトル</h1>
          <nav>ナビゲーション</nav>
      </header>
      <main>
          <article>
              <h1>コンテンツタイトル1</h1>
              <section>
                  <h2>大見出し</h2>
                  <h3>小見出し</h3>
              </section>
          </article>
          <article>
              <h1>コンテンツタイトル2</h1>
              <section>
                  <h2>大見出し</h2>
                  <h3>小見出し</h3>
              </section>
          </article>
          <article>
              <h1>コンテンツタイトル3</h1>
              <section>
                  <h2>大見出し</h2>
                  <h3>小見出し</h3>
              </section>
          </article>
      </main>
      <aside>
          <h1>サイドバータイトル</h1>
          <article>
              <h1>サイトバー見出し</h1>
              <section>
              </section>
          </article>
          <article>
              <h1>サイトバー見出し</h1>
              <section>
              </section>
          </article>
      </aside>
      <footer>
      </footer>
  </body>
</html>

 

articleタグの中に見出しタグとsectionタグ、さらにその中に見出しタグが含まれています。また、これまではh1タグは1ページに1回しか使用してはならないというルールがありましたが、現在は正しくセクショニングされている範囲内に収まっていれば、複数使用しても問題ありません。

 

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

完成したHTMLのアウトラインを実際に確認してみます。アウトラインの確認にはブラウザの拡張機能や下記のようなオンラインツールなどを利用します。

 

【HTML 5 Outliner】
https://gsnedders.html5.org/outliner/

 

実際にアウトラインを可視化すると次のような構造になっているのが確認できます。ちょうど本の目次のような形になっていますね。

 

1. サイトタイトル
    1. Untitled Section
    2. コンテンツタイトル1
        1. 大見出し
            2. 小見出し
    3. コンテンツタイトル2
        1. 大見出し
            2. 小見出し
    4. コンテンツタイトル3
        1. 大見出し
            2. 小見出し
    5. サイドバータイトル
        1. サイトバー見出し
            2. Untitled Section
        1. サイトバー見出し
            2. Untitled Section

 

 

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

 

 

Pocket

>>記事一覧に戻る