Breadcrumb مسیر کوتاهی است که جای صفحه را در ساختار سایت نشان می‌دهد و راه برگشت به سطح بالاتر می‌دهد. این مسیر با دکمه Back مرورگر یا تاریخچه تمام کلیک‌های کاربر یکسان نیست. در سایت محتوایی یا فروشگاه چندسطحی می‌تواند کمک کند، اما برای هر صفحه ساده ضروری نیست. پیش از افزودن آن، ببینید ساختار اطلاعات واقعاً سلسله‌مراتب قابل فهم دارد یا فقط چند پیوند تزئینی کنار هم قرار می‌گیرند.
برای مثال فرضی، کاربر از موتور جست‌وجو وارد یک مقاله آموزشی می‌شود. او شاید صفحه دسته را ندیده باشد و نداند محتوای مشابه کجاست. مسیری مانند خانه، آموزش و عنوان مقاله می‌تواند زمینه بدهد. مسیر باید با رابطه واقعی صفحه‌ها سازگار باشد. اگر فقط همان URL را با علامت جداکننده نمایش دهید، بخش‌های فنی نشانی ممکن است هیچ معنایی برای کاربر نداشته باشند. نام‌گذاری و مقصد پیوندها بخشی از طراحی‌اند.
مسیر ساختاری را از تاریخچه جدا کنید
کاربری که از جست‌وجو، اعلان یا لینک مستقیم می‌آید، تاریخچه مشابهی با دیگران ندارد. Breadcrumb ساختاری باید در این حالت هم معنی داشته باشد. اگر مسیر را از کلیک‌های قبلی بسازید، ممکن است برای یک صفحه چند نمایش نامطمئن ایجاد شود. برای سایت دارای چند دسته، مسیر مرجع یا قاعده انتخاب را مشخص کنید. این تصمیم باید با ساختار محتوا و نیاز پیدا کردن اطلاعات هماهنگ باشد، نه صرفاً داده موجود در مرورگر.
تکنیک G65 در W3C کاربرد مسیر برای نمایش جای صفحه یا مسیر پیموده‌شده را توضیح می‌دهد. در محصول خود باید روشن کنید کدام معنا را انتخاب کرده‌اید. ترکیب مبهم این دو می‌تواند انتظار نادرست بسازد. ساختار سایت محتوایی برای تعیین دسته و رابطه صفحه‌ها مرتبط است. Breadcrumb نباید جای اصلاح ساختار نامفهوم را بگیرد.
نام‌ها باید مقصد را روشن کنند
متن هر پیوند را با نام قابل فهم صفحه یا دسته بنویسید. شماره داخلی، Slug خام یا واژه کوتاه مبهم معمولاً زمینه کافی نمی‌دهد. اگر عنوان مقاله طولانی است، می‌توانید نام کوتاه و معنی‌دار انتخاب کنید، به شرط آنکه صفحه فعلی اشتباه فهمیده نشود. نام دسته باید در ناوبری و Breadcrumb تا حد ممکن یکسان باشد. تغییر نام برای زیبایی، بدون هماهنگی محتوا، می‌تواند دو تصور از یک بخش بسازد.
سطح‌های غیرضروری را اضافه نکنید. نمایش هر بخش فنی URL ممکن است مسیر را طولانی کند بدون اینکه مقصد مفیدی داشته باشد. هر سطح باید صفحه‌ای واقعی و قابل استفاده داشته باشد یا متن آن نقش روشنی داشته باشد. در مثال مقاله، دسته‌ای که خالی یا حذف شده است مقصد مناسبی نیست. هنگام تغییر ساختار، مسیر و لینک‌ها را با هم اصلاح کنید تا کاربر با پیوند قدیمی روبه‌رو نشود.
صفحه فعلی را از پیوندهای قبلی متمایز کنید
در مسیر، مقصدهای بالاتر باید قابل انتخاب باشند و صفحه فعلی مشخص باشد. می‌توانید عنوان فعلی را متن غیرپیوندی نمایش دهید. اگر پیوند است، وضعیت current را درست اعلام کنید. فقط رنگ کم‌رنگ برای بیان موقعیت کافی نیست، به‌ویژه وقتی کنتراست را کاهش می‌دهد. کاربر باید بفهمد کدام متن جای فعلی اوست و کدام او را به سطح دیگر می‌برد. این تفاوت در متن و ساختار معنایی نیز اهمیت دارد.
الگوی Breadcrumb در W3C APG قرار دادن مسیر در ناحیه navigation دارای نام و استفاده مناسب از aria-current را توضیح می‌دهد. برای فهرست معمول پیوندها، رفتار پیچیده Menu لازم نیست. ترتیب Tab و Focus باید طبیعی بماند. جداکننده تزئینی نباید مانند مقصد مستقل خوانده شود یا در هر حرکت، اطلاعات اضافی و تکراری به صفحه‌خوان بدهد.
نمونه کامل ساختار قابل اجرا
نمونه زیر یک فایل مستقل HTML است و وابستگی یا مرحله نصب ندارد. آن را با نام breadcrumb-demo.html ذخیره و در مرورگر باز کنید. برای اینکه تمام مقصدها در همین فایل موجود باشند، پیوندهای خانه و راهنما به بخش‌های نمایشی همان صفحه می‌روند. در سایت واقعی، این مقصدها باید URL صفحه‌های واقعی باشند. متن فارسی، نام navigation و صفحه فعلی در ساختار مشخص‌اند و جداکننده با CSS تزئینی ساخته شده است.
<!doctype html>
<html lang="fa" dir="rtl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>نمونه مسیر راهنما</title>
<style>
body {font:1rem/1.9 system-ui,sans-serif;max-width:54rem;margin:2rem auto;padding:0 1rem;color:#19212c;background:#fff}
nav ol {display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0}
nav li+li::before {content:"/";margin-inline-end:.5rem;color:#555}
a {color:#124a9c;text-underline-offset:.2em}
a:focus-visible {outline:3px solid #b05000;outline-offset:3px}
section {padding-block:1rem;border-bottom:1px solid #bbb}
</style>
<body>
<nav aria-label="مسیر راهنما">
<ol>
<li><a href="#home">خانه</a></li>
<li><a href="#guides">راهنماها</a></li>
<li><span aria-current="page">شناخت مسیر صفحه</span></li>
</ol>
</nav>
<main>
<h1>شناخت مسیر صفحه</h1>
<p>این صفحه نمایشی، ساختار Breadcrumb را نشان می‌دهد.</p>
<section id="home"><h2>خانه نمایشی</h2><p>مقصد پیوند خانه در همین نمونه.</p></section>
<section id="guides"><h2>راهنماهای نمایشی</h2><p>مقصد پیوند دسته در همین نمونه.</p></section>
</main>
</body>
</html>
این فایل نمونه ساختار و نمایش است، نه یک سایت چندصفحه‌ای یا پیاده‌سازی SEO. هدف آن دیدن رابطه فهرست، پیوند و عنوان فعلی است. برای محصول واقعی، منطق تولید مسیر باید از داده معتبر محتوا بیاید. اگر مسیر دستی در چند محل تکرار شود، با تغییر دسته ممکن است ناسازگار بماند. بهتر است منبع مشترک داشته باشد و متن قابل مشاهده با اطلاعات ساختاریافته مرتبط هماهنگ باشد.
موبایل به حفظ زمینه نیاز دارد
در صفحه کوچک، مسیر طولانی می‌تواند چند خط شود یا فضا بگیرد. پیش از مخفی کردن سطح‌ها، ببینید کدام بخش برای برگشت مهم است. نمایش سطح والد و صفحه فعلی گاهی کافی است، اما تصمیم به ساختار بستگی دارد. اگر از منوی بازشونده برای سطح‌های میانی استفاده می‌کنید، نام و رفتار دسترسی آن را کامل طراحی کنید. سه نقطه بدون توضیح، به‌تنهایی مقصد یا امکان انتخاب را روشن نمی‌کند.
متن را آن‌قدر کوچک نکنید که فقط در یک خط جا شود. شکستن خط با فاصله و خوانایی مناسب می‌تواند بهتر از حذف معنا باشد. Mobile First و نوشتار فارسی به این تصمیم مرتبط‌اند. در راست‌به‌چپ، جهت جداکننده و ترتیب منطقی را با محتوا هماهنگ کنید. ظاهر مسیر نباید باعث شود کاربر ترتیب والد و فرزند را برعکس بفهمد.
Breadcrumb جای ناوبری اصلی را نمی‌گیرد
این مسیر معمولاً فقط چند سطح مرتبط را نشان می‌دهد، نه همه گزینه‌های سایت را. کاربر همچنان ممکن است به جست‌وجو، منوی اصلی یا پیوند محتوای مرتبط نیاز داشته باشد. اگر قرار است میان موارد هم‌سطح جابه‌جا شود، الگوی دیگری می‌تواند مناسب‌تر باشد. افزودن همه همسایه‌ها به Breadcrumb، نقش آن را مبهم می‌کند. هر جزء ناوبری باید وظیفه مشخصی داشته باشد و اطلاعات تکراری بی‌دلیل نسازد.
در صفحات فرایندی مانند ثبت‌نام چندمرحله‌ای، Stepper با مسیر دسته‌بندی یکسان نیست. مرحله‌های فرم درباره پیشرفت یک کارند و ممکن است شرط یا اعتبارسنجی داشته باشند. آن‌ها را صرفاً به شکل Breadcrumb نمایش ندهید مگر رفتار و معنی واقعاً روشن باشد. طراحی فرم در این بخش مرتبط است. شباهت ظاهری چند واژه و جداکننده، معنای تعامل را تعیین نمی‌کند.
تغییر دسته را همراه با مسیر بررسی کنید
وقتی یک محتوا به دسته دیگری منتقل می‌شود، عنوان والد، مقصد و پیوندهای مرتبط باید از همان تصمیم پیروی کنند. اگر چند بخش سایت اطلاعات دسته را جدا نگه می‌دارند، احتمال ناسازگاری بیشتر می‌شود. مسئول منبع داده را روشن کنید و وضعیت حذف یا ادغام دسته را هم در نظر بگیرید. در سایت دارای چند زبان، مقصد باید تا حد امکان در همان زبان باقی بماند یا تغییر زبان را آشکار کند. کاربر نباید از یک مسیر فارسی وارد دسته نامرتبط شود فقط چون شناسه قدیمی هنوز در قالب مانده است. نگهداری مسیر بخشی از نگهداری ساختار محتواست.
Structured Data باید با مسیر واقعی هماهنگ باشد
راهنمای BreadcrumbList در Google درباره معرفی مسیر ساختاریافته توضیح می‌دهد. داده باید نام، ترتیب و مقصد معتبر داشته باشد. قرار دادن آن به معنای تضمین رتبه یا نمایش مشخص در همه دستگاه‌ها نیست. مسیر نمایشی و داده ساختاریافته را از اطلاعات واقعی تولید کنید و دسته خیالی یا عنوان تبلیغاتی نامرتبط نسازید. سیاست و نمایش موتور جست‌وجو می‌تواند تغییر کند.
برای شروع، ساختار محتوا و هدف برگشت را روشن کنید، سپس مسیر ساده و قابل دسترس بسازید. در بازبینی ببینید کاربر جای صفحه را می‌فهمد و به سطح مورد نظر می‌رسد یا نه. تعداد پیوند یا وجود Schema به‌تنهایی معیار کافی نیست. تعریف شاخص به سنجش مرتبط کمک می‌کند. Breadcrumb باید زمینه و راه حرکت بدهد؛ اگر در ساختار کمکی نمی‌کند، افزودن آن فقط به خاطر عادت طراحی ضروری نیست.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!