パンくずリスト
サンプル
デザイン上の考慮事項
-
長いテキストが入った場合の表示を確認してください。
-
このサンプルでは1行までで省略する処理としていますが、あくまで一例であり、これに限る必要はありません。
実装上の考慮事項
-
パンくずは小さく表示されがちなので、a要素の範囲を少し大きくしてあげると、クリック・タップしやすい。
構造化データ
-
構造化データ入れた方が良いが、管理コストと相談。
CMSなど機械的に出力できるなら入れてもいいが、手作業更新の場合、変え忘れのデメリットも大きい。
JSON-LDの例
「ホーム > カテゴリ名 > 記事タイトル」のパンくずの場合
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "ホームのURL"
},{
"@type": "ListItem",
"position": 2,
"name": "カテゴリ名",
"item": "カテゴリ名のURL"
},{
"@type": "ListItem",
"position": 3,
"name": "記事タイトル"
}]
}
</script>
microdataの例
「ホーム > カテゴリ名 > 記事タイトル」のパンくずの場合
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="ホームURL">
<span itemprop="name">ホーム</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="カテゴリ名URL">
<span itemprop="name">カテゴリ名</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item">
<span itemprop="name">記事タイトル</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>
-
Itemscope :
itemtypeの範囲を定義（タグがあるアイテムに関するものだと伝える）
-
Itemtype :
データ構造でitempropの語彙を定義するために使用される語彙のURLを指定（タグの範囲のタイプが何かを伝える）
-
Itemprop :
グローバル属性で、アイテムにプロパティを追加するために使用（タグの範囲にある要素がアイテムの何を示すかを伝える）
（参考文献 ）
アクセシビリティ上の考慮事項
