JSON-LDをMicrodataから生成するJavaScript「md2ld.js」

公開日
更新日

ウェブサイトの制作・運営に携わり、JSON-LD で苦労している人も多いかと思います。今回は、そういった方々の救世主になるかもしれない、JSON-LD を Microdata から生成する JavaScript「md2ld.js」を紹介します。

JSON-LD で苦労する理由

JSON-LD は構造化データの1つで Google が推奨している方法です。ウェブページの本体とも言える HTML は文章を構造化するための記述言語です。「あれは見出し」「これは段落」「それは箇条書き」といったように、文字列が文章構造的に何なのかを明らかにします。対して、構造化データは「あれはウェブサイトの名称」「これはウェブページの名称」「それは人の名前」といったように、文字列が具体的に何なのかを明らかにします。

Microdata も構造化データの1つで、2025年現在、HTML の仕様書である HTML Standard にも記載されています。Microdata は HTML の各要素に専用属性 (itemscope, itemtype, itemprop 等) を埋め込むことで構造を明らかにします。

<body>
  <div itemscope itemtype="https://schema.org/WebSite">
    <header>
      <p itemprop="name">ウェブサイトの名称</p>
    </header>
    <main itemscope itemtype="https://schema.org/WebPage">
      <h1 itemprop="name">ウェブページの名称</h1>
      <p itemprop="author" itemscope itemtype="https://schema.org/Person">著者: <span itemprop="name">ウェブページの著者名</span></p>
      …
    </main>
    <footer>
      <p>&copy; <time itemprop="copyrightYear">2025</time> <span itemprop="copyrightHolder" itemscope itemtype="https://schema.org/Person"><span itemprop="name">ウェブサイトの著作権所有者名</span></span>.</p>
    </footer>
  </div>
</body>

Microdata の場合、ウェブページに表示する内容自体を構造化しますが、JSON-LD は表示する内容とは別に用意する必要があるため、手間がかかります。

<head>
  …
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "name": "ウェブサイトの名称",
        "copyrightYear": "2025",
        "copyrightHolder": { "@id": "https://example.com/#WebSiteCopyrightHolder" }
      },
      {
        "@id": "https://example.com/#WebSiteCopyrightHolder",
        "@type": "Person",
        "name": "ウェブサイトの著作権所有者名"
      },
      {
        "@type": "WebPage",
        "name": "ウェブページの名称",
        "author": { "@id": "https://example.com/#WebPageAuthor" }
      },
      {
        "@id": "https://example.com/#WebPageAuthor",
        "@type": "Person",
        "name": "ウェブページの著者名"
      }
    ]
  }
  </script>
</head>

また、ユーザーが見ている情報 (HTMLコード) と、サーチエンジンが取得した情報 (JSON-LD) の整合性がとれていない状態も発生しやすく、最悪、スパム判定されるリスクもあります。

そのような事態を避けるため、フォームに入力された情報から、HTMLコード と JSON-LD を一括生成するのが一般的です。高いシェアを誇る WordPress のテーマやプラグインで採用されているのもこの方法です。

しかし、この方法は、構造化データごとにフォームを用意したり、HTMLコード と JSON-LD の出力を最適化しなければならないという欠点があります。2025年現在、Google検索 がサポートする構造化データは27種類もあります。

  • 記事
  • パンくずリスト
  • カルーセル
  • コースリスト
  • データセット
  • ディスカッション フォーラム
  • 教育向け Q&A
  • 雇用主の総合評価
  • イベント
  • よくある質問
  • 画像メタデータ
  • 求人情報
  • ローカル ビジネス
  • 数学の解法
  • 映画
  • 組織
  • 練習問題
  • 商品
  • プロフィール ページ
  • Q&A
  • レシピ
  • クチコミ抜粋
  • ソフトウェア アプリ
  • 読み上げ
  • 定期購入とペイウォール コンテンツ
  • 民泊
  • 動画

また、アップデートにより必須項目や推奨項目が変わったり、新たに構造化データが追加される可能性もあるため、それら全てに対応するというのは困難を極めます。

JSON-LD を自動生成させるという方法

JSON-LD を自動生成させる方法を考えた場合、HTMLコード を元に生成するのがベストだと思います。この方法であれば HTMLコード と JSON-LD の整合性がとれ、部分的にテンプレート化したり、局所的に構造化データを手動で埋め込むといったこともできます。

しかし、この方法は HTMLコード のどの部分を構造化データにするのかを明確にする必要があります。そこで目を付けたのが Microdata です。

Microdata は先にも述べた通り、HTML Standard にも記載される正式な仕様で、JSON-LD との互換性もあります。また、副次的な効果としてウェブページ上の情報を最適化できる側面もあります。このような経緯から、Microdata から JSON-LD を生成する JavaScript「md2ld.js」を制作しました。

余談: 情報の最適化とは

Microdata は型 (itemtype) を持つスコープ (itemscope) で構成されており、正しい位置に適切な情報を配置することが求められる場合があります。例えば、WebPage という型には breadcrumb という専用のプロパティがあるため「パンくずリスト」はウェブページの情報の一部として配置するのがベストだと言えます。

<div itemscope itemtype="https://schema.org/WebPage">
  …
  <ol itemprop="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="https://example.com/" itemprop="item"><span itemprop="name">ホーム</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="https://example.com/about/" itemprop="item"><span itemprop="name">このサイトについて</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="https://example.com/about/profile/" itemprop="item"><span itemprop="name">運営者情報</span></a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
  …
</div>

md2ld.js (Microdata to Linked Data) という選択肢

ということで Microdata から JSON-LD を生成する JavaScript の紹介です。まずは md2ld.zip をダウンロードしてください。

md2ld.zip のダウンロード

この md2ld.zip の中に md2ld.js があるので、head要素内 に defer属性 を付けた script要素 で読み込んでください。それだけでOKです。

<head>
  …
  <script src="md2ld.js" defer></script>
  …
</head>

手作業で作った静的な HTMLファイル から、動的な WordPress まで、幅広く使えます。応用すれば Node.js などにも転用できます。ちなみに、itemref属性 だけは使用しても反映されませんので、あしからず。

md2ld.js によって HTMLコード内 の Microdata から JSON-LD を生成され、head要素 の終了タグ前に出力されます。あとは Microdata によるマークアップを頑張るのみです！

〆

実は、Microdata によるマークアップが一番の鬼門だったりして。もし不具合等を見つけてしまった場合は、こっそり教えてください。

関連記事