วิธีแสดงผลข้อมูล JSON-LD ใน Next.js (ReactJS)

เรียนรู้วิธีทำให้สคีมา JSON-D (application/ld+json) ทำงานใน Next.js และโปรเจ็กต์ ReactJS อื่นๆ

หากต้องการแสดงข้อมูล JSON-LD ใน Next.js (หรือแอป React ใดๆ) คุณต้องใช้:

• The <script> องค์ประกอบ
• The dangerouslySetInnerHTML คุณลักษณะ.
• The JSON.stringify วิธีการ (สำหรับการทำให้เป็นอนุกรม)

JSON-LD ย่อมาจาก 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;