|
|
© 2014 abhp.net All Rights Reserved. | |
ナビゲーションをわかりやすくしよう （パンくずリスト グローバルナビ） |
SEO対策 パンくずリストをつける ／ パンくずリストとはパンくずリスト（ breadcrumb navigation ／ トピックパス topic path ）とは、グリム童話「ヘンゼルとグレーテル」に出てくるヘンゼルが、森で道に迷わず自分の家（ home ）まで帰れるように、自分が通った道に、パンくずを置いて道しるべにしようとしたエピソードに由来し、ホームページ（home page ／ top page ）からのページの足取りを記したものです このページ上下端部の「 ホーム ＞ SEO対策 」がそれです パンくずリストそのものは、人に対してつけるものですが、以下の２点に於いて、ＳＥＯ対策としても有効です (1)．パンくずリスト自体が、アンカーテキストの設定に使え、数も多く設けられるため、評価を高めることができる (2)．構造化、階層化されたサイトは、評価が高くなる SEO対策 パンくずリストの作り方パンくずリストは、トップページから当該ページまでの階層のリンクを並べたものですから、書き方に優劣はありません リンクを列挙する下記の様に書いても構いません
リスト構造で記述するパンくずリストを、文字通り、リスト要素として捉えた場合、リスト用タグ （ <ol>タグ <ul>タグ ） を用いた方が、HTML構文上、理にかなっているとも言えます <ul> タグは、順序性のない項目リスト、順不同リストに用いるものです パンくずリストは階層構造を表すもの、つまり、順序性のあるものなので、順序性を内包する <ol> タグの方が適切と思います <ol> タグ、<ul> タグともに、行頭に順序番号、もしくは、行頭マークエリアが付いてしまいます 順序番号、もしくは、行頭マークそのものは設定で非表示にできるのですが、その分のエリアは自動的に確保されてしまう為、段落ちしてしまいます 下記例では、見栄えの整形の為、スタイルシートで、擬似要素（ :after ）と擬似クラス（ :last-child:after ）を、設定を局所化するために、「id」宣言（ #bread ）を使用しています
パンくずリストのSEO効果HTML5から採用される、Microdata では、これは「パンくずリスト」ですと指定できるようになりますが、HTML5の普及していない現状では、検索エンジンに対して、パンくずリストとして明示的に知らせる術はありません 先に示したように、「リンクを列挙する」書き方も、「リンク構造で記述する」書き方もSEO的には、大きな違いではありません パンくずリストがSEOに及ぼす最大のメリットは、アンカーテキストを集中できるところにあります
複数の下層ページによって、上位ページに対して、「パソコン」というキーワードで、アンカーテキストを集めることができます アンカーテキストがSEOに効果があることは、Google 「検索エンジン最適化 ( SEO ) スターターガイド」 P16～P17 「適切なアンカーテキストを書こう」にて、説明されています （参考） SEO対策 適切なアンカーテキストを書こう（ターゲットキーワードを含める） 下記は、Google 「検索エンジン最適化 ( SEO ) スターターガイド」 P10～P13 「ナビゲーションをわかりやすくしよう」を表示しています
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
（引用） Google 「 検索エンジン最適化 ( SEO ) スターターガイド 」 |