[HTML] HTMLコーディングの基本のアウトラインとは

  HTML, SEO ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
html アウトライン

WEBサイトのコーディングをする際に、見やすさなどを考えた「ユーザーに対して」と、SEO対策を考えた「Googleなどの検索ロボット(クローラー)に対して」行うと思います。今回、HTMLのコーディングする際に重要である検索ロボット(クローラー)へのSEO対策となるアウトラインについてご紹介していきたいと思います。

アウトラインとは

Googleなどの検索ロボット(クローラー)に対して、WEBサイトの階層構造を示すもののことです。

具体的に言うと、検索ロボット(クローラー)に対して、WEBサイトを正しく理解してもらうために見出しや文章などの階層構造を示すことで、的確に理解してもらい質の高いコンテンツであることを示すもののことです。
これにより、ユーザーが求めているであろうコンテンツと制作したWEBサイトを適切に引き合わせてもらえるようにまります。

もしユーザーと制作したWEBサイトを適切に引き合わせてられず、WEBサイトをクリックして訪れてくれても、求めていないコンテンツであると検索ページへ戻っていくので、検索順位の低下にもつながっていきます。

アウトラインの確認方法

アウトラインを解析できるサイト・アドオンをご紹介したいと思います。解析サイトであるHTML 5 OutlinerではローカルでのHTMLファイル参照だけでなく、URLを指定して解析させることもできます。
また、解析アドオンではGoogle Chromeに拡張機能であるアドオン「HTML 5 Outliner」をインストール・有効にするとスターの左にアイコンが現われ、これをクリックすると表示しているサイトのアウトラインが表示されます。

HTML 5 Outliner(サイト版)

html アウトライン サイト

HTML 5 Outliner(Google Chromeのアドオン版)

html アウトライン アドオン

アップロードした自分のサイトやネット上のサイトのアウトラインを確認することができます。さっそく、簡単なアウトラインで確認してみます。

アウトラインの記述例

アウトラインに影響を与える見出しタグをもとに、下記のように記述を行いました。

<h1>見出し1</h1>
  <h2>見出し2</h2>
  <p>コンテンツ・コンテンツ</p>
  <h2>見出し2</h2>
  <p>コンテンツ・コンテンツ</p>
    <h3>見出し3</h3>
    <p>コンテンツ・コンテンツ</p>
      <h4>見出し4</h4>
      <p>コンテンツ・コンテンツ</p>
    <h3>見出し3</h3>
    <p>コンテンツ・コンテンツ</p>
      <h4>見出し4</h4>
      <p>コンテンツ・コンテンツ</p>

今回はわかりやすいようにh1が大見出しに、h2・h3・h4の中見出しが現れた時点でインデントを入れて、階層構造をコードでも示しています。この記述例のように解析でも階層構造を得られるか確認していきたいと思います。

アウトライン解析結果

上記で示した記述例を解析サイトにコピペをして解析すると次のような結果となります。
html アウトライン 結果

解析結果と記述例を見比べてみると、解析結果と記述例の見出しが同じ階層構造になっていることがわかると思います。
このことから、アウトラインをしっかりと表現することができていると言えます。

階層構造エラーUntitled Section

階層構造の中に見出し要素がない場合、Untitled Sectionと表示されます。これは見出しによって階層構造ができるためです。Untitled Sectionがある場合は、構造の見直しを行う必要があります。
しかし、改めてご紹介しますがHTML5ではnav要素においても同様にUntitled Sectionと表示されてしましますが、Navigationという見出しを持っているため問題ありません。

SNSでもご購読できます。

コメントを残す

*