[HTML/CSS] パンくずリストとは?

HTML/CSS

パンくずリストとは?

まずはそもそもパンくずリストとは?ということを見ていきます。

”パンくずリスト”とはユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。英語では「breadcrumbs」と言われています。

例えば、今見ていただいているこのページですが、

このような表示(ホーム > HTML/CSS)がタイトルの上にあると思います。

これがパンくずリストなんです。

パンくずリストを設置するメリット

次に、この”パンくずリスト”を設置するメリットを見てみましょう。
パンくずリストの設置には2つの意味があります。

  1. ユーザーにとっての意味
  2. SEO上の意味

順番に見ていきましょう。

ユーザーが迷いにくくなる

まずは1つ目、ユーザーにとっての意味です。

これは、カテゴリーの構造が一目見てわかるので「今どこにいるのか」がすぐに分かります。

そして前の階層のテキストはリンクになっているため、サイトを巡回しやすくなるのです。

IT博士
IT博士

さらに、パンくずリストを設置すると上のようにGoogleの検索結果にも反映されるようになりますよ♪

アクセス前から検索ユーザーに対して、カテゴリー構造を伝えることができるんですね!

SEO効果が期待できる

サイトを分かりやすいカテゴリー構造にした上で、正しくぱんくずリストを作成すれば、SEOでの効果も期待できます。

 

なぜこれを作るだけでSEOに効果があるんですか?

 

IT博士
IT博士

ぱんくずリストのリンクテキスト(アンカーテキスト)にキーワードを入れることができるからなんです!

[HTMLコード] パンくずリストの作り方

では早速HTMLでのパンくずリストの作り方を見ていきましょう!

今回は最も一般的なMicrodata(マイクロデータ)という方式での書き方を説明します。

<ul class="breadcrumb">
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="ホームのURL" itemprop="url">
   <span itemprop="title">ホーム</span>
  </a>
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="カテゴリーURL" itemprop="url">
   <span itemprop="title">カテゴリー名</span>
  </a>
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="子カテゴリーのURL" itemprop="url">
   <span itemprop="title">子カテゴリー名</span>
  </a>
  </li>
</ul>

簡単に解説すると、<li>〜</li>の1つのカタマリが1つのパンくず(階層)を表しています。


そのため、カテゴリーの階層数によって<li>〜</li>の数は変わります。少し長くて分かりづらいかと思うので、1つのパンくずを詳しく見てみましょう。

<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="カテゴリーURL" itemprop="url">
   <span itemprop="title">カテゴリー名</span>
  </a>
</li>

itemscope=”itemscope” itemtype=”~/Breadcrumb” 
〇 liタグの中がパンくずリストであることを示しています。

itemprop=”url”
〇 中にパンくずのURLが含まれていることを示します。。

itemprop=”title”
〇 中がパンくずのタイトル(ホームやカテゴリー名)であることを示します。

まとめ

今回は、HTMLでパンくずリストを作成する意味や作り方を見ていきました。

パンくずリストは意外と見落としがちですが、簡単に実装できるので試してみましょう。

[HTML/CSS]これだけ覚えて!超簡単レスポンシブ対応
レスポンシブ対応とは近年、スマートフォンの普及によってWebページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきています。そんな時に今までパソコンでの表示を前提としたWebページをその

 

なにか質問があればお問い合わせフォームでお気軽にお問合せください。
可能な限りすぐにお返事します。
一流プログラマを目指して頑張りましょう!

コメント