HTML5のアウトラインについての解説とアウトラインの確認方法

アウトラインとは？

　webページのアウトラインっていうのは、そのページの構造を大まかに表す目次みたいなものです。
　参考：このページのアウトライン

　アウトラインはSEO上、非常に重要だと言われています。

　クローラーが、あるページをスキャンする際に、アウトラインが綺麗に整っているとそのページの内容を正しく読み取ってもらえます。
　逆にアウトラインが綺麗に整っていないと、そのページに書いてある内容を正確に読み取ってもらえないかも知れません。

　当然、クローラーがその内容を正確に読み取れないようなwebページは検索で上位表示はされないでしょう。

HTML5でのアウトラインの作り方

hタグで階層を作る

　アウトラインをどうやって作るのかというと、基本的にはhタグの階層で作ります。

<h1>1</h1>
   <h2>1-1</h2>
      <h3>1-1-1</h3>
      <h3>1-1-2</h3>
   <h2>1-2</h2>
   <h2>1-3</h2>

　このように、hタグの数字がその階層の深さを表します。
※字下げしているのは、分りやすくする為にしているだけです。

セクショニング・コンテンツ

　hタグだけなら単純で良かったのですが、HTML5からよりアウトラインを明確にする為に、article、section、nav、asideというタグ（セクショニング・コンテンツ）が採用されました。

　articleとnavとasideタグに関しては、単純にその部分を囲うだけなので問題ないのですが、sectionタグはちょっとややこしいです。

sectionタグで階層を作る

　sectionタグで階層を作る意義を理解する為に、以下をご覧下さい。
　以下はhタグだけでアウトラインを作っています。

<h1>アルファベットついて</h1>
アルファベットには大文字と小文字があります。

<h2>大文字について</h2>
大文字はA,B,Cとかです。

<h2>小文字について</h2>
小文字はa,b,cとかです。

このようにアルファベットには大文字と小文字があります。

　一番下の「このようにアルファベットには大文字と小文字があります。」という一文は、人間が読めば意味的には<h1>アルファベットついて</h1>のセクションのまとめの一文だということが分かると思います。

　しかし、単純にhタグの入れ子構造だけで判断すると、その一文は<h2>小文字について</h2>のセクションの文章と見なされてしまいますよね。

　こういう誤解をクローラに与えてしまわないように使われるのがsectionタグです。それぞれのhタグに対応する範囲をsectionタグで囲います。結果的にsectionタグは以下の様な入れ子構造になります。

<section>
<h1>アルファベットついて</h1>
アルファベットには大文字と小文字があります。

   <section>
   <h2>大文字について</h2>
   
大文字はA,B,Cとかです。
   </section>

   <section>
   <h2>小文字について</h2>
   
小文字はa,b,cとかです。
   </section>

このようにアルファベットには大文字と小文字があります。
</section>

※字下げしているのは、分りやすくする為にしているだけです。
　これなら、最後の一文は<h2>小文字について</h2>ではなく<h1>アルファベットついて</h1>のセクションに含まれることを明確にクローラに伝えることが出来ます。

　ですが、sectionタグを入れ子にしてその階層を表現する方法と、hタグの数字を使ってその階層を表現する方法は、機能的にバッティングしてしまうことになり、そのルールがちょっとややこしいことになっています。

　その辺のsectionタグとhタグの関係については、非常に分かりやすく解説してくれているサイトがあるので、詳細はそちらに丸投げさせてください。。

HTML5 のセクショニングとアウトラインアルゴリズムの再確認 | Foreignkey, Inc.

webページのアウトラインを確認する

HTML5 Outliner

　HTML5 Outlinerにアクセスして、

　「URL」の欄に、調べたいwebページのURLを入れてその下の「Outline this!」っていうのをクリックするだけで、そのページのアウトライン階層を分りやすく見ることができます。

Chromeプラグイン「HTML5 Outliner」

Chrome ウェブストア – HTML5 Outliner
　こちらはプラグインなのでインストールする手間はかかりますが、インストールしてしまうと、
　こんな風にアドレスバーの右端にアイコンが表示されます。なんとそれをクリックするだけで、その時開いているwebページのアウトラインを確認することができます。超便利です。

理に適ったアウトラインを作ろう

　手前味噌ではありますが、Principleは理に適った階層構造のアウトラインになるように、設計されています。

　あなたのブログのアウトラインは理に適った階層になっていますか？上記のサイトやプラグインを使って、ぜひ確かめてみてください。

　そして、記事を書く際は、アウトライン階層を意識してhタグを使うようにすれば、SEOに強いページになるはずです。