[27]

パンくずリストbreadcrumbは、 Webサイト内のトップページから当該 Webページまでの階層構造を順にリンクとして並べたものです。 Webサイトのナビゲーション手法として広く用いられています。

歴史

[1] パンくずとそうでないものが混じった例

Home > 超初心者のためのスタイルシート講座 > プロパティと値 > Next

(プロパティと値という文書において。)

出典: スタイルシート講座 - 超初心者のためのホームページ作成講座 http://park16.wakwak.com/~html-css/css/css_10.html (2004年12月付け、2005年4月現在)

この例では、所謂パンくず (上位の階層から下位の階層に向かっての案内) と同じ階層へのリンク (Next) が区別できないように並んでいます。このような配置は読者の混乱の元であり、避けるべきです。

(ちなみに、引用元のサイトの記事は技術的におかしな内容ばかりです。)

[2]

  <div class="breadcrumb">
  <a href="../">Semantic Web</a> →
  <h1>GRDDL Working Group</h1>
  </div>

W3C GRDDL Working Group

http://www.w3.org/2001/sw/grddl-wg/

(名無しさん 2006-07-15 12:32:50 +00:00)

[3] パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife (2007-02-06 09:16:20 +09:00 版) http://css-happylife.com/log/css-template/visual/000106.shtml (名無しさん)

[4] 我的春秋: パンくずリストのマークアップ (2007-02-06 09:16:58 +09:00 版) http://my-chunqiu.cocolog-nifty.com/blog/2007/02/post_a86f.html (名無しさん)

[5] シーケンシャルアクセス - Weblog (2007-04-11 21:00:00 +09:00 版) http://ryus.s21.xrea.com/w/item/887 (名無しさん)

[6] blog in a fog » breadcrumbs or topicpath (Yoji Sanada 著, 2007-06-15 22:08:39 +09:00 版) http://blog.inafog.jp/archives/219 (名無しさん 2007-06-15 13:09:56 +00:00)

[7] パンくずリストのマークアップを色々考えてみる|CSS HappyLife (2007-06-16 11:22:02 +09:00 版) http://css-happylife.com/log/html/000154.shtml (名無しさん 2007-06-16 02:25:17 +00:00)

[8] blog in a fog » 続・breadcrumbs or topicpath (Yoji Sanada 著, 2007-06-24 17:08:35 +09:00 版) http://blog.inafog.jp/archives/221 (名無しさん 2007-06-24 09:12:42 +00:00)

[9] blog in a fog » 続・breadcrumbs or topicpath (Yoji Sanada 著, 2007-06-24 17:08:35 +09:00 版) http://blog.inafog.jp/archives/221 (名無しさん 2007-06-24 09:14:07 +00:00)

[10] blog in a fog » 続・breadcrumbs or topicpath (Yoji Sanada 著, 2007-06-24 17:08:35 +09:00 版) http://blog.inafog.jp/archives/221 (名無しさん 2007-06-24 09:14:56 +00:00)

[11] blog in a fog » 続・breadcrumbs or topicpath (Yoji Sanada 著, 2007-06-24 17:08:35 +09:00 版) http://blog.inafog.jp/archives/221 (名無しさん 2007-06-24 09:38:14 +00:00)

[12] パンくずリスト - ウェブマスターツールヘルプ ( (2011-09-30 08:49:57 +09:00 版)) http://www.google.com/support/webmasters/bin/answer.py?hl=ja&answer=185417

[16] Breadcrumbs | Structured Data | Google Developers (2015-06-26 01:53:13 +09:00 版) https://developers.google.com/structured-data/breadcrumbs

[17] Breadcrumb with Schema.org - Stack Overflow ( (2014-01-06 00:00:22 +09:00 版)) http://stackoverflow.com/questions/13088284/breadcrumb-with-schema-org

[18] ISSUE-10: Schema.org breadcrumb examples - properties should be per-link - Web Schemas TF Tracker ( (2014-01-06 00:01:40 +09:00 版)) http://www.w3.org/2011/webschema/track/issues/10

[19] Markup: Breadcrumbs - Bing Webmaster Tools ( (2014-01-06 00:04:30 +09:00 版)) http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f

[20]

今年も来年もアニメはMX! 今年もアニメ攻勢がすごいTOKYO MXの年末年始特番、そして2016年について聞いてみた!!|おたぽる (2015-12-31 14:59:51 +09:00 版) http://otapol.jp/2015/12/post-5150.html

<div id="pankuzu" class="animeBgColor" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://otapol.jp/" itemprop="url" id="panHome"><span itemprop="title">おたぽる</span></a></span><span> > </span><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/anime/" itemprop="url"><span itemprop="title"><strong>アニメ</strong></span></a></span><span> > </span><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/anime/interview/" itemprop="url"><span itemprop="title"><strong>インタビュー</strong></span></a></span><span> > </span><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://otapol.jp/2015/12/post-5150.html" itemprop="url"><span class="floor panTitle" itemprop="title">年末年始も来年もアニメはMX! TOKYO MXに直撃インタビュー!!</span></a></span>
</div>

[21] Breadcrumbs | Search | Google Developers ( (2017-01-27 05:53:50 +09:00)) https://developers.google.com/search/docs/data-types/breadcrumbs

[22]

気象庁 | 天気予報 : 京都府 (気象庁 Japan Meteorological Agency著, 2017-06-23 10:38:13 +09:00) http://www.jma.go.jp/jp/yoho/333.html

<div id="nesting">
<a href="/">ホーム</a> > <a href="../../jma/menu/menuflash.html">防災情報</a> > 天気予報</div>
</div>

[33]

いろいろな相談窓口等 [高齢者のための府政ガイド]/京都府ホームページ (京都府著, 2015-02-10 20:10:17 +09:00) http://www.pref.kyoto.jp/kourei-engo/13900050.html

<div id="tmp_pankuzu">
<p><a href="/index.html">ホーム</a> > <a href="/kenko/index.html">健康・福祉・人権</a> > <a href="/kenko/korei/index.html">福祉・高齢者・障害者</a> > <a href="/kourei-engo/index.html">シルバー・インフォメーション(高齢者のための府政ガイド)</a> > いろいろな相談窓口等 [高齢者のための府政ガイド]</p>
</div>

[23] Google は >>22 や >>33 も検索結果にパンくずを表示するのだけど、同じような HTML を書いてみてもパンくずにはなりません。細かな条件があるのか、ドメインごとの特殊な処理があるのか。 2017-06-23T04:26:02.800Z

[35] Google検索を細かく見ていくと、特別なマーク付けがないけどパンくず表示される Webサイトがかなり多いです。同じ Webサイトの各ページの構造が似ているものが多いかどうか、みたいな判断基準があるのでしょうか。

[34]

じつはいろいろあるんです!|企画展|MIMOCA 丸亀市猪熊弦一郎現代美術館 (2017-06-23 14:19:53 +09:00) http://www.mimoca.org/ja/exhibitions/2017/02/25/1591/

<ol id="breadcrumb">
<li><a href="/ja/">ホーム</a></li>
<li><a href="../../../../">企画展</a></li>
<li>じつはいろいろあるんです!</li>
</ol>

[36] パンくずはページ上方、ヘッダー下あたりにあるのが一般的ですが、 >>34 のように下方、フッター直上にあっても Google はパンくずと認識しています。

[24] schema.org のマイクロデータを使ってパンくずを記述していても、パンくずっぽくない表示方法だと、Google検索ではパンくずが表示されません。例えば ul でスタイルシートの指定が何もない状態だと表示されませんが、 display: inline など指定を加えるとパンくずが表示されます。 2017-06-23T04:27:18.600Z

[37] >>34 と思っていたのですが、しばらく待っていたらパンくずが表示されるようになりました (display: inline の方はすぐに表示されていた)。何か条件があるのでしょうか。

[28] Markup: Breadcrumbs - Bing Webmaster Tools ( (2013-12-03 07:43:01 +09:00 版)) http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f

[29] Breadcrumbs - Structured Data — Google Developers (2015-02-12 09:22:26 +09:00 版) https://developers.google.com/structured-data/breadcrumbs

仕様書

マーク付け

歴史