ব্রেডক্রাম্ব

ওয়েব পৃষ্ঠাতে প্রদর্শিত ব্রেডক্রাম্ব

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

স্ট্রাকচার্ড ডেটা কীভাবে যোগ করবেন

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

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

  1. প্রয়োজনীয় প্রপার্টি যোগ করুন। পৃষ্ঠার কোথায় স্ট্রাকচার্ড ডেটা যোগ করবেন সেই সম্পর্কে জানতে JSON-LD স্ট্রাকচার্ড ডেটা ডেটা: পৃষ্ঠার কোথায় যোগ করব দেখুন।
  2. নির্দেশিকা অনুসরণ করুন।
  3. আপনি বিশিষ্ট ফলাফল পরীক্ষা-এর মাধ্যমে কোড যাচাই করুন।
  4. স্ট্রাকচার্ড ডেটা ব্যবহার করছে এমন কিছু পৃষ্ঠা প্রকাশ করুন এবং ইউআরএল খতিয়ে দেখার টুল দিয়ে Google কীভাবে পৃষ্ঠাটি দেখবে তা পরীক্ষা করুন। Google যেন পৃষ্ঠাটি অ্যাক্সেস করতে পারে এবং সেটি যাতে robots.txt ফাইল, noindex ট্যাগ দিয়ে ব্লক করা না থাকে অথবা দেখার জন্য লগ-ইন করতে না হয়, সেই বিষয়ে লক্ষ্য রাখুন। পৃষ্ঠা দেখে যদি মনে হয়, তাহলে Google-কে ইউআরএল আবার ক্রল করার অনুরোধ করতে পারেন।
  5. আগামীদিনের পরিবর্তনগুলি সম্পর্কে Google-কে জানাতে, আমরা আপনাকে সাইটম্যাপ জমা দিতে সাজেস্ট করছি। আপনি Search Console সাইটম্যাপ এপিআই ব্যবহার করে এটি অটোমেটিক করতে পারেন।

উদাহরণ

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

ব্রেডক্রাম্ব প্রয়োগ করার একটি সাধারণ উপায় হল ইউআরএল পাথ অংশটিকে ব্রেডক্রাম্ব ট্রেল হিসেবে ব্যবহার করা। মনে রাখবেন যে ইউআরএল পাথের কিছু অংশ থেকে আপনার ওয়েবসাইটের জন্য সেটি প্রযোজ্য কিনা তা বুঝতে লোকজনের অসুবিধা হয়। যেমন, "https://example.com/pages/books/catcher_in_the_rye.html" ইউআরএলে "pages" অথবা "example.com" অথবা টপ-লেভেল এলিমেন্ট কোনও তথ্য যোগ করে না। হুবহু ইউআরএলের স্ট্রাকচারের মতো ব্রেডক্রাম্ব দেখানোর পরিবর্তে ব্যবহারকারী যে পাথ ধরে ওয়েবসাইটের বিভিন্ন অংশে যেতে পারেন সেটি দেখালে ভাল হয়।

একটি ব্রেডক্রাম্ব ট্রেল

"2014 Nebula Award best novel"-এর মতো একটি নির্দিষ্ট বছরে একটি বিশেষ ধারার পুরস্কারকে সার্চ কোয়েরি হিসেবে ব্যবহার করলে নিম্নলিখিত ব্রেডক্রাম্ব জেনারেট করা হতে পারে:

BooksScience Fiction › Award Winners

JSON-LD

JSON-LD কোডে লেখা এই ব্রেডক্রাম্বের একটি উদাহরণ নিচে দেওয়া হল:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

RDFa কোডে লেখা এই ব্রেডক্রাম্বের একটি উদাহরণ নিচে দেওয়া হল:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

মাইক্রোডেটা

মাইক্রোডেটায় লেখা এই ব্রেডক্রাম্বের একটি উদাহরণ নিচে দেওয়া হল:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

পৃষ্ঠার ভিজ্যুয়াল ডিজাইনের অংশ হিসেবে HTML ব্রেডক্রাম্ব ব্লকের একটি উদাহরণ নিচে দেওয়া হল।

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

একাধিক ব্রেডক্রাম্ব ট্রেল

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

BooksScience Fiction › Award Winners

এই হল আর একটি ব্রেডক্রাম্ব ট্রেল যা একই পৃষ্ঠায় নিয়ে যায়:

Literature › Award Winners

JSON-LD

এখানে JSON-LD কোডে লেখা একাধিক ব্রেডক্রাম্ব ট্রেলের উদাহরণ দেওয়া হল:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

এখানে RDFa কোডে লেখা একাধিক ব্রেডক্রাম্ব ট্রেলের উদাহরণ দেওয়া হল:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

মাইক্রোডেটা

এখানে মাইক্রোডেটাতে লেখা একাধিক ব্রেডক্রাম্ব ট্রেলের উদাহরণ দেওয়া হল:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

পৃষ্ঠার ভিজ্যুয়াল ডিজাইনের অংশ হিসেবে HTML ব্রেডক্রাম্ব ব্লকের একটি উদাহরণ নিচে দেওয়া হল।

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

নির্দেশিকা

Google Search ব্রেডক্রাম্ব সহ দেখানোর জন্য আপনাকে নিম্নলিখিত নির্দেশিকা মেনে চলতে হবে।

বিভিন্ন ধরনের স্ট্রাকচার্ড ডেটার সংজ্ঞা

একটি ব্রেডক্রাম্ব উল্লেখ করতে আপনাকে কমপক্ষে দুটি ListItems সহ একটি BreadcrumbList উল্লেখ করতে হবে। ব্রেডক্রাম্ব সহ দেখানোর জন্য আপনার কন্টেন্টকে উপযোগী করে তুলতে, প্রয়োজনীয় প্রপার্টিগুলি অবশ্যই যোগ করতে হবে।

BreadcrumbList কন্টেনার আইটেমে সূচির সব এলিমেন্ট থাকে। BreadcrumbList-এর সম্পূর্ণ সংজ্ঞা schema.org/BreadcrumbList-এ দেওয়া আছে।

প্রয়োজনীয় প্রপার্টি
itemListElement

BreadcrumbList

নির্দিষ্ট ক্রমে সাজানো ব্রেডক্রাম্বের অ্যারে। ListItem ব্যবহার করে প্রতিটি ব্রেডক্রাম্ব উল্লেখ করুন। যেমন:


{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

সূচির কোনও নির্দিষ্ট আইটেমের বিবরণ ListItem-এ দেওয়া থাকে। ListItem-এর সম্পূর্ণ সংজ্ঞা schema.org/ListItem-এ দেওয়া আছে।

প্রয়োজনীয় প্রপার্টি
item

URL বা Thing-এর সাবটাইপ

যে পৃষ্ঠায় ব্রেডক্রাম্বটি আছে তার ইউআরএল। item উল্লেখ করার দুটি উপায় আছে:

  • URL: পৃষ্ঠার ইউআরএল উল্লেখ করুন। যেমন:
    
    "item": "https://example.com/books"
  • Thing: আপনি যে মার্ক-আপের ফর্ম্যাট ব্যবহার করছেন সেটির উপর নির্ভর করে ইউআরএল উল্লেখ করতে আইডি ব্যবহার করুন:
    • JSON-LD: ইউআরএল উল্লেখ করতে @id ব্যবহার করুন।
    • মাইক্রোডেটা: ইউআরএল উল্লেখ করতে href বা itemid ব্যবহার করতে পারেন।
    • RDFa: ইউআরএল উল্লেখ করতে about, href বা resource ব্যবহার করতে পারেন।

ব্রেডক্রাম্ব ট্রেলে ব্রেডক্রাম্ব শেষ আইটেম হলে, item-এর প্রয়োজন নেই। শেষ আইটেমের জন্য item যোগ করা না হলে, Google পৃষ্ঠাটির ইউআরএল ব্যবহার করে।

name

Text

ব্যবহারকারীকে ব্রেডক্রাম্বের যে শীর্ষক দেখানো হয়। item উল্লেখ করার জন্য URL ব্যবহার করার পরিবর্তে, name-এর সাথে Thing ব্যবহার করলে, name-এর প্রয়োজন নেই।

position

Integer

ব্রেডক্রাম্ব ট্রেলে ব্রেডক্রাম্বের পজিশন। ট্রেলের শুরুর অবস্থানকে ১ হিসেবে ধরা হয়।

Search Console-এর সাহায্যে বিশিষ্ট ফলাফল মনিটর করা

Google Search-এ আপনার পৃষ্ঠা কীভাবে কাজ করবে তা মনিটর করতে Search Console নামক একটি টুল সাহায্য করে। Google Search ফলাফলে অন্তর্ভুক্ত হওয়ার জন্য আপনাকে Search Console-এ সাইন-আপ করতে হবে না কিন্তু এটি Google-কে আপনার সাইট আরও ভালভাবে দেখাতে এবং সেটি বুঝতে আপনাকে সাহায্য করবে। আমরা সাজেস্ট করছি, নিচে উল্লেখ করা ঘটনার ক্ষেত্রে Search Console পরীক্ষা করার জন্য:

  1. প্রথমবার স্ট্রাকচার্ড ডেটা ব্যবহার করার পর
  2. নতুন টেমপ্লেট প্রকাশ করা বা আপনার কোড আপডেট করার পর
  3. নির্দিষ্ট সময়ের ব্যবধানে ট্রাফিক বিশ্লেষণ করা

প্রথমবার স্ট্রাকচার্ড ডেটা ব্যবহার করার পর

Google আপনার পৃষ্ঠা ইন্ডেক্স করার পরে, উপযুক্ত বিশিষ্ট ফলাফল সম্পর্কিত স্ট্যাটাস রিপোর্ট সমস্যাগুলি দেখুন। সাধারণত আপনি দেখতে পারবেন সঠিক পৃষ্ঠার সংখ্যা বাড়ছে এবং সতর্কতা বা সমস্যার সংখ্যা বাড়ছে না। আপনার স্ট্রাকচার্ড ডেটাতে সমস্যা দেখতে পেলে:

  1. সমস্যার সমাধান করুন
  2. সমস্যাটির সমাধান হয়েছে কিনা দেখতে লাইভ ইউআরএল পরীক্ষা করুন
  3. স্ট্যাটাস রিপোর্ট ব্যবহার করে যাচাইকরণের অনুরোধ করুন

নতুন টেমপ্লেট প্রকাশ করা বা আপনার কোড আপডেট করার পর

আপনি যখন নিজের ওয়েবসাইটে গুরুত্বপূর্ণ পরিবর্তন করেন, স্ট্রাকচার্ড ডেটা সম্পর্কিত সমস্যা এবং সতর্কতার সংখ্যা বেড়ে যাওয়া মনিটর করুন।
  • যদি দেখেন সমস্যার সংখ্যা বেড়ে গেছে তাহলে, আপনি হয়ত এমন নতুন টেমপ্লেট ব্যবহার করছেন যা কার্যকর নয় অথবা আপনার সাইট আগে থেকে থাকা টেমপ্লেটের সাথে নতুন কিন্তু ভুল পদ্ধতিতে ইন্টার‍্যাক্ট করছে।
  • আপনি যদি দেখেন যে, সঠিক আইটেমের সংখ্যা কমছে (সমস্যা বেড়ে যাওয়ার সাথে মিল নেই), তাহলে হয়ত আপনার পৃষ্ঠাতে আর স্ট্রাকচার্ড ডেটা এম্বেড করা হচ্ছে না। সমস্যার কারণ জানতে ইউআরএল খতিয়ে দেখার টুল ব্যবহার করুন।
  • নির্দিষ্ট সময়ের ব্যবধানে ট্রাফিক বিশ্লেষণ করা

    পারফর্ম্যান্সের রিপোর্ট ব্যবহার করে Google Search ট্রাফিক বিশ্লেষণ করুন। ডেটার সাহায্যে জানতে পারবেন, Search-এ কতক্ষণ পরপর বিশিষ্ট ফলাফল হিসেবে আপনার পৃষ্ঠা দেখানো হবে এবং সার্চের ফলাফলে সাধারণত কোথায় আপনার র‍্যাঙ্ক হবে। আপনি Search Console এপিআই-এর সাহায্যে এই ফলাফল অটোমেটিক নিয়ে আসতে পারেন।

    সমস্যার সমাধান করা

    স্ট্রাকচার্ড ডেটা প্রয়োগ করতে সমস্যা হলে, আপনি সাহায্য পেতে পারেন এমন কিছু রিসোর্স এখানে উল্লেখ করা হল।