بخش قابل‌توجهی از تجربه کاربری و همچنین سئوی سایت، به جزئیاتی مانند استفاده از «بردکرامب» (Breadcrumbs) وابسته است. اگر هنوز از این قابلیت استفاده نمی‌کنید، باید بدانید که یک فرصت ارزشمند را از دست داده‌اید. بردکرامب‌ها هم تأثیر مثبتی بر سئو دارند و هم به کاربران کمک می‌کنند تا راحت‌تر در سایت شما حرکت کنند.
بردکرامب (Breadcrumbs) چیست؟
به‌زبان ساده، بردکرامب‌ها لینک‌های داخلی خودکاری هستند که به کاربر نشان می‌دهند در کجای سایت قرار دارد و چه فاصله‌ای با صفحه اصلی دارد. این لینک‌ها معمولاً در بالای صفحه یا دقیقاً زیر نوار ناوبری نمایش داده می‌شوند. این قابلیت کمک می‌کند اگر کاربر در مسیری دچار سردرگمی شد، به‌راحتی بتواند به صفحه قبلی بازگردد و مسیر خود را ادامه دهد.
بردکرامب‌ها همان‌طور که برای کاربر مفید هستند، ساختار سایت را نیز برای موتورهای جستجو شفاف می‌کنند. این موضوع باعث می‌شود خزنده‌های گوگل صفحات مختلف سایت را ساده‌تر شناسایی و بررسی کنند. وجود این لینک‌های داخلی خودکار به ایندکس بهتر سایت و در نتیجه بهبود رتبه آن در نتایج جستجو کمک می‌کند.
فرض کنید در سایت سون‌لرن به دنبال یک مقاله بوده‌اید و از طریق چند دسته‌بندی به آن رسیده‌اید. بردکرامب‌ها به شما نشان می‌دهند از چه دسته‌بندی‌هایی عبور کرده‌اید و در صورت نیاز، به‌سادگی می‌توانید به صفحات قبلی بازگردید و موارد موردنظر خود را دوباره بررسی کنید.
اگر از بردکرامب استفاده نمی‌کنید، زمان آن رسیده است که همین حالا دست‌به‌کار شوید و این قابلیت را در سایت خود به‌کار بگیرید؛ تا هم کاربران راحت‌تر در سایت شما حرکت کنند و هم رتبه سایتتان در موتورهای جستجو بهبود پیدا کند.
۴ نوع رایج از بردکرامب
همه بردکرامب‌ها شبیه هم نیستند و هرکدام برای هدف مشخصی طراحی شده‌اند. برای اینکه بهترین تجربه کاربری را در سایت خود ایجاد کنید، قبل از اضافه کردن بردکرامب‌ها لازم است بدانید کدام نوع برای سایت شما مناسب‌تر است.
۱. بردکرامب مبتنی بر سلسله مراتب (Hierarchy-Based)
این نوع، رایج‌ترین شکل بردکرامب است و به کاربر نشان می‌دهد در کجای ساختار سایت قرار دارد و چگونه می‌تواند به صفحه اصلی بازگردد.
مثال: خانه > وبلاگ > سرویس‌ها
۲. بردکرامب مبتنی بر ویژگی (Attribute-Based)
این نوع بیشتر در سایت‌های فروشگاهی استفاده می‌شود و نشان می‌دهد کاربر چه ویژگی‌هایی را انتخاب کرده است.
مثال: خانه > کفش > کوهنوردی > زنانه
یکی از نمونه‌های جالب آن در سایت eBay دیده می‌شود؛ جایی که اگر مسیر بردکرامب بیش از حد طولانی شود، فقط سه آیتم آخر نمایش داده می‌شود و بقیه زیر یک منوی سه‌نقطه‌ای مخفی می‌شوند.
۳. بردکرامب های پیش رو (Forward Breadcrumbs)
این نوع بردکرامب علاوه بر نمایش مسیر فعلی کاربر، پیش‌نمایشی از مسیرهای بعدی را نیز نشان می‌دهد. برای مثال، سایت Statista از این روش استفاده می‌کند و به کاربر این امکان را می‌دهد که بخش‌های دیگر سایت را نیز مشاهده کند.
۴. بردکرامب مبتنی بر تاریخچه (History-Based)
این نوع بردکرامب کمتر مورد استفاده قرار می‌گیرد و نشان می‌دهد کاربر چه صفحاتی را قبلاً در سایت مشاهده کرده است.
مثال: خانه > مقاله سئو ۱ > مقاله سئو ۲ > صفحه فعلی
با این حال، بهتر است از این نوع بردکرامب استفاده نکنید؛ زیرا ممکن است باعث سردرگمی کاربر شود. در این روش، مسیرهای مختلفی به کاربر نمایش داده می‌شود و هر بار ممکن است ساختار متفاوتی از بردکرامب دیده شود.
مزیت استفاده از بردکرامب
احتمالاً این سؤال برایتان پیش آمده که بردکرامب‌ها واقعاً چه فایده‌ای دارند. اگر هنوز در این تردید هستید که آیا بردکرامب‌ها ارزش پیاده‌سازی دارند یا نه (خبر خوب این است که قطعاً دارند)، ادامه مطلب را از دست ندهید.
۱. بردکرامب‌ها تجربه کاربری (UX) را بهبود می‌دهند
بردکرامب‌ها استفاده از سایت را ساده‌تر می‌کنند و کاربران را تشویق می‌کنند تا بخش‌های مختلف سایت را بیشتر بررسی کنند. برای مثال، فرض کنید در سایت نستله وارد صفحه تاریخچه شرکت شده‌اید.
با کمک بردکرامب‌ها می‌توانید به‌راحتی به صفحه «درباره ما» یا حتی صفحه اصلی بازگردید. به این ترتیب، کاربر سریع‌تر به محتوای موردنظر خود می‌رسد و احتمال ماندن او در سایت افزایش پیدا می‌کند.
۲. کاربران را مدت‌زمان بیشتری در سایت نگه می‌دارند
حتی اگر نرخ پرش (Bounce Rate) به‌صورت مستقیم روی رتبه‌بندی تأثیر نداشته باشد، نگه داشتن کاربران در سایت می‌تواند به سئوی شما کمک کند؛ زیرا نشان‌دهنده تعامل مناسب کاربران با سایت است. برای مثال، اگر در سایت آدیداس به دنبال خرید یک جفت کفش باشید، با استفاده از بردکرامب‌ها می‌توانید به‌سادگی به دسته‌بندی «بوت» برگردید و گزینه‌های دیگر را بررسی کنید. این موضوع باعث می‌شود کاربر به‌جای خروج از سایت، همچنان در همان سایت به جستجو ادامه دهد.
۳. افزایش سشن ها (بازدیدها)
مطالعه‌ای روی سایت Moz نشان داده است که اضافه کردن بردکرامب‌ها، در کنار چند تغییر دیگر مانند بهبود توضیحات متا، به شکل قابل‌توجهی تعداد سشن‌های سایت را افزایش داده است. این موضوع نشان می‌دهد حتی یک تغییر به‌ظاهر ساده مثل بردکرامب می‌تواند تأثیر مثبتی بر تجربه کاربری و عملکرد کلی سایت داشته باشد.
4. بردکرامب‌ها ساختار لینک‌های داخلی را بهبود می‌بخشند
بردکرامب‌ها صرفاً برای ناوبری کاربران نیستند، بلکه نقش مهمی در بهبود ساختار لینک‌های داخلی سایت دارند. گوگل از بردکرامب‌ها برای درک بهتر ارتباط بین صفحات سایت استفاده می‌کند، به‌ویژه صفحاتی که در عمق بیشتری از ساختار سایت قرار دارند.
در صورتی که از داده‌های ساختاریافته (Structured Data) برای بردکرامب‌ها استفاده شود، موتورهای جستجو می‌توانند معماری سایت را دقیق‌تر درک کنند.
5. نتایج غنی شده (Rich Snippets) توی نتایج جستجو
بردکرامب‌ها علاوه بر کمک به ناوبری کاربران، می‌توانند باعث نمایش نتایج غنی‌شده (Rich Snippets) در صفحه نتایج جستجو (SERP) شوند. البته این موضوع زمانی اتفاق می‌افتد که از داده‌های ساختاریافته استفاده شود و گوگل بتواند این اطلاعات را در نتایج جستجو نمایش دهد. در این حالت، کاربران راحت‌تر مسیر خود را در سایت پیدا می‌کنند و سریع‌تر به صفحات مرتبط دسترسی خواهند داشت.
[{
"@context": "https://schema.org",
"@id": "https://www.example.com/#breadcrump",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": "@id": "https://www.example.com/",
"name": "Home"
},
{
"@type": "ListItem",
"position": 2,
"item": "https://www.example.com/real-estate/",
"name": "Real estate"
},
{
"@type": "ListItem",
"position": 3,
"item": "https://www.example.com/en/paris/",
"name": "Paris"
},
{
"@type": "ListItem",
"position": 4,
"item": "https://www.example.com/en/paris/apartment/",
"name": "Apartment"
},
{
"@type": "ListItem",
"position": 5,
"item": "https://www.example.com/en/paris/apartment/affordable",
"name": "Affordable rentals Paris"
}
]
}]برای اینکه بهتر متوجه شویم کدهای JSON-LD مربوط به بردکرامب از چه بخش‌هایی تشکیل شده‌اند، در ادامه هر ویژگی را به‌زبان ساده توضیح می‌دهیم:
نکته مهم: نمی‌توانید صرفاً با قرار دادن داده‌های ساختاریافته، بدون نمایش واقعی بردکرامب‌ها به کاربر، گوگل را دور بزنید. اگر گوگل متوجه شود که این داده‌ها فقط برای موتورهای جستجو استفاده شده‌اند و کاربر امکان مشاهده آن‌ها را ندارد، ممکن است با جریمه مواجه شوید. البته این موضوع به‌تنهایی باعث افت رتبه نمی‌شود، اما سایت شما دیگر در نتایج جستجو، Rich Snippets (نتایج غنی) دریافت نخواهد کرد.
قانون طلایی این است که هر کدی که روی سایت استفاده می‌کنید، باید واقعاً وجود داشته باشد و کاربر نیز بتواند آن را مشاهده کند.
آموزش جامع پیاده‌سازی Breadcrumb در سایت
این راهنما به شما یاد می‌دهد Breadcrumb را به‌صورت اصولی، استاندارد و سئوپسند روی سایتتان پیاده‌سازی کنید؛ مستقل از اینکه سایت شما وردپرس است یا کدنویسی اختصاصی.
مرحله ۱: تعیین ساختار Breadcrumb (قبل از کدنویسی)
قبل از نوشتن حتی یک خط کد، باید این سؤال‌ها را جواب بدهید:
- صفحات سایت شما سلسله‌مراتب دارند یا نه؟
- هر صفحه دقیقاً یک والد مشخص دارد یا چندتا؟
- مسیر رسمی هر صفحه چیست؟
قانون طلایی
Breadcrumb باید مسیر ساختاری سایت را نشان دهد، نه مسیر ورود کاربر.
مثال ساختار درست
- خانه
- دسته
- زیردسته
- صفحه نهایی
اگر این ساختار مشخص نباشد، Breadcrumb اشتباه خواهد شد حتی اگر کد درست باشد.
مرحله ۲: مشخص کردن مسیر Breadcrumb برای هر نوع صفحه
برای هر نوع صفحه، یک الگوی ثابت تعریف کن:
صفحه دسته:
خانه > دستهصفحه زیردسته:
خانه > دسته > زیردستهصفحه مقاله یا محصول:
خانه > دسته > زیردسته > صفحه
نکته مهم:
اگر یک صفحه در چند دسته است، فقط یک مسیر رسمی انتخاب کن و همیشه همان را نمایش بده.
مرحله ۳: پیاده‌سازی HTML استاندارد Breadcrumb
این ساده‌ترین و پایه‌ای‌ترین نسخه است:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li><a href="/">خانه</a></li>
<li><a href="/blog/">بلاگ</a></li>
<li><a href="/blog/seo/">سئو</a></li>
<li aria-current="page">آموزش Breadcrumb</li>
</ol>
</nav>نکات اجباری
- استفاده از <nav>
- استفاده از <ol> (نه div)
- آخرین آیتم لینک نباشد
- aria-current="page" برای صفحه فعال
مرحله ۴: استایل‌دهی (حداقلی و امن)
CSS ساده و استاندارد:
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 14px;
}
.breadcrumb li::after {
content: ">";
margin: 0 6px;
}
.breadcrumb li:last-child::after {
content: "";
}Breadcrumb نباید جلب توجه کند؛
فقط باید واضح و خوانا باشد.
مرحله ۵: اضافه کردن اسکیما Breadcrumb (بخش حیاتی سئو)
بدون این مرحله، Breadcrumb شما برای گوگل ناقص است.
اسکیما استاندارد JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "خانه",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "بلاگ",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "سئو",
"item": "https://example.com/blog/seo/"
},
{
"@type": "ListItem",
"position": 4,
"name": "آموزش Breadcrumb",
"item": "https://example.com/blog/seo/breadcrumb/"
}
]
}
</script>قوانین غیرقابل‌مذاکره
- position از ۱ شروع شود
- URLها canonical باشند
- اسکیما با Breadcrumb نمایشی یکسان باشد
مرحله ۶: داینامیک‌سازی Breadcrumb (منطق تولید)
اگر سایت شما CMS یا فریم‌ورک دارد، Breadcrumb باید خودکار ساخته شود.
الگوریتم ساده
1. صفحه فعلی را بگیر
2. والد آن را پیدا کن
3. همین‌طور ادامه بده تا خانه
4. لیست را برعکس کن
5. خروجی HTML + JSON-LD بساز
مرحله ۷: پیاده‌سازی در وردپرس (منطق صحیح)
منطق استاندارد وردپرس
نوشته:
خانه > دسته والد > دسته > نوشته- برگه:
خانه > برگه والد > برگهنکته مهم
اگر از افزونه استفاده می‌کنی:
- حتماً خروجی HTML و Schema را بررسی کن
- بسیاری از افزونه‌ها اسکیما ناقص یا اشتباه می‌سازند
مرحله ۸: پیاده‌سازی در سایت اختصاصی / فریم‌ورک‌ها
در لاراول، ری‌اکت، نکست یا هر CMS اختصاصی:
- Breadcrumb را در Layout اصلی بگذار
- داده مسیر را از Backend بفرست
- اسکیما را بر اساس همان داده تولید کن
- منبع داده باید یکی باشد؛ نمایش و اسکیما جداگانه محاسبه نشوند.
اشتباهات رایج در استفاده از بردکرامب ها برای سئو
استفاده از بردکرامب‌ها یکی از راه‌های ساده و مؤثر برای بهبود سئوی سایت و تجربه کاربری است. اما اگر به‌درستی پیاده‌سازی نشوند، ممکن است به‌جای سود، به سایت آسیب بزنند. در ادامه، چند اشتباه رایج که باید از آن‌ها دوری کنید آورده شده است:
۱. نه خیلی بزرگ، نه خیلی کوچیک - اندازه مناسب رو انتخاب کن
بردکرامب‌ها باید به‌راحتی قابل مشاهده باشند، اما نه آن‌قدر بزرگ که مزاحم محتوا شوند. استفاده از فونتی کمی کوچک‌تر از متن اصلی مشکلی ایجاد نمی‌کند، اما اگر بیش از حد کوچک باشد، به‌خصوص در موبایل، خوانایی آن کاهش پیدا می‌کند. بهترین محل نمایش بردکرامب‌ها، بالای صفحه، زیر تصویر اصلی (Hero Image) یا درست بالای عنوان H1 است.
۲. تکرار منوی ناوبری
بردکرامب‌ها نباید همان کاری را انجام دهند که منوی ناوبری انجام می‌دهد. اگر بردکرامب‌ها صرفاً نسخه‌ای از منوی اصلی سایت باشند، ارزش افزوده‌ای ایجاد نمی‌کنند و فقط باعث پیچیدگی بیشتر کد می‌شوند.
۳. جایگزینی کامل منوی ناوبری با بردکرامب ها
بردکرامب‌ها به‌تنهایی نمی‌توانند جایگزین منوی ناوبری شوند؛ آن‌ها مکمل هستند، نه جایگزین. منوی اصلی باید همچنان حفظ شود و بردکرامب‌ها صرفاً برای راحتی بیشتر کاربر به آن اضافه شوند.
۴. انتخاب نوع درست بردکرامب
بردکرامب‌های مبتنی بر موقعیت (Location-based) رایج‌ترین نوع هستند، اما لزوماً برای همه سایت‌ها مناسب نیستند. اگر سایت شما ساختار دسته‌بندی مشخصی ندارد، استفاده از بردکرامب‌های مبتنی بر تاریخچه ممکن است انتخاب بهتری باشد.
چطور در وردپرس بردکرامب اضافه کنیم؟
بردکرامب‌ها ابزاری بسیار کاربردی هستند؛ هم برای کاربران و هم برای موتورهای جستجو. خوشبختانه اضافه کردن آن‌ها به سایت کار پیچیده‌ای نیست و روش‌های مختلفی دارد. در ادامه چند راه ساده برای افزودن بردکرامب به سایت آورده شده است:
- استفاده از Yoast SEO: اگر از قبل افزونه Yoast را نصب کرده‌اید، اضافه کردن بردکرامب‌ها فقط با چند کلیک ساده امکان‌پذیر است. کافی است وارد حساب کاربری خود شوید و مراحل مربوط به فعال‌سازی بردکرامب را انجام دهید.
- استفاده از افزونه های وردپرس: در وردپرس افزونه‌های متعددی برای افزودن بردکرامب وجود دارد. یکی از افزونه‌های محبوب و ساده، Breadcrumb NavXT است که بردکرامب‌های مبتنی بر موقعیت ایجاد می‌کند و امکان شخصی‌سازی آسان را نیز فراهم می‌سازد.
- افزونه WooCommerce Breadcrumb: اگر سایت فروشگاهی دارید و از ووکامرس استفاده می‌کنید، می‌توانید از افزونه WooCommerce Breadcrumb بهره ببرید. این افزونه به شما اجازه می‌دهد بردکرامب‌های ووکامرس را مطابق سلیقه خود استایل‌دهی و تنظیم کنید.
- ویژگی های داخلی: در برخی موارد، قالب وردپرس یا سایت‌ساز مورد استفاده، به‌صورت پیش‌فرض قابلیت بردکرامب را دارد. همچنین پلتفرم‌هایی مانند Shopify، Wix یا Squarespace نیز امکان افزودن بردکرامب را از طریق تنظیمات خود فراهم می‌کنند.
سوالات متداول
۱. بردکرامب چیست و چه فایده‌ای دارد؟
بردکرامب‌ها مجموعه‌ای از لینک‌های ناوبری هستند که به کاربران نشان می‌دهند در کجای سایت قرار دارند و چگونه می‌توانند به صفحات قبلی بازگردند. این ویژگی باعث کاهش سردرگمی کاربران و بهبود تجربه گشت‌وگذار در سایت می‌شود. علاوه بر این، بردکرامب‌ها به بهبود سئو نیز کمک می‌کنند و درک ساختار سایت را برای موتورهای جستجو ساده‌تر می‌سازند.
۲. بردکرامب چگونه به سئو کمک می‌کند؟
بردکرامب‌ها به موتورهای جستجو نشان می‌دهند که صفحات سایت چگونه به یکدیگر مرتبط هستند و این موضوع فرآیند ایندکس شدن را بهبود می‌دهد. در صورت استفاده از داده‌های ساختاریافته (Structured Data)، ممکن است گوگل بردکرامب‌ها را به‌صورت نتایج غنی (Rich Snippets) در صفحه نتایج جستجو نمایش دهد.
۳. آیا بردکرامب‌ها جای منوی اصلی سایت را می‌گیرند؟
خیر، بردکرامب‌ها یک ابزار کمکی هستند و نباید جایگزین منوی اصلی سایت شوند. آن‌ها فقط مسیر ناوبری ساده‌تری در اختیار کاربران قرار می‌دهند تا راحت‌تر موقعیت خود را در سایت تشخیص دهند. منوی اصلی همچنان باید حفظ شود.
۴. کدام نوع بردکرامب برای سایت من مناسب است؟
این موضوع به ساختار سایت شما بستگی دارد. اگر سایت ساختاری سلسله‌مراتبی و دسته‌بندی‌شده دارد، بردکرامب‌های مبتنی بر مکان (Location-based) بهترین گزینه هستند. اما اگر ساختار مشخصی وجود ندارد، بردکرامب‌های مبتنی بر تاریخچه ممکن است انتخاب مناسب‌تری باشند.
۵. چگونه بردکرامب‌ها را در وردپرس اضافه کنم؟
در صورت استفاده از افزونه Yoast، می‌توانید به‌راحتی از بخش تنظیمات این افزونه، بردکرامب‌ها را فعال کنید. افزونه‌های دیگری مانند Breadcrumb NavXT نیز وجود دارند که می‌توانید با کمک آن‌ها این قابلیت را به سایت خود اضافه کنید.
جمع بندی
بردکرامب‌ها را می‌توان مانند کره روی نان در نظر گرفت؛ عنصری که سایت را خوش‌دست‌تر و دسترسی به آن را ساده‌تر می‌کند. هرچند بردکرامب‌ها تضمینی برای جهش بزرگ در رتبه نتایج جستجو نیستند، اما هم برای کاربران ارزشمند هستند و هم برای موتورهای جستجو.
نکته مثبت اینجاست که اضافه کردن بردکرامب، به‌ویژه با افزونه‌هایی مانند Yoast، بسیار ساده است و با چند کلیک می‌توانید تجربه کاربری سایت خود را بهبود دهید و احتمال دیده شدن بهتر در نتایج جستجو را افزایش دهید.
