Breadcrumb — bu \"non ushlash\" navigatsiya. Sahifaning yuqori qismida \"Bosh sahifa › Hosting › WordPress hosting\" kabi yo'l ko'rsatadi. Bu foydalanuvchiga sayt strukturasini ko'rsatish va yuqori darajaga oson qaytish imkonini beradi. Breadcrumb kichik element, lekin UX'ga katta ta'sir qiladi — ayniqsa katta saytlarda.
Nima uchun breadcrumb kerak
Birinchidan — orientation. Foydalanuvchi qaerda ekanini biladi. Ayniqsa qidiruvdan to'g'ridan-to'g'ri chuqur sahifaga kelganda.
Ikkinchidan — navigation. Yuqori darajaga oson qaytish. Browser back tugmasidan ko'ra aniqroq.
Uchinchidan — SEO. BreadcrumbList Schema bilan Google qidiruv natijasida URL o'rniga breadcrumb ko'rinadi.
Breadcrumb turlari
Location-based — sayt strukturasi bo'yicha. \"Bosh sahifa › Hosting › WordPress hosting\". Eng tarqalgan.
Attribute-based — mahsulot atributlari bo'yicha. \"Erkaklar › Poyabzal › Sport › Adidas\". E-commerce uchun.
Path-based — foydalanuvchi yo'li bo'yicha (qaysi sahifa orqali kelganini ko'rsatadi). Kam ishlatiladi, chunki chalkash.
Breadcrumb dizayn
Joylashish: sahifa yuqorisida, header'dan keyin, asosiy kontent boshida.
Vizual: oddiy, kichik, neutral rang. \"› \" yoki \"/\" yoki \"-\" ajratuvchi.
Oxirgi element — joriy sahifa, klik bo'lmaydi, biroz to'qroq rang.
Boshqa elementlar — link, hover'da underline yoki rang o'zgaradi.
HTML implementatsiya
Semantic HTML: <nav aria-label=\"breadcrumb\"> bilan o'rab oling. <ol> ichida <li> elementlar.
<nav aria-label=\"breadcrumb\">
<ol>
<li><a href=\"/\">Bosh</a></li>
<li><a href=\"/hosting\">Hosting</a></li>
<li aria-current=\"page\">WordPress</li>
</ol>
</nav>
BreadcrumbList Schema
SEO uchun JSON-LD schema. Google qidiruv natijasida URL o'rniga breadcrumb ko'rsatadi.
Bu CTR'ni 15-20% oshiradi va foydalanuvchi sahifa qaysi kategoriyaga tegishli ekanligini darrov tushunadi.
Mobile breadcrumb
Mobile'da breadcrumb kichik joy egallashi shart. Variantlar: 1. Faqat orqaga link \"› Hosting\" (oldingi sahifa). 2. To'liq breadcrumb (kichik shrift bilan). 3. Hide va menu icon bilan ochish.
Strategiya: e-commerce uchun to'liq, blog uchun minimal yetadi.
Breadcrumb va sayt strukturasi
Breadcrumb URL strukturasiga mos kelishi yaxshi. URL: sayt.uz/blog/seo/title-tag → Breadcrumb: \"Bosh › Blog › SEO › Title tag\".
Bu Google va foydalanuvchiga sayt strukturasi haqida konsistent ma'lumot beradi.
Breadcrumb chuqurlik
Breadcrumb darajalar soni: optimal 3-5. 6+ chuqur sahifalar foydalanuvchi adashishi mumkin.
Agar sayt 6+ darajali bo'lsa — sayt strukturasini qayta ko'rib chiqing. Yoki o'rta darajalarni \"...\" bilan qisqartiring (\"Bosh › ... › WordPress\").
Joriy sahifa ko'rsatish
Breadcrumb oxirgi elementi — joriy sahifa. Klikable bo'lmaydi. Biroz to'qroq rang bilan ko'rsatish.
aria-current=\"page\" — accessibility uchun, screen reader bilishi shart.
Breadcrumb va kategoriya sahifa
Kategoriya sahifa (Bosh › Blog › SEO) breadcrumb'i — foydalanuvchi shu kategoriyaga tegishli boshqa post'larni ko'rishi mumkin.
SEO kategoriya bo'limini bossa — barcha SEO postlar ro'yxati.
Breadcrumb font va o'lcham
Body matnidan kichik. Body 16px bo'lsa, breadcrumb 13-14px. Lekin o'qishga qulay bo'lishi shart.
Color: link uchun brand rangi yoki neutral kulrang. Hover'da to'qroq.
Breadcrumb va search
Foydalanuvchi Google qidiruvdan chuqur sahifaga kelsa — breadcrumb darhol \"qaerda men\" deb javob beradi.
Yuqori sahifalarni o'rganishni xohlash holatida — breadcrumb orqali oson navigation.
Breadcrumb va home link
Breadcrumb birinchi elementi — \"Bosh sahifa\" yoki home icon. Foydalanuvchi har vaqt bosh sahifaga qaytish mumkin.
Common breadcrumb xato
1. Breadcrumb yo'q (katta sayt'da).
2. URL bilan mos kelmaydi.
3. Juda chuqur (8+ daraja).
4. BreadcrumbList Schema yo'q.
5. Mobile'da yashirish.
6. Joriy sahifa link bo'lib qoladi.
Breadcrumb tools
WordPress: Yoast SEO, Rank Math (Schema bilan), NavXT plugin.
Custom: HTML/CSS bilan oddiy implementatsiya. PHP/JS bilan dinamik.
Breadcrumb shart bo'lmagan saytlar
Kichik sayt (3-5 sahifa). Landing page (faqat bitta sahifa). Bosh sahifa (foydalanuvchi allaqachon yuqorida).
Sayt.uz breadcrumb amaliyot
Sayt.uz har sahifada breadcrumb mavjud (bosh sahifa bundan mustasno). PHP'da dinamik yaratiladi.
Misol: Bosh › Blog › SEO › Title tag SEO optimizatsiya. URL bilan to'liq mos.
BreadcrumbList Schema markup. Google qidiruv natijasida URL o'rniga \"sayt.uz › Blog › SEO\" ko'rinadi.
Mobile'da kichik shrift (12px) bilan to'liq breadcrumb. Hide qilmaymiz — orientation muhim.
aria-label=\"breadcrumb\", aria-current=\"page\". Accessibility WCAG AA.
Natija: CTR Google qidiruv natijasida +15% (BreadcrumbList Schema ta'siri). Pages per session yaxshilangan.