وبلاگ
Bread crumbs چیست؟ + تاثیر آن بر سئو سایت
Bread crumbs، راهی است برای کاربران که موقعیت مکانی خود را در یک وبسایت تجسم کنند. این یک نوار ناوبری ثانویه در طراحی سایت است که معمولاً به صورت پیوندهای متنی افقی ظاهر می شود. Bread crumbs ها با یک براکت زاویه دار از هم جدا شده اند. پیمایش Breadcrumb قابلیت یافتن صفحات فرود شما را بهبود می بخشد و به کاربران کمک می کند سریعتر به صفحات سطح بالاتر برسند.
تعریف ناوبری Breadcrumb
معنی لغوی “Bread crumbs” از افسانه معروف آلمانی هانسل و گرتل گرفته شده است. در این داستان، هانسل و گرتل خواهر و برادری هستند که خود را در یک جنگل رها شده می بینند و از پودر سوخاری (Bread crumbs) برای مشخص کردن مسیر خود استفاده می کنند تا بتوانند راه بازگشت را پیدا کنند. اما، این موضوع چه ارتباطی با وب سایت ها و طراحی وب دارد؟ نوار پیمایش Breadcrumb یک ویژگی است که معمولاً در بالای صفحه وب قرار دارد و به کاربر می گوید دقیقاً در چه صفحاتی بوده است و چگونه به کجا رسیده است.
سه ژانر ناوبری Bread crumbs
1. ناوبری Breadcrumbs مبتنی بر تاریخ.
این نوع پیمایش تمام مکانهایی را که در آن وبسایت بازدید کردهاید نمایش میدهد و اساساً دسترسی آسان به تاریخچه وبسایت خود را برای شما فراهم میکند.
این می تواند به ویژه زمانی مفید باشد که نام صفحات وب پیچیده باشد یا کاربران برای مدت طولانی در حال مرور باشند. به عنوان مثال، این صفحه اصلی > VoIP > راه حل های VoIP > Broadvoice > خدماتی مانند broadvoice trail به کاربران اجازه می دهد تا به راحتی در تاریخچه خود به عقب و جلو بپرند.
اما، این کمترین استفاده از نسخه پیمایش پودر سوخاری است زیرا به طور موثر فقط به عنوان یک ناوبری رو به جلو و عقب است که از قبل در نوار ابزار موجود است.
2. پیمایش Bread crumbs بر اساس سلسله مراتب.
این سناریو را در نظر بگیرید. شما یک کسب و کار کوچک هستید که به دنبال یافتن نرم افزاری هستید که به شما در سازماندهی سهام خود کمک کند. شما ردیابی موجودی را جستجو می کنید و نرم افزار را مطالعه می کنید. توضیح مفید است، اما می خواهید بدانید چه گزینه های جایگزینی دارید.
پیمایش بر اساس سلسله مراتب، صفحه وب ردیابی موجودی را که در حال حاضر در آن هستید نمایش می دهد، اما صفحه اصلی را نیز نمایش می دهد. این به کاربران امکان دسترسی سریع به پایگاه داده بسیار گسترده تری از اطلاعات یا محصولات را می دهد.
3. پیمایش بر اساس ویژگیها در برد کرامب.
این شکل از ناوبری Bread crumbs معمولاً در پلتفرم های تجارت الکترونیک نشان داده می شود. به عنوان مثال، فرض کنید در حال خرید ارتباطات مبتنی بر ابر و جستجوی خدماتی مانند Fuze بودید.
پیمایش مبتنی بر ویژگیها نه تنها محصول را فهرست میکند، بلکه فیلترها یا ویژگیهای اصلی آن، مانند مقیاسپذیری، کیفیت صدا یا قیمت نرمافزار را نیز فهرست میکند.
مزایای ناوبری Breadcrumb چیست؟
1. رتبه خود را در گوگل ارتقا دهید.
داشتن یک وب سایت با رتبه بالا برای هر کسب و کاری بسیار مهم است. گوگل در واقع از ناوبری Bread crumbs برای درک بهتر وب سایت شما و قرار دادن دارایی ها و مطالب شما در دسته بندی ها استفاده می کند. مطالعات نشان میدهد که ناوبری پودر سوخاری به طور قابل توجهی شانس شما را برای ظاهر شدن در صفحه اول گوگل افزایش میدهد.
2. این کار را برای کاربرانتان آسانتر کنید.
یکی از بدترین چیزها در تجارت، از دست دادن سرب است. شما برای بازاریابی ایمیلی، تبلیغات رسانه های اجتماعی و موارد دیگر هزینه کرده اید و در نهایت مشتری را به صفحه فرود خود رسانده اید. اما، پس از همه اینها، به دلیل تجربه کاربری ضعیف و ناوبری دشوار صفحه وب، آنها را ترک می کنند.
آمار نشان می دهد که:
تقریباً 90 درصد از کاربران می گویند که هرگز به وب سایتی که پیمایش یا استفاده از آن برایشان چالش برانگیز است باز نمی گردند.
تقریباً سه شرکت از چهار شرکت آنلاین شکست خورده، به دلیل داشتن تجربه کاربری وحشتناک این کار را انجام می دهند.
اما با وجود همه اینها، تنها حدود نیمی از شرکت های آنلاین تست تجربه کاربری کافی را انجام می دهند.
پیمایش Breadcrumb میتواند به کاربران نشان دهد که دقیقاً کجای وبسایت شما هستند و بسته به ترجیحاتشان میتواند به هدایت آنها به عقب یا جلو کمک کند. این باعث کاهش نرخ پرش می شود، یعنی درصد کاربرانی که بدون کلیک روی چیزی صفحه وب شما را ترک می کنند.
به جمع بندی
ناوبری Breadcrumb یک راه حل مفید برای هر کسب و کار آنلاین است. این یک ویژگی مجزا و در عین حال قدرتمند است که کاربران را تشویق می کند تا به اقدامات خود در وب سایت شما ادامه دهند. هرچه تجربه وب سایت کاربر بهتر باشد، شانس تکمیل خرید بیشتر است. بیایید سریعاً جمع بندی کنیم:
ناوبری Breadcrumb به یک مسیر مبتنی بر وب اشاره دارد که کاربران می توانند آن را به عقب یا جلو دنبال کنند تا به آنها کمک کند در وب سایت شما حرکت کنند.
سه نوع وجود دارد: تاریخچه، سلسله مراتب، و ناوبری بر اساس ویژگی. هر کدام متفاوت است و شما باید مناسب ترین گزینه را برای صنعت و تجارت خاص خود انتخاب کنید.
ناوبری Breadcrumb می تواند رتبه گوگل شما را بهبود بخشد و زمان کاربر شما را در وب سایت شما بسیار آسان تر کند.
نکات و مثالهای ناوبری Breadcrumb
1. فقط در صورتی از ناوبری پودر سوخاری استفاده کنید که برای ساختار سایت شما منطقی باشد.
ناوبری Breadcrumb ساختاری خطی دارد، بنابراین تنها در صورتی می خواهید از آن استفاده کنید که با سلسله مراتب وب سایت شما منطقی باشد. اگر صفحات سطح پایینتری دارید که از صفحات فرود مختلف قابل دسترسی هستند، استفاده از پیمایش خرده نان تنها باعث سردرگمی خوانندگانی میشود که از نقاط شروع مختلف به همان صفحات دسترسی دارند. علاوه بر این، اگر سایت شما نسبتاً ساده است و فقط چند صفحه دارد، احتمالاً نیازی به پیمایش خرده نان ندارید.
2. پیمایش پودر سوخاری خود را خیلی بزرگ نکنید.
پیمایش پودر سوخاری شما یک ابزار ثانویه برای نوار پیمایش اصلی شما است، بنابراین نباید در صفحه خیلی بزرگ یا برجسته باشد. برای مثال، در وبسایت DHL، نوار پیمایش اصلی آنها بزرگ و قابل تشخیص است، با ستونهایی مانند «اکسپرس» «بسته و تجارت الکترونیک» «لجستیک»، و غیره. | > حمل و نقل بار”. شما نمی خواهید کاربران شما ناوبری پودر سوخاری شما را به عنوان نوار ناوبری اصلی اشتباه بگیرند.
3. مسیر کامل ناوبری را در ناوبری خرده نان خود بگنجانید.
من «دانشجویان غیرمدرک دانشگاه الون» را در گوگل جستجو کردم تا به این صفحه فرود برسم، اما ایلان باهوش است که مسیر ناوبری کامل را شامل «خانه» و «پذیرشها» درج کند. اگر سطوح خاصی را کنار بگذارید، کاربران را گیج خواهید کرد و مسیر خرده نان چندان مفید به نظر نمی رسد. حتی اگر کاربران از صفحه اصلی شروع نکردهاند، میخواهید از همان ابتدا راهی آسان برای کاوش در سایت خود به آنها بدهید.
4. پیشرفت از بالاترین سطح به پایین ترین.
مهم است که پیمایش پودر سوخاری شما از چپ به راست خوانده شود، نزدیکترین پیوند به سمت چپ صفحه اصلی شما و نزدیکترین پیوند به سمت راست صفحه فعلی کاربر است. مطالعه ای توسط Nielsen Norman Group نشان داد که کاربران 80 درصد از زمان خود را صرف تماشای نیمه چپ صفحه و 20 درصد برای مشاهده نیمه سمت راست می کنند، که یک مورد قوی برای طراحی چپ به راست است. بعلاوه، پیوند نزدیک به سمت چپ به عنوان ابتدای زنجیره ظاهر می شود، بنابراین می خواهید صفحه بالاترین سطح شما باشد.
5. عناوین خرده نان خود را با عناوین صفحه خود هماهنگ نگه دارید.
برای جلوگیری از سردرگمی، باید با عناوین صفحه و پودر سوخاری خود سازگار بمانید، به خصوص اگر کلمات کلیدی خاصی را در آن عناوین هدف قرار می دهید. همچنین میخواهید عناوین خرده نان خود را به وضوح به صفحه پیوند دهید. اگر عنوان breadcrumb پیوندی ندارد، آن را روشن کنید. Nestle به طور موثر عناوین پودر سوخاری خود را برای مطابقت با عنوان صفحه برچسب گذاری می کند. برای مثال، «مناطق تأثیر و تعهد»، در پیمایش خرده نان به همان شکلی که در صفحه انجام میشود، خوانده میشود.
Nestle همچنین به خوبی پیوندها را از غیر پیوندها با رنگ های مختلف متمایز می کند – پیوندها آبی هستند، در حالی که غیر پیوندها خاکستری باقی می مانند.
6. با طراحی خلاق باشید.
پیمایش سنتی پودر سوخاری به این صورت است: صفحه اصلی > درباره ما > مشاغل. با این حال، اگر احساس می کنید طراحی متفاوت می تواند بیشتر برای مخاطبان شما جذاب باشد یا در سایت شما بهتر به نظر برسد، نیازی به دنبال کردن مسیر سنتی ندارید.
به عنوان مثال، Target از پیمایش خرده نان در صفحات محصولات خود استفاده می کند (زیرا چه کسی در بخش کفش مجازی گم نمی شود؟)، اما از نمادهای “/” و متن سیاه و خاکستری ساده استفاده می کند. در این مورد، تنوع طراحی ظریف برای زیبایی سایت آنها منطقی است.
7. آن را تمیز و بی نظم نگه دارید.
ناوبری خرده نان شما به سادگی یک کمک برای کاربر است و در حالت ایده آل نباید مورد توجه قرار گیرد مگر اینکه کاربر به دنبال آن باشد. به همین دلیل، شما نمی خواهید ناوبری خرده نان خود را با متن های غیر ضروری شلوغ کنید.
به عنوان مثال، Eionet می تواند بدون متن “شما اینجا هستید” کار کند. در حالی که متن برای مفید بودن، صفحه را درهم میریزد. با طراحی مناسب، ناوبری خرده نان باید بدون مقدمه به اندازه کافی قابل توجه باشد.
8. در نظر بگیرید که کدام نوع ناوبری پودر سوخاری برای سایت شما منطقی تر است.
چند نوع مختلف پودر سوخاری وجود دارد که می توانید از آنها استفاده کنید – مبتنی بر مکان، مبتنی بر ویژگی و مبتنی بر تاریخ. پودرهای سوخاری مبتنی بر مکان به کاربر نشان می دهد که در کجای سلسله مراتب سایت قرار دارد. نان خرده های مبتنی بر ویژگی به کاربران نشان می دهد که صفحه آنها در کدام دسته قرار می گیرد. در نهایت، پودرهای سوخاری مبتنی بر تاریخ به کاربران مسیر خاصی را که برای رسیدن به صفحه فعلی طی کرده اند نشان می دهد.
Bed Bath & Beyond از پیمایش مبتنی بر ویژگیهای خرده نان استفاده میکند تا به کاربران نشان دهد صفحه محصولشان در کدام دسته قرار میگیرد، بنابراین کاربران میتوانند برای بررسی موارد مشابه به «آشپزخانه» یا «لوازم کوچک» برگردند. این نوع ناوبری پودر سوخاری برای مشتریان Bed Bath & Beyond موثرتر است. زمانی که در حال ایجاد یک ناوبری پودر سوخاری هستید، در نظر بگیرید چه چیزی برای بازدیدکنندگان سایت شما مفیدتر است.
9. مخاطبان خود را بشناسید.
بهترین روشها در ناوبری پودر سوخاری، طراحان وب را ترغیب میکند که ناوبری را در بالای صفحه قرار دهند – اما اپل، یکی از با ارزشترین شرکتهای تمام دوران، با قرار دادن ناوبری پودر سوخاری خود در پایین سایت، از این منطق سرپیچی میکند. در نهایت، مهم است که مخاطب خود را بشناسید. مشتریان اپل معمولاً از فناوری آگاه هستند و اگر به آن نیاز داشته باشند، احتمالاً ناوبری را پیدا خواهند کرد. نیازهای مشتریان خود را در نظر بگیرید و اگر مطمئن نیستید، تست A/B را اجرا کنید.
ناوبری Breadcrumb در HTML و CSS
سوخاری ها نه تنها مفید هستند، بلکه به راحتی می توان آنها را با کمی کد HTML و CSS به وب سایت خود اضافه کرد.
بیایید با HTML شروع کنیم، که از آن برای ایجاد پیوندها استفاده خواهیم کرد. ساده ترین راه برای انجام این کار این است که پیوندهای خود را در یک عنصر لیست نامرتب (<ul>) سازماندهی کنید، به طوری که هر آیتم فهرست (<li>) تا آخرین مورد، که نمایانگر صفحه فعلی است، یک پیوند در سری breadcrumb دارد.
در اینجا یک الگوی HTML برای پودر سوخاری وجود دارد که می توانید از آن استفاده کنید:
<nav class=”breadcrumb” aria-label=”Breadcrumb” >
<ul>
<li><a href=”#URL”>صفحه سطح بالا</a></li>
<li><a href=”#URL”>صفحه سطح دوم</a></li>
<li><a href=”#URL”>صفحه سطح سوم</a></li>
<li>صفحه فعلی</li>
</ul>
</nav>
توجه کنید که چگونه فهرست نامرتب را در یک عنصر HTML <nav> (ناوبری) محصور کردهام و یک کلاس و یک برچسب ARIA را به تگ آغازین آن اضافه کردهام. این اختیاری است، اما کمک میکند صفحه شما برای صفحهخوانها و موتورهای جستجو در دسترستر باشد.
البته، این HTML به تنهایی کافی نیست – در حال حاضر، ما فقط یک لیست گلوله ای از پیوندها داریم. با افزودن CSS، میتوانیم به ظاهری که به دنبال آن هستیم دست پیدا کنیم. CSS زیر را در HTML بالا اعمال کنید:
ul { list-style: none; } /* حذف نقاط گلوله */
ul li { display: inline; } /* نمایش موارد لیست به صورت افقی */
/* بین موارد لیست یک براکت زاویه (>) قرار دهید */
ul li+li:قبل از {
محتوا: “>”;
بالشتک: 10 پیکسل؛
}
ul li a { text-decoration: none; } /* حذف خطوط زیر از پیوندها */
ul li a:hover { text-decoration: underline; } /* نشان دادن خط زیر روی ماوس */
با هم، این کد یک منطقه ناوبری پایه سوخاری ایجاد می کند که می تواند در هر سایتی استفاده شود – نتیجه نهایی را در زیر ببینید. من همچنین برای ظاهری تمیزتر، استایل اضافی اضافه کرده ام. برای اینکه ببینید پودر سوخاری بدون این سبک چگونه به نظر می رسد، کد را در پایین برگه CSS نظر دهید.
ناوبری Breadcrumb در Bootstrap CSS
Bootstrap CSS همچنین راهی برای ایجاد خرده نان بدون نیاز به افزودن CSS سفارشی ارائه می دهد. برای انجام این کار، از کامپوننت Breadcrumb مانند آن استفاده کنید. در اینجا یک مثال از مستندات Bootstrap 5 آورده شده است:
این فقط اصول اولیه ناوبری پودر سوخاری در بوت استرپ است – برای یادگیری تمام جزئیات، به مستندات پودر سوخاری Bootstrap مراجعه کنید.
طراحی برای کمک به کاربران برای حرکت در سایت شما
در نهایت، ناوبری Bread crumbs ابزاری موثر برای آسانتر کردن پیمایش سایت شما است، اما شما میخواهید بهترین شیوههای طراحی را دنبال کنید تا مطمئن شوید که از مفید بودن ابزار استفاده میکنید.