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 文章のまとまりを囲う

 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タグの関係については、非常に分かりやすく解説してくれているサイトがあるので、詳細はそちらに丸投げさせてください。。

http://foreignkey.jp/archives/1503

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

 

 ちなみに説明しておいてアレですが、このサイトはsectionタグを使っていません。
 アウトラインを整えるには、記事部分だけでなくサイドバーなども含めたページ全体のアウトラインを整える必要があります。
 ところがWordPressの配布テーマというのは、記事部分だけを書き手に委ねることになります。書き手に記事内でsectionタグを使うことを強要するのもどうかと思うし、記事部分と他の部分とでhタグの使い方がバラバラになってしまっても良くないと思うので、WordPressの配布テーマはsectionタグの使い方が悩ましいところなんです。。
 今のところ、sectionタグの有無はSEOには一切影響ないそうなので、hタグだけでアウトラインを作っても何も問題ありません。とにかく読み取りやすいアウトラインを作ることが何より大事です。

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

HTML5 Outliner

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

Chromeプラグイン「HTML5 Outliner」

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

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

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

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

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

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

コメント

コメントを残す



CAPTCHA


*

関連記事

noimage
iPhone・iPad用、超個性的な本革ケース見つけた!
全くの初心者がWordPressでブログを始める方法
サムネイル付きのリンクを簡単に貼る技(別ウィンドウで開くバージョン)
noimage
noimage
エックスサーバーのお試し期間中にサクッとWordPressブログを作る方法
noimage
noimage
wp_is_mobile()でAdSenseの表示を制御する
ブログでAndroidアプリを紹介する際、超便利なブックマークレット
テーマを自作したい人必見!WordPressの基本的な仕組み
【WordPress】訪問別PVが増える魔法のコードと、タグの使い方
ブログ用Google+ページの作り方と、そのフォローボタンをフォロワー数と共に表示する方法
あなたは解ける?!史上最高のひらめきクイズ!

Menu

HOME

TOP