こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
今回はHTML/CSSでサイトを制作するときなどに利用する「パンくずリスト」について作り方や基礎知識についてのお話をしていきます。
サンプルコードも掲載し、コピペでも簡単に実装できるようにしていますので、よかったら参考にしてみてください。
【HTML/CSS】パンくずリストとは？
まずはそもそもパンくずリストとは？ということを見ていきます。
簡単に言うと”パンくずリスト”とはユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。英語では「breadcrumbs」と言われています。
例えば、今見ていただいているこのページですが、
このような表示(ホーム > HTML/CSS)がタイトルの上にあると思います。
つまり、自分が今開いて見ているページはサイト全体で見たときにどの位置にあるページなのかを示してくれています。
これが「パンくずリスト」です。
パンくずリストを設置するメリット
次に、この”パンくずリスト”を設置するメリットを見てみましょう。
パンくずリストの設置には２つの意味があります。
- ユーザーにとっての意味
- SEO上の意味
順番に見ていきましょう。
ユーザーが迷いにくくなる
まずは1つ目、ユーザーにとっての意味です。
これは、カテゴリーの構造が一目見てわかるので「今どこにいるのか」がすぐに分かります。
そして前の階層のテキストはリンクになっているため、サイトを巡回しやすくなるのです。
さらに、パンくずリストを設置すると上のようにGoogleの検索結果にも反映されるようになりますよ♪
アクセス前から検索ユーザーに対して、カテゴリー構造を伝えることができるんですね！
SEO効果が期待できる
サイトを分かりやすいカテゴリー構造にした上で、正しくぱんくずリストを作成すれば、SEOでの効果も期待できます。
なぜこれを作るだけでSEOに効果があるんですか？
ぱんくずリストのリンクテキスト（アンカーテキスト）にキーワードを入れることができるからなんです！
【HTMLコード】パンくずリストの作り方
では早速HTMLでのパンくずリストの作り方を見ていきましょう！
今回は最も一般的なMicrodata（マイクロデータ）という方式での書き方を説明します。
コピペでも簡単に実装できるので、動きを見ながら実装したい方は使ってみてください。
<ul class="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="ホームのＵＲＬ" itemprop="url">
<span itemprop="title">ホーム</span>
</a>
</li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="カテゴリーＵＲＬ" itemprop="url">
<span itemprop="title">カテゴリー名</span>
</a>
</li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="子カテゴリーのＵＲＬ" 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="カテゴリーＵＲＬ" itemprop="url">
<span itemprop="title">カテゴリー名</span>
</a>
</li>itemscope=”itemscope” itemtype=”~/Breadcrumb”
〇 liタグの中がパンくずリストであることを示しています。
itemprop=”url”
〇 中にパンくずのURLが含まれていることを示します。。
itemprop=”title”
〇 中がパンくずのタイトル（ホームやカテゴリー名）であることを示します。
まとめ
今回は、HTMLでパンくずリストを作成する意味や作り方を見ていきました。
パンくずリストを設置すると、Googleに「質の良いサイト」である。と判定する際の判断基準のひとつになります。
意外と見落としがちですが、簡単に実装できてサイト検索順位に関わることなので試してみましょう。
[HTML/CSS]これだけ覚えて！超簡単レスポンシブ対応
プログラミング必須ツール『テキストエディタ』とは？現役エンジニアのおすすめも紹介！