Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [13] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-05-06 10:42:35 +09:00]] 版) <https://html.spec.whatwg.org/#rel-up>
]REFS]

* マーク付け

[14] [[HTML]] では専用の[[要素]]は用意されていませんが、
[[段落]]中の一連の[[リンク]]として表現できます。 [SRC[>>13]]

[15] [[パンくず]]部分を含める[[要素]]としては、 [CODE(HTMLe)@en[[[nav]]]]
を使えます [SRC[>>13]]。

[25] 
[[マイクロデータ]]と [[data-vocabulary.org]] や [[schema.org]]
を使うと、[[パンくず]]であると明示した形で[[マーク付け]]できます。
ただし (特に [[schema.org]] は) かなり複雑な構造を記述する必要があります。

[26] [[Google検索]]は[[パンくず]]の記述があると、検索結果の [[URL]]
の表示位置に代わりに[[パンくず]]を表示します。[[マイクロデータ]]による記述に対応していますが、
それ以外の記述方法でも[[パンくず]]であると [[Google]] が判断すると表示されることがあるようです。

;; [31] 当該ページへのリンクまで[[パンくず]]に含まれていても、親階層までのみが表示されます。
また文字列が表示されるだけで、リンクにはなりません。

;; [32] [[起源]]の[[トップページ]]へのリンクが[[パンくず]]にあっても、
検索結果には使われず、[[起源]]のまま表示されます。

[30] 
[[Bing]] も [[data-vocabulary.org]] の記述に対応しています [SRC[>>28]]。

[38] [CITE@en[Breadcrumb (Design Guide) | Open UI]], [TIME[2024-09-08T07:59:10.000Z]] <https://open-ui.org/components/breadcrumb/>

* 歴史

[1] パンくずとそうでないものが混じった例
[PRE(depracated example)[
Home > 超初心者のためのスタイルシート講座 > プロパティと値 > Next
]PRE]

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

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

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

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

[2]

[PRE(HTML example code)[
  <div class="breadcrumb">
  <a href="../">Semantic Web</a> →
  <h1>GRDDL Working Group</h1>
  </div>
]PRE]

;; [CITE[W3C GRDDL Working Group]] <http://www.w3.org/2001/sw/grddl-wg/>

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

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

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

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

[6]
[CITE@ja[blog in a fog &#187; breadcrumbs or topicpath]] ([[Yoji Sanada]] 著, [CODE[2007-06-15 22:08:39 +09:00]] 版) <http://blog.inafog.jp/archives/219>
([[名無しさん]] [WEAK[2007-06-15 13:09:56 +00:00]])

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

[8]
[CITE@ja[blog in a fog &#187; 続・breadcrumbs or topicpath]] ([[Yoji Sanada]] 著, [CODE[2007-06-24 17:08:35 +09:00]] 版) <http://blog.inafog.jp/archives/221>
([[名無しさん]] [WEAK[2007-06-24 09:12:42 +00:00]])

[9]
[CITE@ja[blog in a fog &#187; 続・breadcrumbs or topicpath]] ([[Yoji Sanada]] 著, [CODE[2007-06-24 17:08:35 +09:00]] 版) <http://blog.inafog.jp/archives/221>
([[名無しさん]] [WEAK[2007-06-24 09:14:07 +00:00]])

[10]
[CITE@ja[blog in a fog &#187; 続・breadcrumbs or topicpath]] ([[Yoji Sanada]] 著, [CODE[2007-06-24 17:08:35 +09:00]] 版) <http://blog.inafog.jp/archives/221>
([[名無しさん]] [WEAK[2007-06-24 09:14:56 +00:00]])

[11]
[CITE@ja[blog in a fog &#187; 続・breadcrumbs or topicpath]] ([[Yoji Sanada]] 著, [TIME[2007-06-24 17:08:35 +09:00]] 版) <http://blog.inafog.jp/archives/221>
([[名無しさん]] [WEAK[2007-06-24 09:38:14 +00:00]])

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

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

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

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

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

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

> 
> <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>&nbsp;&gt;&nbsp;</span><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/anime/" itemprop="url"><span itemprop="title"><strong>アニメ</strong></span></a></span><span>&nbsp;&gt;&nbsp;</span><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/anime/interview/" itemprop="url"><span itemprop="title"><strong>インタビュー</strong></span></a></span><span>&nbsp;&gt;&nbsp;</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>

]FIG]

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

[FIG(quote)[
[FIGCAPTION[
[22] [CITE@ja[気象庁 | 天気予報 : 京都府]]
([[気象庁 Japan Meteorological Agency]]著, [TIME[2017-06-23 10:38:13 +09:00]])
<http://www.jma.go.jp/jp/yoho/333.html>
]FIGCAPTION]

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

]FIG]

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

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

]FIG]

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

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

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

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

]FIG]

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

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

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

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

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)