パンくずリストの構造化データを設置する【上級者用】

Home » 上級者用 » パンくずリストの構造化データを設置する【上級者用】

以下のJavaScriptを<headt> </headt>の中に入れると、既存のパンくずリストを構造化データ用に書き直すことが可能です。


<script>
window.addEventListener('DOMContentLoaded', function() {
  // ① 親要素を取得
  var container = document.getElementById('breadcrumbs');
  if (!container) return;

  // ② 子要素(リンク)とテキストノードを解析してリスト化
  var itemListElement = [];
  var position = 1;

  // 子ノード(aタグやテキスト)をすべてチェック
  var nodes = container.childNodes;
  
  nodes.forEach(function(node) {
    var name = '';
    var link = '';

    if (node.nodeType === 1 && node.tagName === 'A') {
      // aタグの場合:テキストとhrefを取得
      name = node.innerText.trim();
      link = node.href;
    } else if (node.nodeType === 3) {
      // テキストノードの場合(最後の「テスト」など)
      name = node.textContent.replace(/[>>]/g, '').trim(); // 区切り文字「 > 」を除去
      if (name === "") return; // 空文字ならスキップ
      link = window.location.href; // リンクがない場合は現在のURL
    } else {
      return; // それ以外(brタグ等)はスキップ
    }

    // 構造化データのアイテムを追加
    itemListElement.push({
      "@type": "ListItem",
      "position": position++,
      "name": name,
      "item": link
    });
  });

  // ③ 構造化データのオブジェクトを作成
  var jsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": itemListElement
  };

  // ④ head内にscriptタグとして動的インジェクション
  var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.innerHTML = JSON.stringify(jsonLd);
  document.head.appendChild(script);
});
</script>

ご不明な点があればサポートセンターまでご連絡ください。

サポートセンター

Mail:[email protected]
Tel:0120-154-198
電話受付時間:平日 9:30~17:30

#ドメイン #レコード #ポート #ネームサーバー