Breadcrumbs: Reguli de ierarhie și de schemă

Breadcrumbs-urile sunt un fir ordonat de linkuri care arată unde se situează pagina curentă în arhitectura informațională a site-ului, sau IA: sistemul de relații părinte, copil și frate care organizează conținutul. Ele permit cititorului să se deplaseze în sus fără a reporni din navigarea principală, oferind în același timp crawlerelor și sistemelor de răspuns o relatare explicită, interpretabilă automat, a aceleiași ierarhii.

Acest fir redat este în mod intenționat literal. El identifică trei strămoși reali, denumește pagina curentă și trimite doar în sus. Nu inserează „Navigare SEO” sau o altă expresie doar pentru că acea formulare ar putea atrage căutări.

De ce contează acest element

Cititorii ajung pe paginile profunde din rezultatele căutării, linkuri partajate, emailuri și răspunsuri AI. Adesea nu își amintesc traseul pe care meniurile site-ului se așteaptă să îl urmeze. Un breadcrumb rezolvă această incertitudine dintr-o singură privire: „Citesc o pagină de element din cadrul playbook-ului SEO și mă pot întoarce la oricare dintre colecții.” Acest context reduce costul explorării unui site fără a forța cititorul să deschidă un meniu, să editeze un URL sau să folosească butonul Înapoi.

Psihologia ține de orientare, nu de decor. Un fir clar îi oferă cititorului un sentiment stabil al locului și o cale evidentă de ieșire. Acest lucru contează cel mai mult pe site-urile mari unde titluri de pagini similare pot trăi în secțiuni diferite—de exemplu, o categorie de produs numită „Analytics” și o secțiune de documentație cu același nume. Strămoșii dezambiguizează pagina înainte ca cititorul să îi interpreteze detaliile.

Mașinile au nevoie de aceeași relație exprimată fără a se baza pe spațiere vizuală sau săgeți. Extragerea automată înseamnă că software-ul poate recupera sensul și ordinea unei unități din HTML sau date structurate. Un <nav> semantic, o listă ordonată, linkuri obișnuite, aria-current și date BreadcrumbList corespunzătoare expun o secvență de entități cu poziții explicite. Un rând de elemente <span> stilizate poate arăta identic, dar nu oferă nici un reper de navigare fiabil, nici o ordine a listei.

Firul vizibil și ieșirea structurată trebuie să spună o singură poveste. Dacă pagina este vizibil sub „Elemente” dar schema numește „Instrumente SEO” ca părinte, sistemele primesc două ierarhii concurente. Această inconsistență este mai rea decât omiterea schemei, deoarece face relațiile de entitate ale site-ului mai puțin demne de încredere.

Urmează regulile de redactare a elementelor atunci când alegi această componentă. Regula lor de precedență se aplică aici: dacă scopul unui pasaj este de a comunica ierarhia și navigarea în sus, folosește elementul tipizat breadcrumbs. Nu îl imita cu text liber, un subtitlu separat prin slash sau cuvinte cheie legate.

Când să îl folosești

Folosește breadcrumbs atunci când o pagină aparține unei ierarhii stabile cu cel puțin un părinte semnificativ dincolo de pagina principală. Site-urile editoriale mari, cataloagele de comerț electronic, bibliotecile de documentație, structurile pe zone de servicii, directoarele și site-urile cu produse pe mai multe niveluri beneficiază cel mai mult, deoarece vizitatorii intră frecvent sub nivelul superior.

Folosește-le consistent în cadrul unei secțiuni. Un fir care apare doar pe unele pagini de produs îi face pe cititori să se întrebe dacă paginile lipsă aparțin altundeva și face ca interpretarea automată să depindă de accidente de șablon. Modelul de conținut sau ruta ar trebui să furnizeze ierarhia; autorii nu ar trebui să o reconstruiască independent pe fiecare pagină.

Nu folosi breadcrumbs atunci când nu există o ierarhie de exprimat. O campanie cu o singură pagină, un site puțin adânc unde fiecare pagină este direct sub Acasă sau o stare temporară de aplicație poate să nu obțină un traseu util din ele. Adăugarea „Acasă › Pagina curentă” pe fiecare pagină puțin adâncă poate crea zgomot vizual fără a dezvălui context nou.

Greșelile frecvente includ:

• Un fir al istoricului browserului. „Căutare › Produs › Coș” înregistrează o sesiune, nu o ierarhie de conținut. Diferiți vizitatori ar primi părinți diferiți pentru aceeași pagină, deci relația nu este canonică.
• O cale de cuvinte cheie. „Cel mai bun CRM › CRM ieftin › CRM pentru start-upuri” poate plasa fraze țintă în vizor, dar inventează strămoși care poate nu există ca pagini navigabile. Etichetele breadcrumb denumesc noduri reale; nu sunt un tag de titlu suplimentar.
• Un fir de filtre. „Pantofi › Albaștri › Mărimea 9” descrie fațete selectate. Aparține comenzilor de filtrare, cu excepția cazului în care fiecare pas este o pagină de destinație stabilă, indexabilă, cu o relație de părinte intenționată.
• Un indicator de progres. „Detalii › Plată › Confirmare” comunică pașii unei tranzacții. Are nevoie de semantică de stepper și stare, nu de marcaj BreadcrumbList.
• Un cuprins. Linkurile de secțiune se deplasează în cadrul documentului curent; breadcrumbs-urile se deplasează între documente în ierarhia site-ului.
• Un lanț de taguri. Tagurile descriu relații many-to-many, în timp ce breadcrumbs-urile necesită o singură cale primară ordonată. O pagină poate avea mai multe taguri, dar nu ar trebui să expună mai mulți părinți concurenți într-un singur fir.

Atunci când o pagină apare legitim în mai multe colecții, alege o singură ierarhie canonică primară pentru breadcrumb. Păstrează alte rute de descoperire prin linkuri contextuale sau pagini de colecție. Firele multiple de breadcrumbs forțează cititorul și consumatorul schemei să decidă care părinte este autoritar.

Unde să îl plasezi

Orientarea funcționează doar atunci când sosește înainte ca pagina să ceară interpretare, așa că plasează firul după antetul global al site-ului și înainte de H1 sau conținutul hero al paginii. Ar trebui să fie prima regiune de navigare specifică paginii. Păstrează aceeași poziție pe desktop și mobil, chiar dacă firul se împachetează diferit.

Nu așeza breadcrumbs-urile lângă un cuprins, o bară de instrumente partajată, etichete de categorie, controale de cont sau un badge promoțional. Aceste elemente răspund la întrebări diferite și fac linia îngustă de orientare să pară o bară de instrumente cu scop general. Nu plasa o reclamă sau un îndemn la acțiune între fir și H1. Dacă hero-ul conține ambele, stivuiește breadcrumb-ul deasupra titlului și conținutul promoțional separat, după copia introductivă.

Anatomie

1. Reper de navigare: un <nav> cu numele accesibil „Breadcrumb” distinge acest fir de navigarea globală și locală.
2. Listă ordonată: ordinea poartă sens de la strămoșul cel mai larg la pagina curentă, deci <ol> este necesar chiar dacă marcatorii de listă sunt eliminați vizual.
3. Elemente strămoș: fiecare strămoș folosește eticheta sa canonică lizibilă și un link accesibil crawlerelor către pagina părinte reală.
4. Separator: o săgeată sau o bară oblică separă elementele vizual. Este decorativ și ascuns tehnologiei de asistare.
5. Element curent: elementul final denumește pagina curentă, nu are link și folosește aria-current="page".
6. Relația documentului: firul se află deasupra H1. Captura de ecran etichetează această poziție, dar plasarea este controlată de șablon, nu de copia redactată.

Exemple de design

Variantele schimbă densitatea și comportamentul responsive, niciodată ierarhia de bază.

Implicit: arată firul complet atunci când se potrivesc două până la cinci elemente concise. Aceasta este varianta preferată deoarece niciun context nu este ascuns.

Cale lungă: permite un fir de șase sau șapte elemente doar atunci când fiecare nivel reprezintă un strămoș navigabil real. Împachetează la granițele elementelor; nu micșora textul până devine greu de citit.

Colapsat pe mobil: atunci când firul real nu se poate împacheta acceptabil, păstrează Acasă, părintele imediat și pagina curentă. Un control focusabil cu puncte de suspensie poate dezvălui strămoșii ascunși din mijloc. Calea completă trebuie să rămână în DOM sau să devină disponibilă prin acel control, iar datele structurate trebuie să rețină fiecare element real.

Hero întunecat: culorile și indicatoarele de focus se adaptează la fundal, dar etichetele, ordinea, comportamentul de legare și numele accesibil rămân identice cu cele implicite.

Parametri

Elementul este o listă structurată deoarece tablourile paralele de etichete și URL-uri sunt ușor de dezechilibrat. Ordinea elementelor este ierarhia, iar aceleași elemente alimentează atât HTML-ul vizibil, cât și schema.

Primul titlu nu are o mapare în acest element. Breadcrumbs-urile sunt un reper de navigare, nu o secțiune de conținut cu titlu, iar plasarea unui titlu într-un element ar crea o ierarhie falsă a documentului. Elementul final omite url în sursa redactată în mod implicit; un motor de randare poate folosi URL-ul canonic al paginii pentru ieșirea BreadcrumbList fără a transforma elementul curent vizibil într-un auto-link.

Două elemente înseamnă un strămoș plus pagina curentă. Cinci este limita superioară normală. Șapte este un maxim strict, deoarece firele mai adânci devin greu de scanat și dezvăluie de obicei o problemă de IA care ar trebui rezolvată la sursă, nu ascunsă prin stilizare.

Sintaxă și exemple de cod

Numele componentei canonice este breadcrumbs. Ordinea elementelor sale trebuie să provină din datele de ierarhie revizuite ale site-ului, chiar și atunci când exemplele arată valori inline.

Directivă Markdown portabilă

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="Acasă" url="/"}
::item{label="Playbook SEO" url="/seo-playbook/"}
::item{label="Elemente" url="/seo-playbook/elements/"}
::item{label="Breadcrumbs" current=true}
:::

Shortcode Hugo

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="Acasă" url="/" />}}
  {{< breadcrumb-item label="Playbook SEO" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="Elemente" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="Breadcrumbs" current="true" />}}
{{< /breadcrumbs >}}

Acesta este contractul adaptorului portabil, nu o instrucțiune de a adăuga un nou shortcode în acest repository. O implementare Hugo ar trebui în mod normal să derive elementele din strămoșii paginii și metadatele secțiunii, astfel încât un editor să nu poată publica un fir care contrazice rutarea.

Bloc WordPress

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"Acasă","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Playbook SEO","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Elemente","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Breadcrumbs","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress ar trebui să populeze blocul din lanțul părinte primar și URL-urile canonice ale paginii. Suprascrierile manuale necesită revizuire editorială, deoarece schimbarea unei etichete poate face altfel navigarea, schema și arhitectura site-ului să nu fie de acord.

Exemple

Bun: o ierarhie reală, navigabilă

Acasă › Documentație › Audituri › Audit de prospețime

Acesta este bun atunci când Documentație, Audituri și Audit de prospețime sunt pagini canonice reale în acea ordine părinte–copil. Fiecare strămoș își prezice destinația, iar eticheta curentă este suficient de concisă pentru a confirma locația fără a repeta întregul H1.

Rău: cuvinte cheie prefăcându-se a fi ierarhie

Acasă › Cel mai bun instrument SEO AI › Platformă accesibilă de vizibilitate AI › Breadcrumbs

Acesta este rău atunci când cele două etichete din mijloc nu sunt pagini părinte reale. Firul face promisiuni pe care linkurile sale nu le pot îndeplini, repetă fraze promoționale în loc să numească secțiuni și creează un lanț fals de entități pentru crawleri. Înlocuiește-l cu cea mai scurtă cale reală a strămoșilor. Dacă conceptele dorite merită pagini, creează și integrează mai întâi acele pagini în IA; nu previzualiza o arhitectură imaginară în breadcrumbs.

Marcaj de schemă și accesibilitate

Breadcrumbs-urile pot alimenta BreadcrumbList din Schema.org, o listă ordonată ale cărei intrări sunt obiecte ListItem. Folosește valori position întregi bazate pe unu și păstrează name și item aliniate cu eticheta vizibilă și destinația canonică. Generează JSON-LD și HTML dintr-un singur obiect de date, astfel încât o redenumire, mutare sau schimbare canonică să actualizeze ambele ieșiri împreună.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Acasă","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"Playbook SEO","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"Elemente","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"Breadcrumbs","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

Schema descrie ierarhia vizibilă; nu autorizează o a doua cale optimizată. Nu include redirecționări, parametri de urmărire, variante non-canonice de protocol sau gazdă, rezultate de căutare interne, stări de sesiune sau categorii ascunse de cuvinte cheie. Nu publica două obiecte BreadcrumbList pentru două taxonomii posibile. Selectează calea primară în modelul de conținut și folosește-o peste tot.

Accesibilitatea începe cu <nav aria-label="Breadcrumb"> și o listă ordonată. Eticheta accesibilă distinge această regiune de navigare fără a necesita un titlu vizibil. Ascunde separatoarele decorative cu aria-hidden="true" sau creează-le în CSS, astfel încât cititoarele de ecran să nu anunțe „mai mare decât” între fiecare element. Marchează doar elementul final cu aria-current="page" și nu îl lega la sine.

Fiecare link strămoș are nevoie de un indicator de focus vizibil și de o țintă suficient de mare pentru a fi activată pe un ecran tactil. Firele lungi trebuie să se împacheteze sau să se colapseze printr-un control operabil de la tastatură; derularea orizontală care ascunde poziția curentă nu este o opțiune implicită acceptabilă. Trunchierea poate scurta o etichetă vizuală doar atunci când numele accesibil complet rămâne disponibil, iar textul scurtat este încă distingibil. Nu te baza niciodată doar pe culoare pentru a separa strămoșii legați de elementul curent.

Reguli de redactare

Etichetele breadcrumb sunt nume de locații, așa că scrie-le ca pe o navigare, nu ca pe niște micro-titluri. Folosește numele oficial, cel mai scurt și neambiguu al fiecărei secțiuni sau pagini. „Documentație” funcționează mai bine decât „Explorează toată documentația produsului”, deoarece destinația furnizează contextul, iar firul trebuie să rămână scanabil.

• Folosește una până la șase cuvinte și nu mai mult de 60 de caractere per etichetă. Etichetele scurte fac ierarhia vizibilă înainte de împachetare; nu sunt o permisiune de a abrevia termeni necunoscuți.
• Folosește în mod normal două până la cinci elemente, inclusiv pagina curentă. Permite șase sau șapte doar atunci când fiecare nivel este structural necesar.
• Ordonează elementele de la cel mai larg strămoș la pagina curentă. Nu inversa niciodată firul și nu plasa un frate în secvență.
• Folosește scrierea cu literă mică inițială (sentence case), cu excepția cazului în care un brand, produs sau acronim are o ortografie aprobată.
• Păstrează etichetele stabile pe toate paginile. Același părinte nu poate fi „Doc” într-un fir și „Documentație” în altul, cu excepția cazului în care sistemul de navigare se schimbă global.
• Asigură-te că etichetele strămoșilor se potrivesc sau reflectă îndeaproape numele vizibil al destinației. O etichetă concisă de navigare este acceptabilă; o țintă diferită de cuvânt cheie nu este.
• Denumește pagina curentă concis. Poate scurta un H1 lung, dar trebuie să identifice totuși același document.
• Folosește un ton neutru. Breadcrumbs-urile orientează; nu vând, nu felicită, nu avertizează și nu instruiesc.

Nu pune niciodată îndemnuri la acțiune, prețuri, status de stoc, date, nume de autori, scoruri de recenzii, emoji-uri, icoane cu sens independent, afirmații promoționale, coduri de urmărire sau parametri de interogare în interiorul unei etichete breadcrumb. Nu adăuga niciodată „Înapoi”, „Anterior” sau „Următorul” ca element, deoarece acele controale exprimă istoric sau secvență, nu strămoși. Separatoarele aparțin prezentării gestionate de motorul de randare și nu fac parte din nicio etichetă.

Tipuri de postări care îl folosesc

Frontmatter-ul postTypes înregistrează asocierile suportate. Tabelul convertește aceste asocieri în reguli de utilizare și plasare; nu este o afirmație că fiecare instanță are nevoie de un fir redactat manual.

„De obicei” înseamnă să folosești elementul atunci când site-ul are părintele stabil denumit și să îl omiți pe o implementare cu adevărat puțin adâncă, în loc să inventezi un nivel suplimentar. „Întotdeauna” presupune că structura imbricată menționată există. Șabloanele ar trebui să dețină redarea; tipul de postare definește sursa de ierarhie așteptată și excepțiile editoriale.

Listă de verificare QA

• Ierarhie reală: Fiecare strămoș este un părinte real, intenționat, în IA primară a site-ului, nu un cuvânt cheie, tag, filtru sau vizită anterioară.
• Poziție corectă: Firul apare după antetul global și înainte de H1, fără promovare sau bară de instrumente neînrudită inserată între ele.
• Un singur fir: Pagina expune un breadcrumb vizibil și un BreadcrumbList corespunzător, nu căi concurente.
• Ordine completă: Elementele rulează de la cel mai larg strămoș la pagina curentă, fără nivel structural lipsă sau frate adăugat.
• Linkuri canonice: Fiecare strămoș duce direct la URL-ul său canonic, indexabil, fără parametri de urmărire sau redirecționări evitabile.
• Stare curentă: Ultimul element vizibil denumește pagina curentă, nu este legat și are aria-current="page".
• Etichetele concise: Fiecare etichetă folosește numele oficial cel mai scurt și neambiguu, respectă scrierea cu literă mică inițială și rămâne în limita editorială.
• HTML semantic: Componenta folosește un reper de navigare etichetat și o listă ordonată; nu este un rând de span-uri generice.
• Separatoare decorative: Separatoarele sunt ascunse tehnologiei de asistare și nu apar în numele accesibile ale linkurilor.
• Comportament responsive: Poziția curentă rămâne disponibilă pe ecrane înguste; împachetarea, dezvăluirea, ordinea de focus și țintele tactile funcționează fără conținut orizontal ascuns.
• Paritate schema: Numele BreadcrumbList, URL-urile canonice, ordinea, numărul de elemente și pozițiile se potrivesc cu ierarhia vizibilă completă în substanță.
• Sursă unică de date: HTML și JSON-LD sunt generate din aceeași ierarhie revizuită, nu menținute ca copii separate.
• Paritate portabilă: Reprezentările Markdown, Hugo și WordPress păstrează ordinea identică a elementelor, etichetele, destinațiile și starea curentă.
• Status capturi de ecran: Comentariile de captură rămân instrucțiuni care nu se redau până la existența activelor reale; nicio captură de ecran inexistentă nu este referită ca imagine.

FAQ

Șablonul academy redă cele cinci întrebări revizuite stocate în frontmatter. Acestea acoperă căile URL, elementul curent, datele structurate, paginile de filtrare instabile și limitele practice de adâncime.