https://eonet.jp/share/js/breadcrumb.js

1document.addEventListener("DOMContentLoaded", function () {
2  let pathname = location.pathname;
3
4  // 末尾が /index.html なら / に置換して正規化
5  if (pathname.endsWith("/index.html")) {
6    pathname = pathname.slice(0, -("index.html".length));
7  }
8
9  const pathParts = pathname.split("/").filter(Boolean);
10  const lastPart = pathParts[pathParts.length - 1] || "";
11
12  fetch("/share/json/breadcrumb-map.json")
13    .then(res => res.json())
14    .then(map => {
15      const breadcrumbList = [];
16
17      const nav = document.createElement("nav");
18      const ul = document.createElement("ul");
19
20      // 1. トップページ
21      breadcrumbList.push({
22        "@type": "ListItem",
23        "position": 1,
24        "name": "eoトップ",
25        "item": location.origin + "/"
26      });
27      const liHome = document.createElement("li");
28      const aHome = document.createElement("a");
29      aHome.href = "/";
30      aHome.textContent = "eoトップ";
31      liHome.appendChild(aHome);
32      ul.appendChild(liHome);
33
34      // 2. 中間階層を辿る関数
35      function findNode(map, slug) {
36        return map[slug] || null;
37      }
38
39      let currentMap = map;
40      let accumulatedPath = "/";
41      let position = 2;
42
43      // 3. ファイル名かどうか判定（正規化済みなのでlastPartがindex.htmlになることはない）
44      const isFile = lastPart.includes(".html");
45      // index.htmlはすでに除去済みなので、末尾がディレクトリのはず
46      const isIndexOrDir = !isFile;
47
48      // 4. 中間階層を作成
49      for (let i = 0; i < pathParts.length - 1; i++) {
50        const slug = pathParts[i];

51        const node = findNode(currentMap, slug);
52        if (!node) break;
53
54        const name = node.name?.trim();
55        if (name) {
56          accumulatedPath = node.url || (accumulatedPath + slug + "/");
57
58          breadcrumbList.push({
59            "@type": "ListItem",
60            "position": position++,
61            "name": name,
62            "item": location.origin + accumulatedPath
63          });
64
65          const li = document.createElement("li");
66          const a = document.createElement("a");
67          a.href = accumulatedPath;
68          a.textContent = name;
69          li.appendChild(a);
70          ul.appendChild(li);
71        }
72
73        currentMap = node.children || {};
74      }
75
76      // 5. 最後のページ名を決定
77      let lastName = null;
78      let lastUrl = location.href;
79
80      if (isIndexOrDir) {
81        // 最後のslugを使う
82        const lastSlug = lastPart;
83        const lastNode = findNode(currentMap, lastSlug) || findNode(map, lastSlug);
84
85        if (lastNode && lastNode.name) {
86          lastName = lastNode.name.trim();
87          lastUrl = location.origin + (lastNode.url || location.pathname);
88        }
89        if (!lastName) {
90          // fallbackでタイトルタグ左側
91          const parts = document.title.split("｜");
92          lastName = parts[0]?.trim();
93        }
94      } else {
95        // ファイル名がある場合はタイトルタグの左側を使う
96        const parts = document.title.split("｜");
97        lastName = parts[0]?.trim();
98      }
99
100      if (lastName && pathParts.length !==0) {
101        breadcrumbList.push({
102          "@type": "ListItem",
103          "position": position,
104          "name": lastName,
105          "item": lastUrl
106        });
107
108        const liCurrent = document.createElement("li");
109        liCurrent.textContent = lastName;
110        ul.appendChild(liCurrent);
111      }
112
113      nav.appendChild(ul);
114
115      // 6. HTMLにパンくずを追加
116      const breadcrumbs = document.querySelector(".breadcrumbs") || document.body;
117      breadcrumbs.insertBefore(nav, breadcrumbs.firstChild);
118
119      // 7. JSON-LDとして構造化データを追加
120      const script = document.createElement("script");
121      script.type = "application/ld+json";
122      script.textContent = JSON.stringify({
123        "@context": "https://schema.org",
124        "@type": "BreadcrumbList",
125        "itemListElement": breadcrumbList
126      });
127      document.head.appendChild(script);
128    })
129    .catch(console.error);
130});