パンくずリスト生成ツール

パンくずリストのHTMLとJSON-LD構造化データを同時に生成します。SEOのリッチリザルトにも対応しています。

区切り文字:

プレビュー

トップ›カテゴリ›現在のページ

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>内に貼り付けてください。

開発作業で使うときの確認ポイント

•多くの変換・整形ツールはブラウザ内で処理します。DNS確認やIP確認のように外部通信が必要な機能は、ページ内の説明も確認してください。
•整形・変換・生成結果は、言語仕様や実行環境によって解釈が変わる場合があります。本番投入前にテスト環境やCIで検証してください。
•JSON、正規表現、HTTPヘッダーなどは小さな差分が不具合につながるため、変更前後を保存して比較する運用がおすすめです。

パンくずリスト生成ツール

HTML（Microdata付き）

JSON-LD

使い方

開発作業で使うときの確認ポイント

関連ツール

🗂️ カテゴリから他のツールを探す

画像・メディア

テキスト

セキュリティ

デザイン

日常ツール

関連ガイド記事

Web開発者向け便利ツール活用ガイド