パンくずスキーマ＆HTMLジェネレーター
ページ名とURLの一覧から、BreadcrumbListの構造化データと、アクセシブルなパンくずHTML（nav、ol、aria-current）を作成します。コピーしてすぐ使えるJSON-LDです。
パンくずリストの項目（トップページから現在のページまで）
1.
2.
3.
JSON-LD (BreadcrumbList)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script>HTML
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>JSON-LD は schema.org の BreadcrumbList に準拠します。最後の項目は現在のページなので URL を省略できます。HTML はアクセシビリティのため <nav> 内の順序付きリストと aria-current="page" を使います。区切り記号は CSS で装飾してください。
パンくずリストジェネレーターとは？
このジェネレーターは、パンくずの項目（ホームページから現在のページまでの、名前 + URL）の一覧を、検索エンジン向けのschema.org BreadcrumbList JSON-LDと、訪問者向けのアクセシブルなHTMLマークアップの2つに変換します。
パンくずリストジェネレーターの使い方
- 項目を編集します。階層ごとに1行で、名前と絶対URLを入力します。
- 行を追加または削除します。最後の行は現在のページで、URLがなくても構いません。
- ナビゲーション要素のaria-labelを、サイトの言語で設定します。
- JSON-LDブロックとHTMLをページにコピーします。
例
入力
Home → Blog → Cold Brew Guide
出力
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> パンくずリストジェネレーターを使うべき場面
パンくずリストを表示するページ、特にショップやドキュメントのような深いサイト構造で使います。構造化データは、ページ上に表示されるパンくずと一致させる必要があります。区切り文字は、マークアップに文字を追加するのではなく、CSSでスタイルを付けてください。
パンくずリストジェネレーターの仕組み
空でない各行が、1始まりのposition、name、item URL（空の場合は省略）を持つListItemになります。HTMLは、順序付きリストを含む <nav aria-label> で、手前の項目はリンクに、最後の項目には aria-current="page" が付き、WAI-ARIAのパンくずパターンに従います。名前とURLはHTMLエスケープされ、構造化データには絶対URLを使うべきなので、相対URLは警告されます。
一般的な使用例
- カテゴリページや商品ページに、パンくずのリッチリザルトを追加する。
- ドキュメントサイト用に、アクセシブルなパンくずHTMLを作る。
- テキストの区切り文字を使っているパンくずを、セマンティックなマークアップに置き換える。
- パンくずプラグインのない静的サイトのマークアップを生成する。
よくある質問
最後の項目にURLは必要ですか。
いいえ。Googleは、現在のページではitemを省略することを認めています。入力した場合は含まれます。
パンくずのマークアップで、検索結果にパンくずが表示されることは保証されますか。
いいえ。検索エンジンがサイト構造を理解する助けになり、パンくず形式のパスの表示対象になりますが、何を表示するかはGoogleが決めます。
1つのページに複数のパンくずリストを置けますか。
はい。ページに複数の経路でアクセスできる場合は、経路ごとにBreadcrumbListを1つ追加します。