階層がある程度深いWEBサイトの場合、ユーザービリティ向上のため「パンくずリスト」を設置することが多いと思いますが、ユーザビリティ向上のためだけになんとなく「パンくずリスト」を設置していませんか?
否、2015年6月からGoogleがschema.orgによるパンくずリストの構造化のサポートを始めましたことで「パンくずリスト」は単なるユーザビリティ向上のためだけではなくSEOとして重要な対策の1つとなっています。
schema.orgのパンくずリストをようやくGoogleがサポート開始
https://www.suzukikenichi.com/blog/google-finally-supports-breadcrumbs-with-schema-org/
そもそもパンくずリストとは?
WEBサイト上で自分がどの位置にいるか視覚的にわかりやすくするためのリストのことです。パンくずリストがあるとサイトの構造がどうなっているか、自分がサイト内のどの位置にいるかがすぐに分かりユーザビリティ向上の手助けをしてくれます。
検索エンジンにパンくずリストとして認識してもらうためには?
大前提としてパンくずリストを表示するマークアップに特に決められたルールはありません。
<div>や<span>ないし<ul><li>などで表示するのが一般的ですね。
ただそれだけでは検索エンジンにこれが「パンくずリスト」であるということを認識して
もらえません。googleやyahooの検索エンジンに認識してもらうためにはmicrodataを使ってパンくずリストをマークアップしましょう。
microdataを使用したマークアップ例
1 2 3 4 5 |
<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <li><a href="/" itemprop="url"><span itemprop="title">メニュー1</span></a></li> <li><a href="/fruit/" itemprop="url"><span itemprop="title">メニュー2</span></a></li> <li>メニュー3</li> </ul> |
- ※パンくず自体を囲むタグにmicrodataを宣言します。
1<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> - ※パンくずのリンク部分にこれはURLだよという認識をさせます。
1<a href="/" itemprop="url">メニュー1</a> - ※パンくずの表示名部分にもこれが表示名だよという認識をさせます。
1<span itemprop="title">メニュー1</span>
基本的にはこの3点のみの簡単な設定ですが、これを設定しているかどうかでSEO対策としてはもちろんユーザビリティの観点としても大きな違いなのでちゃんと設定しておきましょう。
設定できているか確認する方法
microdataを使ったパンくずリストがちゃんと検索エンジンに認識されているか「構造化データテストツール」を使って確認することができます。
URLを入力するだけですぐ確認できるので念のため確認しておきましょう。
- 1727 views
- dublich