0%

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

Posted:2017.01.12

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

こちらのブログではプログラミングに関するコンテンツをお送りしておりますが、今回は少し視点を変えて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にも有利になります。見た目のデザインやコンテンツの導線には直接影響するわけではありませんが、このような視点を意識しながらサイト制作を行うのも重要ですね。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】