パンくずリストの構造化データを自動で生成するツールです。

パンくずリストのHTMLコード（ol要素）を貼り付けてボタンを押すと、JSON-LD形式の構造化データが自動で作成されます。

パンくずリストの構造化データ

HTMLコードの入力

構造化データの出力

使い方

パンくずリストの構造化データを簡単に作成することができます。ol要素で作られたリストにのみ対応しています。

  • パンくずリスト用のHTMLコードをHTMLコードの入力欄に貼り付けて、更新するボタンを押してください。
  • JSON-LD形式の構造化データが構造化データの出力欄に表示されるので、それをコピーしてお使いください。
  • 構造化データのコード（<script>～</script>）は、<head>～</head>内または<body>～</body>内で使用することができます。
  • 構造化データ内のURLを絶対URL（https://～）にしたい場合は、HTMLコード内のURLを絶対URLで記述するか、出力された構造化データ内のURLをご自分で書き換えてください。
    ※Googleのリッチリザルト テストで検証すると、相対URLでは「URLが無効です」と表示されるので、絶対URLで記述しておいた方が良いでしょう。
  • オプションで、構造化データ内の最後の項目（現在のページ）にURL（"item":～）を含めるかどうかを選択できます。また、構造化データ内のインデント幅を3段階で調整することができます。
  • このツールはJavaScriptで作成されています。JavaScriptを利用できない環境では動作しません。

仕様

  • div要素などで作成されたパンくずリストには対応していません。ol要素で作成されたリストにのみ対応しています。
  • 入力されたコードの中からol要素内のli要素を抽出し、そこに含まれるURLとテキスト（項目名）を構造化データに反映させています。ol要素の周囲に別の要素があっても機能します。
  • 関連する要素（ol要素、li要素、a要素）にclass属性などが記述されていても機能します。li要素内にa要素以外のタグが含まれている場合は、それを除去してテキストのみを抽出します。
  • li要素の内容が空の場合でも機能します（その場合はダミーのテキストが構造化データ内に挿入されます）。ただし、li要素自体の配置は必須で、2～10個のli要素を配置することができます。
  • データの抽出には正規表現を使用していますが、それほど厳密な判定は行っていないため、HTMLコードの状態によってはうまく機能しないことがあるかもしれません。

参考リンク（外部サイト）

パンくずリストの構造化データの作成で参考になるサイトです。（別ウィンドウで開きます）