Next.js এবং অন্যান্য ReactJS প্রজেক্টে JSON-D (application/ld+json) স্কিমা কিভাবে কাজ করতে হয় তা জানুন।
JSON-LD ডেটা Next.js (বা যেকোন রিঅ্যাক্ট অ্যাপ) এ রেন্ডার করতে আপনাকে ব্যবহার করতে হবে:
-
<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;