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

بریدکرامب (Breadcrumb) سایت چیست؟

بِرِد کرامب (Breadcrumb) یا همان «مسیر راهنما یا نشانگر صفحات» در سایت، یک نوار کوچک در بالای صفحه است که مسیر کاربر از صفحه اصلی تا صفحه فعلی را نشان می‌دهد.

 مثلا اگر در صفحه یک محصول باشید، مسیر به‌صورت «خانه > دسته‌بندی > محصول» نمایش داده می‌شود. این قابلیت باعث می‌شود کاربر راحت‌تر موقعیت خودش را در سایت بفهمد، سریع‌تر به صفحات قبلی برگردد و تجربه کاربری بهتری داشته باشد. همچنین برای سئو هم مفید است چون ساختار صفحات را برای گوگل شفاف‌تر می‌کند.

معنی لغوی Breadcrumb چیست؟

کلمه Breadcrumb از دو کلمه انگلیسی Bread (نان) و Crumbs (خرده/ریزه) تشکیل شده و به معنی "خرده نان" است. این اصطلاح از داستان هانسل و گرتل گرفته شده که برای پیدا کردن راه بازگشت به خانه، خرده‌های نان را در مسیر خود می‌ریختند. در انتها علت نام گذاری این قابلیت را توضیح داده ایم!

ویژگی‌ها و کاربردها در وب سایت

• ✔️ برید کرامب‌ها معمولاً به صورت یک ردیف افقی از لینک‌ها در بالای صفحه قرار می‌گیرند و با نمادی مانند (>) از هم جدا می‌شوند (مثال: خانه > دسته > زیردسته > صفحه فعلی)
• ✔️ هر یک از این مسیر یا لینک‌ها قابلیت کلیک کردن دارند و کاربر می‌تواند به راحتی به صفحات قبلی یا به سطوح بالاتر ساختار سایت (مانند صفحه اصلی یا دسته بندی) بازگردد.

انواع breadcrumb 

برد کرامب یا نشانگر صفحات به‌طور کلی سه نوع اصلی دارد که هر کدام هدف متفاوتی در مسیرنمایی (Navigation) سایت دارند:

 برید کرامب سلسله‌مراتبی  (Hierarchy-Based / Location-Based)

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

| مثلاً: صفحه اصلی > دسته‌بندی > زیر‌دسته > محصول .

برید کرامب بر اساس ویژگی یا مسیر جستجو  (Attribute-Based / Faceted)

بیشتر در سایت‌های فروشگاهی یا جستجوهای چندفیلتری دیده می‌شود و ویژگی‌هایی که کاربر انتخاب کرده را نمایش می‌دهد. 

| مثلاً: صفحه اصلی > لباس زنانه > رنگ > مشکی > سایز  M.  

3.    برید کرامب تاریخچه یا مسیر حرکت  (History-Based / Path)

مثل دکمه‌ی Back مرورگر عمل می‌کند و آخرین مسیرهایی که کاربر طی کرده را نشان می‌دهد، نه ساختار سایت!

|  برای مثال: صفحه اصلی > نتایج جستجو > محصول 1 > مقایسه > محصول 2

چرا باید از بردکرامب در سایت استفاده کنیم؟ اهمیت breadcrumb در سئو سایت

استفاده از بریدکرامب در سایت چند مزیت مهم دارد، به خصوص از دیدگاه سئو و تجربه کاربری:

1- بازگشت به عقب با یک کلیک!

  کاربر به راحتی می‌داند در کجای سایت شما قرار دارد و چقدر از صفحه اصلی فاصله گرفته است. همچنین می‌تواند با یک کلیک به سطوح بالاتر (دسته، زیردسته) بازگردد، بدون نیاز به استفاده از دکمه 5- بازگشت مرورگر یا منوی اصلی!

به خصوص در سایت‌های بزرگ با محتوای زیاد و ساختار پیچیده، از گم شدن کاربر در سایت جلوگیری می‌کند.

2- نجات دهنده سایت شما از نرخ پرش!

با فراهم کردن یک راه ساده برای گشت‌وگذار و کشف صفحات مرتبط، کاربران را ترغیب می‌کند که صفحات بیشتری را در سایت شما ببینند و در نتیجه مدت زمان بیشتری در سایت بمانند.

3-  لینک‌سازی داخلی در حالت خودکار!

بردکرامب‌ها نوعی لینک داخلی محسوب می‌شوند که به صورت خودکار، صفحات را به یکدیگر پیوند می‌دهند و ساختار منطقی سایت را تقویت می‌کنند.

4- راز درخشش در SERP(نتایج جستجو)!

اگر بردکرامب با استفاده از نشانه‌گذاری اسکیما (معمولاً  JSON-LD) پیاده‌سازی شود، گوگل می‌تواند این مسیر راهنما را مستقیماً در نتایج جستجو (SERP) به جای آدرس  URL  ساده نمایش دهد.

این نمایش جذاب‌تر، خواناتر و مفیدتر، باعث افزایش نرخ کلیک (CTR) می‌شود، چرا که کاربر قبل از ورود می‌فهمد این صفحه دقیقاً کجای سایت شما قرار دارد.

5- ساختاردهی سایت در سه سوت!

نشانگر صفحات نقشه و معماری سایت شما را به صورت واضح به خزنده‌های گوگل (Robots) نشان می‌دهند. این امر به آنها کمک می‌کند تا ساختار درونی سایت، روابط بین صفحات و اهمیت هر صفحه را بهتر درک کنند.

در نتیجه وقتی ربات‌ها بتوانند سریع‌تر و ساده‌تر ساختار سایت شما را درک کنند، روند خزش (Crawling) و ایندکس (Indexing) صفحات سایت بهبود می‌یابد.

چگونه برید کرامب را به سایت اضافه کنیم؟

همانطور که گفتیمر اضافه کردن مسیر راهنما یاBreadcrumb  به سایت، به کاربران کمک می‌کند تا موقعیت خود را در ساختار سلسله‌مراتبی سایت شما بفهمند و به بهبود تجربه کاربری و سئوی سایت کمک می‌کند.

روش‌های مختلفی برای افزودن بردکرامب وجود دارد که بسته به پلتفرم وب‌سایت شما (مثلاً وردپرس) متفاوت است.

در سایت‌های وردپرسی (با استفاده از افزونه‌ها)

اگر وب‌سایت شما با وردپرس ساخته شده است، ساده‌ترین و متداول‌ترین راه استفاده از افزونه‌های سئو است.

استفاده از افزونه  Yoast SEO

بسیاری از سایت‌های وردپرسی از Yoast SEO استفاده می‌کنند که قابلیت بردکرامب را نیز ارائه می‌کند:

1. نصب و فعال‌سازی Yoast SEO: اگر از قبل نصب ندارید، آن را از مخزن وردپرس نصب و فعال کنید.
2. تنظیمات بردکرامب:

• •  به پیشخوان وردپرس > سئو (Yoast SEO)  > ظاهر جستجو (Search Appearance) بروید.
• •  تب بردکرامب‌ها (Breadcrumbs)  را انتخاب کنید.
• •  گزینه‌ی "فعال‌سازی برید کرامب برای قالب شما" (Enable breadcrumbs for your theme) یا مشابه آن را روشن (On) کنید.
• •  تنظیمات دلخواه خود (مانند جداکننده، نمایش صفحه اصلی، متن لینک‌ها و...) را انجام داده و ذخیره کنید.

3. اضافه کردن کد به قالب: این مرحله کمی فنی‌تر است. برای اینکه بردکرامب‌ها در سایت نمایش داده شوند، باید یک قطعه کد PHP در فایل‌های قالب خود قرار دهید.

• •  به قسمت نمایش (Appearance) > ویرایشگر فایل‌های پوسته (Theme File Editor) بروید (توصیه می‌شود قبل از هر تغییری از سایت خود پشتیبان بگیرید).
• •  بسته به قالبتان، باید کد زیر را در فایل‌هایی مانند header.php  (برای نمایش در تمام سایت) ،single.php (برای نمایش در مطالب) یا  page.php  (برای نمایش در صفحات) و معمولاً بالاتر از تگ عنوان اصلی  (H1)  قرار دهید:

if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
 

توجه:  اگر نمی توانید کدنویسی کنید، بهتر است این کار را به یک متخصص بسپارید.

استفاده از افزونه  Rank Math

افزونه Rank Math نیز روشی مشابه و آسان برای فعال‌سازی بردکرامب دارد:

1. 1.  فعال‌سازی ماژول: بعد از نصب، مطمئن شوید که ماژول Breadcrumbs  در Rank Math فعال است.
2. 2.  تنظیمات: به Rank Math > تنظیمات عمومی (General Settings) > Breadcrumbs  بروید.
3. 3.  گزینه‌ی "فعال‌سازی تابع بردکرامب" (Enable breadcrumbs function) را فعال کنید و تنظیمات را ذخیره نمایید.
4. 4.  اضافه کردن کد: مانند Yoast SEO، باید قطعه کد لازم را به فایل‌های قالب اضافه کنید(که در مستندات Rank Math ارائه شده است).

استفاده از المنتور  (Elementor) 

اگر از افزونه صفحه‌ساز Elementor Pro  استفاده می‌کنید، معمولاً یک ویجت آماده برای بردکرامب دارد که می‌تواند با افزونه‌های سئو (مانند Yoast) هماهنگ شود. کافیست ویجت Breadcrumbs  را جستجو کرده و به صفحه‌تان اضافه کنید.

۲. استفاده از کدنویسی (برای سایت‌های غیر وردپرسی یا سفارشی)

اگر سایت شما وردپرسی نیست یا می‌خواهید نشانگر صفحات را به‌صورت دستی اضافه کنید، باید از کدهای HTML و استفاده از داده‌های ساختاریافته (Structured Data) که توسط گوگل توصیه شده‌اند، استفاده کنید.

برید کرامب‌ها معمولاً با یک لیست مرتب نشده (UL) یا مرتب شده (OL) به شکل زیر ساخته می‌شوند:

روش دستی با HTML و CSS:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">خانه</a></li>
    <li class="breadcrumb-item"><a href="/category">دسته‌بندی</a></li>
    <li class="breadcrumb-item active" aria-current="page">صفحه فعلی</li>
  </ol>
</nav>
 

CSS ساده برای استایل:

.breadcrumb {
  list-style: none;
  display: flex;
  gap: 5px;
}
.breadcrumb-item+ .breadcrumb-item::before {
  content: "›";
  padding: 0 5px;
}

داستان جذاب نامگذاری برد کرامب!

نامگذاری این ویژگی دقیقاً از داستان هانسل و گرتل الهام گرفته شده است. در داستان، هانسل و گرتل برای اینکه در جنگل راه بازگشت به خانه را گم نکنند، خرده‌های نان  (Breadcrumbs)  را پشت سر خود روی زمین می‌ریختند.

در دنیای وب نیز، بردکرامب‌ها دقیقاً همان نقش را ایفا می‌کنند. آن‌ها مانند "ردی از خرده‌های نان" عمل می‌کنند و مسیر طی شده را برای کاربر قابل مشاهده می‌کنند تا کاربر در ساختار پیچیده سایت "گم نشود" و بتواند به آسانی مسیر بازگشت خود را پیدا کند.

"داستان هانسل و گرتل (Hansel and Gretel)، که توسط برادران گریم گردآوری شده، در مورد خواهر و برادری است که با پدر هیزم‌شکن و نامادری بدجنس خود زندگی می‌کنند. در پی یک قحطی شدید، نامادری پدر را متقاعد می‌کند که بچه‌ها را به عمق جنگل ببرد و رها کند تا از شر هزینه‌های آن‌ها خلاص شوند. هانسل که از نقشه خبردار می‌شود، در بار اول با ریختن سنگریزه‌های سفید در طول مسیر، راه بازگشت به خانه را پیدا می‌کند. اما در تلاش دوم، چون نمی‌تواند از خانه خارج شود، مجبور می‌شود به‌جای سنگریزه، خرده‌های نان (Breadcrumbs) را پشت سرش بیندازد. متأسفانه، پرندگان جنگل تمام خرده‌های نان را می‌خورند و این دو کودک راه خانه را گم می‌کنند و در جنگل تنها می‌مانند.

بچه‌های گرسنه در اعماق جنگل، خانه‌ای عجیب پیدا می‌کنند که سقف و دیوارهای آن از شیرینی و آبنبات ساخته شده است. صاحب خانه یک جادوگر پیر و بدجنس است که کودکان را به دام می‌اندازد تا آن‌ها را چاق کرده و بخورد. جادوگر هانسل را در یک قفس زندانی می‌کند و گرتل را به خدمتکاری می‌گیرد. اما گرتل باهوش‌تر از آن است که فریب بخورد؛ او با حیله‌گری جادوگر را وادار می‌کند تا برای نشان دادن نحوه پخت‌وپز به داخل تنور خم شود و در همان لحظه، گرتل او را به داخل هل داده و در را می‌بندد. هانسل و گرتل با برداشتن گنجینه‌ها و طلاهای جادوگر، راه خود را به خانه پیدا می‌کنند و در کنار پدرشان که از مرگ نامادری بدجنس رنج می‌برده، با ثروت فراوان به خوبی و خوشی زندگی می‌کنند. این ردیابی ناموفق با "خرده‌های نان" است که به اصطلاح "بردکرامب" در طراحی وب الهام بخشید.

فراتک ارائه دهنده خدمات طراحی سایت و سئو

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

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