パンくずリスト生成ツール
パンくずリストのHTMLとJSON-LD構造化データを同時に生成します。SEOのリッチリザルトにも対応しています。
1
2
3
プレビュー
トップ›カテゴリ›現在のページ
HTML（Microdata付き）
<nav aria-label="パンくずリスト">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com">
<span itemprop="name">トップ</span>
</a>
<meta itemprop="position" content="1" />
<span aria-hidden="true"> › </span>
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/category">
<span itemprop="name">カテゴリ</span>
</a>
<meta itemprop="position" content="2" />
<span aria-hidden="true"> › </span>
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">現在のページ</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "トップ",
"item": "https://example.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "カテゴリ",
"item": "https://example.com/category"
},
{
"@type": "ListItem",
"position": 3,
"name": "現在のページ",
"item": "https://example.com/category/page"
}
]
}
</script>使い方
1. 各パンくず項目のページ名とURLを入力します。
2. 矢印ボタンで順序を変更、✕ボタンで削除できます。
3. 区切り文字を選択し、プレビューで見た目を確認します。
4. HTMLはページ本文内に、JSON-LDは<head>内に貼り付けてください。
おすすめサービス
Udemy - プログラミング講座
学習Web開発・アプリ開発を学べるオンライン講座。セール時は1,200円から。
ConoHa WING - 高性能レンタルサーバー
サーバー国内最速の高性能レンタルサーバー。初期費用無料、WordPress簡単セットアップ対応。
エックスサーバー - 国内シェアNo.1
サーバー国内シェアNo.1のレンタルサーバー。高速・安定・大容量でWordPressにも最適。
※ PR・広告を含みます