کد اسکیما برای Breadcrumb و مسیر راهنما در سئو

بردکرامب یا همان مسیر راهنما در وب سایت ، یکی از مهم ترین قسمت ها هم در سئو و هم در تجربه کاربری و دسترسی به شکل راحت‌تر به بخش هایی همچون دسته بندی ها ، مقالات ، محصولات و … است . مسیر راهنما در تمامی وب سایت ها باید وجود داشته باشد . اما مسیر راهنما نیز همانند قسمت محصولات ، ویدیو ها ، سئوالات متداول و … خود دارای یک اسکیما است که باید به شکل دقیق تنظیم شود !

اسکیمای بردکرامب نیز ازجمله اسکیماهایی است که نیاز به زحمت زیادی ندارد و میتوانید آن را در داخل صفحات خودتان قرار دهید اما توجه به چندین نکته در آن حائز اهمیت است . توجه داشته باشد که داخل بردکرامب ، باید آدرس های داینامیک هرصفحه را داخل بخش های لازم بردکرامب قراردهید ، بنابراین زمانی که به روش برنامه نویسی ، آدرس و عنوان هرصفحه را دریافت می‌کنید ، میتوانید داخل بردکرامب نیز این موارد را قرار دهید . این پروسه در سایت های اختصاصی و غیر وردپرسی سخت است و باید از یک برنامه نویس کمک بگیرید که میتوانید از کمک ما نیز در این موارد استفاده کنید !

کد زیر یک نمونه از اسکیمای بردکرامب یا همان مسیر راهنما برای سئو است :

{"@type":"BreadcrumbList",
"@id":"https://seo90.ir/category/seo-articles/#breadcrumb",
"itemListElement":[
{"@type":"ListItem",
"position":1,
"name":"",
"item":"https://seo90.ir/"},
{"@type":"ListItem",
"position":2,
"name":""}
]}

در این کد ساده ، نیاز به توضیحات دقیق داریم . اول از هرچیزی “type”:”BreadcrumbList” را میبینیم که نشان می‌دهد این آیتم از اسکیما برای یک بردکرامب است . در مورد بعدی خط زیر را داریم :

"@id":"https://seo90.ir/category/seo-articles/#breadcrumb"

در این خط ، اشاره داریم به صفحه‌ای که این بردکرامب در داخل آن در حال نمایش است و در حقیقت آدرس صفحه جاری را داخل آن قرار داده‌ایم ! گزینه بعدی “itemListElement” است که شامل یک آرایه است و در داخل این آرایه تمامی آیتم های بردکرامب یا به عبارتی ListItem ها قرار خواهند گرفت . در داخل آرایه مربوط به BreadcrumbList ، دو آیتم “type”:”ListItem” داریم ، یعنی مسیر راهنمای ما شامل دو عنوان است . در داخل اولین ListItem ، گزینه های position و name و item وجود دارد که position محل نمایش هر آیتم را نشان میدهد و برای آیتم اول از 1 شروع می‌شود و به همین ترتیب افزایش پیدا می‌کند .

پیشنهادی : چگونه برای ویدیو ها اسکیمای درست قرار دهیم ؟

گزینه name دقیقا نام همان صفحه است . برای مثال اگر اکنون در داخل صفحه دسته بندی مقالات سایت هستیم ، اولین آیتم مربوط به صفحه اصلی است و نشان می‌دهد که ما از صفحه اصلی وارد صفحه مربوط به دسته بندی مقالات شدیم . پس در آیتم اول با توجه به اینکه عنوان صفحه اصلی ما ” سئو نود ” است ، مقدار name در داخل ListItem با position یک ، برابر با سئو نود خواهد بود .

گزینه بعدی داخل name در داخل ListItem با position یک ، گزینه item است . در داخل item نیز باید آدرس صفحه‌ای که نام آن را داخل name نوشتیم قرار دهیم که در اینجا چون اولین آیتم مربوط به صفحه اصلی سایت است پس باید آدرس صفحه اصلی را قرار دهیم .

در این بردکرامب یک ListItem دوم نیز وجود دارد که البته اگر دقت داشته باشید در داخل آن قسمت item وجود ندارد ، به این دلیل که اگر توجه کرده باشید در داخل مسیر راهنما ، تمامی عناوین داخل لیست ، بجز آیتم آخر ، لینک بوده و قابل کلیک هستند ! بنابراین چون این مسیر راهنمای ما فقط 2 آیتم دارد و آیتم آخر مربوط به صفحه‌ای است که هم اکنون در داخل آن هستیم ، بنابراین نباید برای آن لینک قرار داده شود .

این کد که خدمتتان ارائه شده است ، یک کد کامل برای مسیر راهنما است که میتوانید با خیال راحت از آن استفاده کنید ، اما در ادامه یک نمونه کد دیگر نیز خدمتتان ارائه می‌شود که یک حالت کلی از قراردادهای استاندارد اسکیما توسط سایت schema.org است .

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books",
      "image": "http://example.com/images/icon-book.png"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors",
      "image": "http://example.com/images/icon-author.png"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://example.com/books/authors/annleckie",
      "name": "Ann Leckie",
      "image": "http://example.com/images/author-leckie-ann.png"
    }
  },{
    "@type": "ListItem",
    "position": 4,
    "item": {
      "@id": "https://example.com/books/authors/ancillaryjustice",
      "name": "Ancillary Justice",
      "image": "http://example.com/images/cover-ancillary-justice.png"
    }
  }]
}
</script>

در این کد نیز دقیقا همان آیتم های ارائه شده در کد اول وجود دارد و قسمت image اضافه شده است .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا