Next.js（ReactJS）でJSON-LDデータをレンダリングする方法

Next.jsやその他のReactJSプロジェクトでJSON-D（application / ld + json）スキーマを機能させる方法を学びましょう。

Next.js（または任意のReactアプリ）でJSON-LDデータをレンダリングするには、次を使用する必要があります：

• <script> 要素。
• dangerouslySetInnerHTML 属性。
• JSON.stringify メソッド（serlialization用）。

JSON-LD LinkedDataのJavaScriptObjectNotationの略です。これは、Schema.orgデータをウェブサイトのコンテンツに関する検索エンジンに提示するための軽量な方法です。

例を見てみましょう。

次のように構造化されたHTMLJSON-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>

このJSON-LDスキーマをNext.jsで機能させるには、まずHTMLの<script>を削除します。 タグを付けると、JSON-LDオブジェクトが残ります。

次に、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"}
  }
}

次に、schemaDataをシリアル化する必要があります JSON.stringify()の変数 ：

JSON.stringify(schemaData)

最後に、JSON.stringify(schemaData)を追加します dangerouslySetInnerHTMLのオブジェクト値として <script>内の属性 ブラウザでレンダリングする要素：

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

混乱している場合は、チュートリアルのコードに基づいた完全なページの例を次に示します。これは、すべてのNext.js/ReactWebサイトで機能するはずです。

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(structuredData) }}
      />
      <div>Your content</div>
    </>
  );
};

export default SomePage;