জাভাস্ক্রিপ্ট ব্যবহার করে স্ট্রাকচার্ড ডেটা তৈরি করা

প্রচুর পরিমাণে ডায়নামিক কন্টেন্ট দেখাতে আধুনিক ওয়েবসাইট জাভাস্ক্রিপ্ট ব্যবহার করে। আপনার ওয়েবসাইটে জাভাস্ক্রিপ্ট ব্যবহার করে স্ট্রাকচার্ড ডেটা জেনারেট করার সময় কিছু জিনিস মাথায় রাখতে হবে। এছাড়াও এই নির্দেশিকায় পেশাদার পদ্ধতি ও প্রয়োগ সংক্রান্ত স্ট্র্যাটেজি উল্লেখ করা হল। আপনি স্ট্রাকচার্ড ডেটা এই প্রথমবার ব্যবহার করলে, স্ট্রাকচার্ড ডেটা কীভাবে কাজ করে নিবন্ধটি পড়ুন।

বিভিন্ন পদ্ধতিতে জাভাস্ক্রিপ্ট ব্যবহার করে স্ট্রাকচার্ড ডেটা জেনারেট করা যায়। সবচেয়ে বেশি ব্যবহৃত পদ্ধতিগুলি এখানে উল্লেখ করা হল:

পরিবর্তনশীল পদ্ধতিতে JSON-LD কোড তৈরি করতে Google ট্যাগ ম্যানেজারের ব্যবহার

Google ট্যাগ ম্যানেজার প্ল্যাটফর্ম ওয়েবসাইটের কোড এডিট না করেই ট্যাগ ম্যানেজ করতে সাহায্য করে। Google ট্যাগ ম্যানেজার-এর মাধ্যমে স্ট্রাকচার্ড ডেটা জেনারেট করতে, নিচের ধাপগুলি অনুসরণ করুন:

  1. আপনার সাইটে Google ট্যাগ ম্যানেজার সেট-আপ করে ইনস্টল করুন।
  2. কন্টেনারে নতুন কাস্টম HTML ট্যাগ যোগ করুন।
  3. ট্যাগ কন্টেন্টে প্রয়োজনীয় স্ট্রাকচার্ড ডেটা ব্লক পেস্ট করুন।
  4. আপনার কন্টেনারের অ্যাডমিন মেনুর Google ট্যাগ ম্যানেজার ইনস্টল করুন বিভাগে যেভাবে দেখানো হয়েছে ঠিক সেভাবেই কন্টেনার ইনস্টল করুন।
  5. আপনার ওয়েবসাইটে ট্যাগ যোগ করতে, Google ট্যাগ ম্যানেজার ইন্টারফেসে আপনার কন্টেনার প্রকাশ করুন।
  6. আপনার প্রয়োগ পরীক্ষা করে দেখুন

Google ট্যাগ ম্যানেজারে ভেরিয়েবলের ব্যবহার

যাতে পৃষ্ঠার তথ্যকে স্ট্রাকচার্ড ডেটার অংশ হিসেবে গণ্য করা হয়, সেই জন্য Google ট্যাগ ম্যানেজার (GTM)-এ ভেরিয়েবল কাজ করে। GTM-এ তথ্য ডুপ্লিকেট না করে পৃষ্ঠা থেকে স্ট্রাকচার্ড ডেটা নিয়ে আসতে আপনার ভেরিয়েবল ব্যবহার করা উচিত। GTM-এ তথ্য ডুপ্লিকেট করলে, GTM-এ যোগ করা স্ট্রাকচার্ড ডেটা ও পৃষ্ঠার কন্টেন্টের মধ্যে গরমিল হওয়ার ঝুঁকি থাকে।

যেমন, recipe_name নামের কাস্টম ভেরিয়েবল তৈরি করে আপনি এমন একটি ডায়নামিক রেসিপি JSON-LD ব্লক তৈরি করতে পারেন যেটি পৃষ্ঠার শীর্ষককে রেসিপির নাম হিসেবে ব্যবহার করে:

function() { return document.title; }

তারপরে, আপনার HTML কাস্টম ট্যাগে {{recipe_name}} আপনি ব্যবহার করতে পারেন।

ভেরিয়েবল ব্যবহার করছে এমন পৃষ্ঠা থেকে প্রয়োজনীয় তথ্য সংগ্রহ করতে আমরা ভেরিয়েবল তৈরি করার জন্য সাজেস্ট করছি।

কাস্টম HTML ট্যাগ কন্টেন্টের উদাহরণ এখানে দেওয়া হল:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

কাস্টম জাভাস্ক্রিপ্ট দিয়ে স্ট্রাকচার্ড ডেটা তৈরি করুন

এছাড়াও, স্ট্রাকচার্ড ডেটা জেনারেট করার আরেকটি পদ্ধতি হল জাভাস্ক্রিপ্ট ব্যবহার করে সব স্ট্রাকচার্ড ডেটা জেনারেট করা অথবা সার্ভার-সাইডে রেন্ডার করা স্ট্রাকচার্ড ডেটায় আরও তথ্য যোগ করা। দুটি ক্ষেত্রেই, Google Search পৃষ্ঠা রেন্ডার করার সময় DOM-এ উপলভ্য স্ট্রাকচার্ড ডেটা বুঝতে ও প্রসেস করতে পারে। Google Search কীভাবে জাভাস্ক্রিপ্ট প্রসেস করে সেই বিষয়ে আরও জানতে, জাভাস্ক্রিপ্ট সংক্রান্ত প্রাথমিক নির্দেশিকা দেখুন।

জাভাস্ক্রিপ্ট ব্যবহার করে জেনারেট করা স্ট্রাকচার্ড ডেটার একটি উদাহরণ এখানে দেওয়া হল:

  1. আপনি যে ধরনের স্ট্রাকচার্ড ডেটা সম্পর্কে জানতে আগ্রহী সেটি খুঁজুন
  2. নিম্নলিখিত উদাহরণের মতো জাভাস্ক্রিপ্ট স্নিপেট যোগ করতে, আপনার ওয়েবসাইটের HTML এডিট করুন (CMS বা হোস্টিং পরিষেবা প্রদানকারীর ডকুমেন্টেশন পড়ুন অথবা আপনার ডেভেলপারকে জিজ্ঞাসা করুন)।
    fetch('https://api.example.com/recipes/123')
    .then(response => response.text())
    .then(structuredDataText => {
      const script = document.createElement('script');
      script.setAttribute('type', 'application/ld+json');
      script.textContent = structuredDataText;
      document.head.appendChild(script);
    });
  3. বিশিষ্ট ফলাফল পরীক্ষার সাহায্যে আপনার প্রয়োগ পরীক্ষা করুন

সার্ভার-সাইড রেন্ডারিং ব্যবহার করা

আপনি সার্ভার-সাইড রেন্ডারিং ব্যবহার করলে, রেন্ডার করা আউটপুটেও প্রয়োজনীয় স্ট্রাকচার্ড ডেটা যোগ করতে পারেন। প্রয়োজনীয় স্ট্রাকচার্ড ডেটার ধরনের জন্য কীভাবে JSON-LD জেনারেট করা যায় তা জানতে ফ্রেমওয়ার্কের ডকুমেন্টেশন পড়ুন।

ঠিকভাবে প্রয়োগ করেছেন কিনা তা পরীক্ষা করে দেখুন

Google Search আপনার স্ট্রাকচার্ড ডেটা যাতে ক্রল করে ইন্ডেক্স করতে পারে তা নিশ্চিত করতে আপনার এই প্রয়োগ পরীক্ষা করে দেখুন:

  1. বিশিষ্ট ফলাফল পরীক্ষা করার টুল খুলুন।
  2. আপনি যে ইউআরএল পরীক্ষা করতে চান তা লিখুন।
  3. ইউআরএল পরীক্ষা করুন বিকল্পে ক্লিক করুন।

    সফল হয়েছে: আপনি সবকিছু ঠিকভাবে করলে এবং আপনার স্ট্রাকচার্ড ডেটার ধরন টুলে কাজ করলে, "বিশিষ্ট ফলাফলের জন্য পৃষ্ঠাটি উপযুক্ত" মেসেজ দেখতে পাবেন।
    বিশিষ্ট ফলাফল পরীক্ষায় কাজ করে না এমন কোনও স্ট্রাকচার্ড ডেটার ধরন পরীক্ষা করতে চাইলে, রেন্ডার করা HTML দেখুন। রেন্ডার করা HTML-এ স্ট্রাকচার্ড ডেটা থাকলে, Google Search সেটি প্রসেস করতে পারবে।

    আবার চেষ্টা করুন: সমস্যা ও সতর্কতা দেখতে পেলে, সেটি সিন্ট্যাক্স সংক্রান্ত সমস্যা বা অনুপস্থিত প্রপার্টির জন্য হতে পারে। আপনার স্ট্রাকচার্ড ডেটার ধরন সংক্রান্ত ডকুমেন্টেশন পড়ুন এবং সব প্রপার্টি যোগ করেছেন কিনা তা ভালভাবে দেখুন। এরপরেও সমস্যা না মিটলে, সার্চ সংক্রান্ত জাভাস্ক্রিপ্ট সমস্যার সমাধান করুন নির্দেশিকাটি পড়ুন।