Cách hiển thị dữ liệu JSON-LD trong Next.js (ReactJS)

Tìm hiểu cách làm cho các lược đồ JSON-D (application / ld + json) hoạt động trong Next.js và các dự án ReactJS khác.

Để hiển thị dữ liệu JSON-LD trong Next.js (hoặc bất kỳ ứng dụng React nào), bạn cần sử dụng:

• <script> phần tử.
• dangerouslySetInnerHTML thuộc tính.
• JSON.stringify phương pháp (để phân tích dịch vụ).

JSON-LD là viết tắt của JavaScript Object Notation cho Dữ liệu được Liên kết. Đó là một phương pháp gọn nhẹ để trình bày dữ liệu Schema.org cho các công cụ tìm kiếm về nội dung trang web của bạn.

Hãy xem một ví dụ.

Giả sử bạn có một lược đồ HTML JSON-LD được cấu trúc tương tự như sau:

<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>

Để làm cho lược đồ JSON-LD này hoạt động trong Next.js, hãy bắt đầu bằng cách xóa <script> HTML để bạn còn lại với một đối tượng JSON-LD.

Sau đó, gán đối tượng JSON-LD cho một biến, như sau:

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"}
  }
}

Bây giờ bạn cần tuần tự hóa schemaData của mình biến với JSON.stringify() :

JSON.stringify(schemaData)

Cuối cùng, bạn thêm JSON.stringify(schemaData) dưới dạng giá trị đối tượng của dangerouslySetInnerHTML thuộc tính bên trong <script> phần tử để hiển thị nó trong trình duyệt:

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

Nếu bạn bối rối, đây là một ví dụ trang hoàn chỉnh, dựa trên mã trong hướng dẫn của anh ấy, mã này sẽ hoạt động trong tất cả các trang web 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;