ホーム > SEO > Google スターターガイド > ナビゲーションをわかりやすくしよう
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

ナビゲーションをわかりやすくしよう (パンくずリスト グローバルナビ)


SEO対策 パンくずリストをつける / パンくずリストとは



パンくずリスト( breadcrumb navigation / トピックパス topic path )とは、グリム童話「ヘンゼルとグレーテル」に出てくるヘンゼルが、森で道に迷わず自分の家( home )まで帰れるように、自分が通った道に、パンくずを置いて道しるべにしようとしたエピソードに由来し、ホームページ(home page  / top page )からのページの足取りを記したものです

このページ上下端部の「 ホーム > SEO対策 」がそれです

パンくずリストそのものは、人に対してつけるものですが、以下の2点に於いて、SEO対策としても有効です

(1).パンくずリスト自体が、アンカーテキストの設定に使え、数も多く設けられるため、評価を高めることができる
(2).構造化、階層化されたサイトは、評価が高くなる




SEO対策 パンくずリストの作り方



パンくずリストは、トップページから当該ページまでの階層のリンクを並べたものですから、書き方に優劣はありません


リンクを列挙する



下記の様に書いても構いません

記述例 <a href="../index.html">ホーム</a> > <a href="SEO_000000.html">SEO対策</a> > <a href="SEO_105000.html">ナビゲーションをわかりやすくしよう </a>
表示例 ホーム > SEO対策 SEO(検索エンジン最適化)とは > ナビゲーションをわかりやすくしよう




リスト構造で記述する



パンくずリストを、文字通り、リスト要素として捉えた場合、リスト用タグ ( <ol>タグ <ul>タグ ) を用いた方が、HTML構文上、理にかなっているとも言えます

<ul> タグは、順序性のない項目リスト、順不同リストに用いるものです
パンくずリストは階層構造を表すもの、つまり、順序性のあるものなので、順序性を内包する <ol> タグの方が適切と思います

<ol> タグ、<ul> タグともに、行頭に順序番号、もしくは、行頭マークエリアが付いてしまいます
順序番号、もしくは、行頭マークそのものは設定で非表示にできるのですが、その分のエリアは自動的に確保されてしまう為、段落ちしてしまいます

下記例では、見栄えの整形の為、スタイルシートで、擬似要素( :after )と擬似クラス( :last-child:after )を、設定を局所化するために、「id」宣言( #bread )を使用しています


<ol>タグ使用例
記述例 <head>部
#bread ol li{
  display: inline;
  list-style-type: none;
}
#bread ol li:after{
  content:" > ";
}
#bread ol li:last-child:after{
  content: none;
}
<body>部
<td id="bread">
  <ol>
    <li><a href="../index.html">ネットで稼ぐ方法 教えます(TOP)</a>
    <li><a href="SEO_000000.html">SEO対策</a>
    <li><a href="SEO_105000.html">ナビゲーションをわかりやすくしよう </a>
  </ol>
</td>
表示例 <body>部
  1. ホーム
  2. SEO対策
  3. ナビゲーションをわかりやすくしよう

<ul>タグ使用例
記述例 <head>部
#bread ul li{
  display: inline;
  list-style-type: none;
}
#bread ul li:after{
  content:" > ";
}
#bread ul li:last-child:after{
  content: none;
}
<body>部
<td id="bread">
  <ul>
    <li><a href="../index.html">ネットで稼ぐ方法 教えます(TOP)</a>
    <li><a href="SEO_000000.html">SEO対策</a>
    <li><a href="SEO_105000.html">ナビゲーションをわかりやすくしよう </a>
  </ul>
</td>
表示例 <body>部


擬似要素と擬似クラス

擬似要素( Pseudo-elements )とは、要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加する為のもので、ここでは、「 :after 」が相当します
擬似クラス( Pseudo-classes )とは、要素が特定の状態にある場合にスタイルを指定する為のもので、ここでは、「 :last-child 」が相当します
ともに、セレクタとなる要素名のあとにコロン(:)をつけて、擬似要素、擬似クラス名を記述します




パンくずリストのSEO効果



HTML5から採用される、Microdata では、これは「パンくずリスト」ですと指定できるようになりますが、HTML5の普及していない現状では、検索エンジンに対して、パンくずリストとして明示的に知らせる術はありません

先に示したように、「リンクを列挙する」書き方も、「リンク構造で記述する」書き方もSEO的には、大きな違いではありません

パンくずリストがSEOに及ぼす最大のメリットは、アンカーテキストを集中できるところにあります


パソコン

各モデル一覧
パンくずリスト

各モデル紹介


パソコン>モデルA

モデルA
パソコン>モデルB

モデルB
パソコン>モデルC

モデルC


複数の下層ページによって、上位ページに対して、「パソコン」というキーワードで、アンカーテキストを集めることができます

アンカーテキストがSEOに効果があることは、Google 「検索エンジン最適化 ( SEO ) スターターガイド」 P16~P17 「適切なアンカーテキストを書こう」にて、説明されています

(参考) SEO対策 適切なアンカーテキストを書こう(ターゲットキーワードを含める)





下記は、Google 「検索エンジン最適化 ( SEO ) スターターガイド」 P10~P13 「ナビゲーションをわかりやすくしよう」を表示しています


注. 下記は、原文PDFファイルを、iframe 表示していますので、フォーカスがPDF上に移動すると、マウススクロールできなくなります
ページの余白部分(左右の端の方)にマウスカーソルを移動すると、スクロールできるようになります










(引用) Google  「 検索エンジン最適化 ( SEO ) スターターガイド


目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > SEO > Google スターターガイド > ナビゲーションをわかりやすくしよう
   

© 2014 abhp.net All Rights Reserved.
Google 「 検索エンジン最適化 ( SEO ) スターターガイド 」 に学ぶ SEO対策 目次
 1. Google 「 検索エンジン最適化 ( SEO ) スターターガイド 」 の紹介
 2. 適切なページタイトルを付けよう (ベストな文字数)
 3. description メタタグを設定しよう
 4. URLの構造を改善しよう 前のページ
 5. ナビゲーションをわかりやすくしよう (パンくず グローバルナビ) 現在のページ
 6. 質の高いコンテンツを提供しよう (ユニーク情報を充実させる) 次のページ
 7. 適切なアンカーテキストを書こう (ターゲットキーワードを含める)
 8. 画像の利用を最適化しよう
 9. 見出しタグ(h1、h2、h3)を適切に使おう
10. robots.txt を効果的に設定しよう
11. リンクに rel="nofollow" 属性を活用しよう
12. モバイルサイトをGoogleに知らせよう
13. 携帯ユーザーを適切に誘導しよう
14. 正しい方法でサイトを宣伝しよう  (SNSを活用)
15. 便利なツールを活用しよう

コンテンツ一覧

ページTOP
ページTOP
ページTOP
ページTOP