اسکیما برد کرامب

اسکیما breadcrumb سلسه مراتب صفحات سایت را نشان می دهد و همچنین به کاربر کمک می کند تا موقعیت خود را درون سایت ببیند و بتواند به راحتی به سایر صفحات دسترسی داشته باشد. همچنین رباط های گوگل با استفاده از این اسکیما می توانند صفحات سایت را راحتتر بررسی کنند و متوجه قالب سایت شوند.

بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

249

پرسش و پاسخ

فهرست مطالب برای مطالعه

- توضیح دستورات کد schema breadcrumb:
- کد اسکیما breadcrumb (بردکرامب)
  - کد اسکیما breadcrumb برای یک مورد
  - کد اسکیما breadcrumb برای چندین مورد

اسکیما بردکرامب مانند یک نقشه راه می باشد که باعث می شود تا کاربر با تعداد کلیک کمتری به مقصد خود در سایت برسد که همین امر باعث می شود افزایش تجربه رابط کاربری سایت نیز می شود و همیچنین با این نوع اسکیما میتوان صفحات و دسته بندی های سایت را راحت تر به کاربر معرفی کرد

تصویر زیر نمونه ای از این اسکیما در سایت جاب تیم را نمایش می دهد که مفهوم بیشتری را با این تصویر میتوان درک کرد.

اسکیما breadcrumb (بردکرامب)

itemListElement: مشخص کردن سلسه مراتب صفحات
type: مشخص کردن نوع Itemlist که در این اسکیما ListItem قرار می گیرد.
position: موقعیت صفحه مشخص می شود.
Name: مشخص کردن عنوان و دسته بندی صفحه
Item: قرار دادن URL صفحه یا زیر شاخه ها

برای اضافه کردن اسکیما در وردپرس میتوان هم کد وارد کرد و هم از افزونه هایی مانند schema pro، schema، یواست و ... استفاد نمود.

برای مطالعه بیشتر: بردکرامب (Breadcrumbs) چیست؟

اگر در سایت برای رسیدن به یک صفحه تنها یک روش وجود داشته باشد میتوان از کد زیر استفاده کرد. کد زیر مسیر رسیدن به صفحه معرفی کتاب هایی که جایزه گرفته اند را نمایش می دهد.

<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>

بعضی مواقع برای رسیدن به یک صفحه مشخص چندین راه وجود دارد که میتوان از کد زیر استفاده کرد. کد زیر دو مسیر درون سایت را برای رسیدن به صفحه معرفی کتاب هایی که جایزه دریافت کرده اند را نمایش می دهد.

<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>

نکته ای که باید به آن توجه داشت این است که میتوان تمامی کد ها را با استفاده از سایت Rich result test مورد بررسی قرار داد و از درست بودن کد ها اطمینان حاصل کرد.