जानें कि JSON-D (एप्लिकेशन/ld+json) स्कीमा को Next.js और दूसरे ReactJS प्रोजेक्ट में कैसे काम करते हैं।
Next.js (या किसी रिएक्ट ऐप) में JSON-LD डेटा रेंडर करने के लिए आपको इसका इस्तेमाल करना होगा:
- द
<script>तत्व। - द
dangerouslySetInnerHTMLगुण। - द
JSON.stringifyविधि (क्रमबद्धता के लिए)।
JSON-LD लिंक किए गए डेटा के लिए जावास्क्रिप्ट ऑब्जेक्ट नोटेशन के लिए खड़ा है। आपकी वेबसाइट की सामग्री के बारे में खोज इंजनों को 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;