Нан ұнтақтары және пайдаланушының жолы

1) Рөлі мен құндылығы

• менің иерархияда қайда екенімді көрсетеді;
• жоғары деңгейге жылдам кері жол береді;
• «back-bounce» дегенді азайтады («артқа» деген қайталама басу);
• көршілес деңгейлерді анықтауды арттырады және контенттік беттер үшін SEO-ны жақсартады.

Қағидаттар: қарапайымдылық> нақтылау, иерархия> басу тарихы, тұрақты құрылым> динамикалық шу.

2) Қашан пайдалану

Терең каталогтар мен контент (провайдер → санат → ойын/мақала).
B2B-әкімшіліктер және 2-3 + ішкі деңгейлері бар есептер.
Бөлімдері және мазмұны бар лонгридтер/доктар (ұнтақтар + TOC).
Тереңдігі жоқ жоғарғы деңгейдегі экрандарда (лобби/дешборд) қажет емес.

3) Ұнтақ түрлері

1. Иерархиялық (құрылымдық) - пайдаланушының бағытын емес, IA көрсетеді:

'Басты › Провайдерлер › Play' n GO › Book of Dead '

2. Жол бойынша (history-based) - нақты маршрутты көрсетеді (вебте сирек орынды; «артқа» жақынырақ).
3. Гибрид - иерархия + сақталған сүзгілер/контексті бар соңғы қадам.

Ұсыным: кездейсоқ ауысулардан «шуды» болдырмау үшін әдепкі - иерархиялық.

4) Құрамы және форматы

Бөлгіш: '›' немесе '/' (дизайны және локальі бар).
Бастапқы нүкте: «Басты «/логотипі басылған.
Қиылу:> 4 деңгей тереңдігінде «»... ішіндегі ортаңғы буындарды ашумен жасыру.
Соңғы элемент: ағымдық бет, кликабельді емес және көзбен шолып көрсетілген.
Тақырып ұзындығы: көпнүктемен қиып алу, бірақ hover/focus кезінде толық 'title '/tooltip.

5) Ұсақ бөлшектерді өндіру (логика)

referer 'y бойынша емес, URL/IA канондық иерархиясы бойынша құру.
Мәндер үшін (ойын/мақала) кездейсоқ тегтерді емес, негізгі санатты (немесе «нан» санатын) алу керек.
Динамикалық беттер үшін (сүзгілер, сұрыптаулар) - үгінділер негізгі бөлімге дейінгі жолды көрсетеді, ал контекст жеке көрсетіледі (сүзгі чиптері).
Мультитенанттылық кезінде таңбаның/оператордың контексін басында немесе селекторда қатар қосыңыз, бірақ ұнтақтарды артық жүктемеңіз.

6) Сүзгілер, сұрыптау, пагинация

Сүзгілер ұнтақтарды «ұзартпауы» тиіс. Оларды төменде чиптерде көрсетіңіз («Провайдерлер › Live» + чиптер: Geo = CA, Device = Mobile).
Пагинация үгінділерге кірмейді; ағымдағы бет тізім бақылауында көрсетіледі.
Сүзгілерді басты деңгейге лақтыру: «таза» санатқа қайту.

7) Мобильді UX

Ұнтақтарды H1-дің астына бір жолда орналастыру; орын жетіспеген жағдайда - көлденең скролл немесе ортаңғы буындардың қимасы.
Тап-таргеттер ≥ 44px, клавиатуралық навигация кезінде көрінетін фокус (PWA үшін).
Жүйелік «Артқа» қайталанбасын - құрылым үшін ұсақ-түймешік, тарих үшін түймешік.

8) Қол жетімділік (A11y)

'nav [aria-label = «breadcrumb»] және' ol> li 'семантикасын пайдалану.
'aria-current =' page 'соңғы элементінде көрсетілсін.
Сілтемелердің қарама-қайшылығы WCAG AA сәйкес келеді; фокус - көрінетін.
Белгі/бөлгіш - жалғыз сигнал емес (мәтіндік лейблдер бар).
DOM-дағы тәртіп визуалды тәртіпке сәйкес келеді.

9) SEO және деректер

Мазмұнды беттер үшін құрылымдалған BreadcrumbList (JSON-LD) деректерін пайдаланыңыз.
Каноникалық URL және тұрақты ұнтақтар іздеуге иерархияны түсінуге көмектеседі.
«Бос» аралық тораптарды мазмұнсыз индекстемеу (thin pages болдырмау).

10) Бейнелеу үлгілері

Классикалық қатар: 'Басты › Бөлім › Кіші бөлім › Бет'.
Қысқаша: 'Басты ›... › Санат › Карточка'.
Бренд контексімен (B2B): 'Brand A › Есептер › Кіріс › NGR'.
Доктарда зәкірлері бар: 'Құжаттама › KYC › #Уровни-тексеру' (зәкір - TOC-те, үгінділер - бөлімге дейін).

11) Мінез-құлық және микроинтеракция

Hover/focus сілтемені және нұқу аумағын (тек мәтін ғана емес, бүкіл «кішкентай») көрсетеді.
Соңғы «ұнтақ» көршілес заттармен қосымша алмасуы мүмкін (мысалы, осы провайдердің басқа ойындары) - артық жүктемей, ұқыпты.
Жоғарыдағы деңгейге өту, егер бұл канониканы бұзбаса, тізімнің орнын/бетін сақтайды (мысалы, к '? page = 2').

12) Метрика және телеметрия

• `breadcrumb_click(level, label, url)`
• 'breadcrumb _ expand _ more' (қысқартылғандар үшін)
• 'back _ to _ parent _ retained _ context' (егер орын/бет сақталса)

• Use Rate: ≥ тереңдігінде ұсақ түймешіктерді басқан пайдаланушылардың үлесі 2.
• Back-bounce ↓: терең бетке кіргеннен кейін бірден «артқа» санын азайту.
• Time-to-Parent: қайтару уақыты жоғары.
• SEO CTR: таңбаланған CTR беттерін өзгерту.

13) iGaming үшін мысалдар

B2C (казино): 'Басты › Провайдерлер › Pragmatic Play › Gates of Olympus'. Провайдер бетінде - сүзгі чиптері (Live/Slots/Megaways); үгінділер - тек құрылым.
Турнирлер: 'Басты › Турнирлер › Күзгі кубок › Ережелер'.
B2B (провайдер): 'Панель › Мазмұн › Релиздер › Book of Ra (ID 12345)' - соңғы элемент түймеленбейді; «Операторда ашу» түймешігі.

14) Антипаттерндер

H1 сөзін пайдасыз қайталайтын ұнтақтар.
Құрылымның орнына тарихи бағыттар (хаотикалық «сызық»).
Сүзгілер мен пагинацияларды ұнтақтарға қосу («Ойындар › Слоттар › page = 5»).
Соңғы түйіршік - өзіне сілтеме.
Артық тереңдік, ұсақ өлшем, төмен контраст - «көзге көрінбейтін үгінділер».
/ URL мәзіріндегі келісілмеген буындардың атаулары.

15) Енгізу чек-парағы

1. IA картасы: мәні үшін канондық жолдарды анықтау.
2. Генератор: IA/URL ұнтақтарын жасайтын функция (referer тәуелсіз).
3. Кесу:> 4 тереңдіктегі ереже, толық жолмен popover.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Стиль: мобайл, бөлгіштер, өлшемдерге бейімделген AA контрасты.
6. Контекст: сүзгілер/сұрыптаулар - түбіртектерде емес, төменде чиптермен.
7. Телеметрия :/expand, Time-to-Parent, back-bounce.
8. Құжаттама: мысалдар, анти-кейстер, буындарды атау жөніндегі гайд.

16) Жиынтық

1. каноникалық иерархияға негізделген

2. оқылатын және қол жетімді,

3. сүзгілерге/беттің жай-күйіне төзімді

4. өлшенетін пайдасы бар (телеметрия/SEO).

Осылайша олар шынымен бағдарлануға көмектеседі және пайдаланушының мақсатқа жету жолын қысқартады.