Next.js(ReactJS)에서 JSON-LD 데이터를 렌더링하는 방법

JSON-D(application/ld+json) 스키마가 Next.js 및 기타 ReactJS 프로젝트에서 작동하도록 하는 방법을 알아보세요.

Next.js(또는 모든 React 앱)에서 JSON-LD 데이터를 렌더링하려면 다음을 사용해야 합니다.

• <script> 요소.
• dangerouslySetInnerHTML 기인하다.
• JSON.stringify 메서드(직렬화용).

JSON-LD Linked Data에 대한 JavaScript Object Notation을 나타냅니다. 웹사이트 콘텐츠에 대한 검색 엔진에 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>

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

export default SomePage;