[27] パンくずリストは、 Webサイト内のトップページから当該 Webページまでの階層構造を順にリンクとして並べたものです。 Webサイトのナビゲーション手法として広く用いられています。
[14] HTML では専用の要素は用意されていませんが、 段落中の一連のリンクとして表現できます。 >>13
[15] パンくず部分を含める要素としては、 nav
を使えます >>13。
[25] マイクロデータと data-vocabulary.org や schema.org を使うと、パンくずであると明示した形でマーク付けできます。 ただし (特に schema.org は) かなり複雑な構造を記述する必要があります。
[26] Google検索はパンくずの記述があると、検索結果の URL の表示位置に代わりにパンくずを表示します。マイクロデータによる記述に対応していますが、 それ以外の記述方法でもパンくずであると Google が判断すると表示されることがあるようです。
[30] Bing も data-vocabulary.org の記述に対応しています >>28。
[38] Breadcrumb (Design Guide) | Open UI, https://open-ui.org/components/breadcrumb/
[1] パンくずとそうでないものが混じった例
Home > 超初心者のためのスタイルシート講座 > プロパティと値 > Next
(プロパティと値
という文書において。)
出典: スタイルシート講座 - 超初心者のためのホームページ作成講座 http://park16.wakwak.com/~html-css/css/css_10.html (2004年12月付け、2005年4月現在)
この例では、所謂パンくず
(上位の階層から下位の階層に向かっての案内)
と同じ階層へのリンク (Next
) が区別できないように並んでいます。
このような配置は読者の混乱の元であり、避けるべきです。
(ちなみに、引用元のサイトの記事は技術的におかしな内容ばかりです。)
<div class="breadcrumb"> <a href="../">Semantic Web</a> → <h1>GRDDL Working Group</h1> </div>
(名無しさん 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 著, 版) http://blog.inafog.jp/archives/221 (名無しさん 2007-06-24 09:38:14 +00:00)
[12] パンくずリスト - ウェブマスター ツール ヘルプ ( ( 版)) http://www.google.com/support/webmasters/bin/answer.py?hl=ja&answer=185417
[16] Breadcrumbs | Structured Data | Google Developers ( 版) https://developers.google.com/structured-data/breadcrumbs
[17] Breadcrumb with Schema.org - Stack Overflow ( ( 版)) 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 ( ( 版)) http://www.w3.org/2011/webschema/track/issues/10
[19] Markup: Breadcrumbs - Bing Webmaster Tools ( ( 版)) http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f
<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 ( ()) https://developers.google.com/search/docs/data-types/breadcrumbs
<div id="nesting">
<a href="/">ホーム</a> > <a href="../../jma/menu/menuflash.html">防災情報</a> > 天気予報</div>
</div>
<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 を書いてみてもパンくずにはなりません。 細かな条件があるのか、ドメインごとの特殊な処理があるのか。
[35] Google検索を細かく見ていくと、特別なマーク付けがないけどパンくず表示される Webサイトがかなり多いです。同じ Webサイトの各ページの構造が似ているものが多いかどうか、みたいな判断基準があるのでしょうか。
<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 など指定を加えるとパンくずが表示されます。
[37]
>>34 と思っていたのですが、しばらく待っていたらパンくずが表示されるようになりました
(display: inline の方はすぐに表示されていた)。何か条件があるのでしょうか。
[28] Markup: Breadcrumbs - Bing Webmaster Tools ( ( 版)) http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f
[29] Breadcrumbs - Structured Data — Google Developers ( 版) https://developers.google.com/structured-data/breadcrumbs