Next.js（React）でJSON-LDデータをレンダリングする方法をわかりやすく解説

Next.jsやその他のReactプロジェクトで、JSON-LD（application/ld+json）スキーマを正しく動作させる方法を解説します。

JSON-LDをレンダリングするために必要なもの

Next.js（または任意のReactアプリケーション）でJSON-LDデータをレンダリングするには、以下の3つの要素を使用します。

• <script> 要素
• dangerouslySetInnerHTML 属性
• JSON.stringify メソッド（シリアライズ用）

JSON-LDとは？

JSON-LDは「JavaScript Object Notation for Linked Data」の略称です。Webサイトのコンテンツに関するSchema.orgのデータを、検索エンジンに対して軽量に伝えるための手法です。適切に実装することで、検索結果にレビュー評価などのリッチリザルトが表示される可能性があります。

実装手順

それでは、実際の例を見ていきましょう。まず、次のようなHTMLのJSON-LDスキーマがあると仮定します。

<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}
</script>

1. スクリプトタグを取り除く

このJSON-LDスキーマをNext.jsで動作させるには、まずHTMLの<script>タグを取り除き、JSON-LDオブジェクトだけの状態にします。

2. 変数に代入する

次に、そのJSON-LDオブジェクトを変数に代入します。

const schemaData = 
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}

3. JSON.stringify()でシリアライズする

続いて、schemaData変数をJSON.stringify()でシリアライズします。

JSON.stringify(schemaData)

4. dangerouslySetInnerHTMLで出力する

最後に、JSON.stringify(schemaData)を<script>要素内のdangerouslySetInnerHTML属性のオブジェクト値として渡せば、ブラウザ上にレンダリングされます。

<script
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
  />

完全なコード例

イメージしづらい場合は、このチュートリアルのコードをもとにした完全なページ例をご覧ください。すべてのNext.js／Reactサイトでそのまま動作するはずです。

import React from 'react';

const schemaData = 
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}

const SomePage = () => {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
      />
      <div>Your content</div>
    </>
  );
};

export default SomePage;

まとめ

Next.jsやReactでJSON-LDをレンダリングする際は、「JSONオブジェクトを変数に格納 → JSON.stringify()で文字列化 → dangerouslySetInnerHTMLでscript要素に出力」という流れを押さえておけば問題ありません。実装後は、Googleの「リッチリザルトテスト」などを活用して、構造化データが正しく認識されているか必ず確認しておきましょう。