Next.js (ReactJS) में JSON-LD डेटा कैसे रेंडर करें

जानें कि Next.js और अन्य ReactJS प्रोजेक्ट्स में JSON-LD (application/ld+json) स्कीमा को कैसे काम करना है।

Next.js (या किसी React ऐप) में JSON-LD डेटा रेंडर करने के लिए आपको इनका उपयोग करने की आवश्यकता है:

• <script> एलिमेंट।
• dangerouslySetInnerHTML एट्रिब्यूट।
• JSON.stringify मेथड (सीरियलाइज़ेशन के लिए)।

JSON-LD का मतलब है JavaScript Object Notation for Linked Data। यह 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...", 
  "brand": "Company Name", 
  "review": { 
    "@type": "Review", 
    "name": "Company Name ", 
    "reviewBody": "It was a dog...", 
    "reviewRating": { "@type": "Rating", "ratingValue": "5" }, 
    "datePublished": "2020-04-06", 
    "author": {"@type": "Person", "name": "Emma"} 
  } 
} 
</script>

Next.js में इस JSON-LD स्कीमा को काम करने के लिए, 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...", 
  "brand": "Company Name", 
  "review": { 
    "@type": "Review", 
    "name": "Company Name ", 
    "reviewBody": "It was a dog...", 
    "reviewRating": { "@type": "Rating", "ratingValue": "5" }, 
    "datePublished": "2020-04-06", 
    "author": {"@type": "Person", "name": "Emma"} 
  } 
}

अब आपको अपने schemaData वेरिएबल को JSON.stringify() के साथ सीरियलाइज़ करने की आवश्यकता है:

JSON.stringify(schemaData)

अंत में 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...", 
  "brand": "Company Name", 
  "review": { 
    "@type": "Review", 
    "name": "Company Name ", 
    "reviewBody": "It was a dog...", 
    "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;