Navigačné omrvinky: ako ich nastaviť pre Google aj pre človeka
Navigačné omrvinky, po anglicky breadcrumbs, sú tá krátka cesta nad obsahom, ktorá ukazuje, kde na webe sa človek práve nachádza. Dokumentácia Googlu ich opisuje ako označenie pozície stránky v hierarchii webu, pričom používateľ sa od poslednej položky vie posúvať o úroveň vyššie až na začiatok. Pre SEO sú zaujímavé z dvoch dôvodov naraz: tvoria hustú sieť interných odkazov v šablóne a zároveň sa môžu premietnuť do toho, čo Google zobrazí namiesto adresy vo výsledkoch. Tento článok prechádza celý prvok od HTML cez štruktúrované dáta až po kontrolu v Search Console, a to výhradne podľa oficiálnej dokumentácie Googlu, schema.org a W3C.
1. Čo omrvinky riešia a kde sa zobrazia
Omrvinková cesta na stránke označuje jej pozíciu v hierarchii webu a podľa dokumentácie Googlu môže pomôcť používateľom porozumieť webu a efektívne ho preskúmať, keďže od poslednej položky sa dá postupovať o úroveň vyššie až na začiatok (Breadcrumb (BreadcrumbList) structured data). Praktický dosah je najlepšie vidieť na návštevníkovi, ktorý prišiel z vyhľadávania priamo na podstránku a nemá tušenie, v ktorej časti webu skončil, pretože práve jemu omrvinky ponúknu najkratšiu cestu k širšej kategórii.
Druhá funkcia je na strane vyhľadávača a súvisí s tým, ako Google prezentuje adresu. Dokumentácia uvádza, že Google Search používa označenie omrviniek v tele stránky na to, aby informácie z nej kategorizoval vo výsledkoch vyhľadávania, pričom tá istá stránka sa dá nájsť veľmi odlišnými dopytmi a omrvinky ju zaradia do kontextu konkrétneho dopytu. Namiesto dlhej adresy tak nad titulkom vidí človek zrozumiteľnú cestu typu Knihy, Vedecká fantastika a Ocenené diela.
Pri dostupnosti sa oplatí čítať dokumentáciu presne, lebo Google pri tejto funkcii uvádza, že je dostupná na počítači vo všetkých regiónoch a jazykoch, kde funguje vyhľadávanie Google. Na mobile je priestor nad titulkom vyhradený inak a rieši ho iná časť dokumentácie, ktorá sa venuje názvu webu a jeho ikone, takže označenie omrviniek nie je náhrada za veci opísané v článku o názve webu, favicone a odkazoch na podstránky.
Tretí prínos sa v dokumentácii nikde nesľubuje, no vyplýva zo samotnej povahy prvku: omrvinky sú v šablóne prítomné na každej podstránke a každá z nich odkazuje na nadradené kategórie popisným textom. Vzniká tým stabilná vrstva odkazov, ktorá dopĺňa odkazy z tela textu a nadväzuje na to, čo rozoberá článok o internom prelinkovaní.
2. HTML, ktoré prečíta Google aj čítač obrazovky
Omrvinky sa dajú pokaziť už v základnom HTML, a to spôsobom, ktorý v prehliadači nič nenaruší. Google totiž dokáže prehľadať odkaz zvyčajne len vtedy, keď ide o prvok <a> s atribútom href, kým odkazy v iných podobách jeho prehľadávače spravidla nespracujú a z prvkov bez tohto atribútu ani z iných značiek, ktoré sa ako odkaz iba správajú vďaka skriptu, adresy spoľahlivo nezíska (Make your links crawlable). Omrvinky poskladané z prvkov <span> s obsluhou kliknutia teda pre vyhľadávač nie sú odkazy, hoci pre návštevníka fungujú.
Tá istá stránka dokumentácie pripomína, že text odkazu má byť medzi prvkami <a>, ktoré Google dokáže prehľadať, a prázdny text odkazu označuje za nesprávny, pričom ako náhradu môže použiť atribút title. Pri omrvinkách sa to týka hlavne prvej položky, ktorú vývojári často nahradia ikonou domčeka bez akéhokoľvek textu, takže odkaz na domovskú stránku ostane bez pomenovania. Výber slov v jednotlivých položkách stojí za rozmyslenie, keďže ide o rovnakú prácu, akú opisuje článok o texte odkazu.
Prístupnosť má vlastný ustálený vzor, ktorý je opísaný v príručke W3C k návrhovým vzorom ARIA. Omrvinková cesta má byť podľa neho obsiahnutá v navigačnej oblasti typu landmark, táto oblasť má byť pomenovaná cez aria-label alebo aria-labelledby a odkaz na aktuálnu stránku má mať aria-current nastavené na hodnotu page, pričom ak prvok predstavujúci aktuálnu stránku nie je odkaz, tento atribút je nepovinný (Breadcrumb Pattern, ARIA Authoring Practices Guide). Klávesová interakcia sa pri tomto vzore neuplatňuje, lebo ide len o sériu odkazov.
Zložená dohromady vyzerá poctivá značka takto a zámerne obsahuje číslovaný zoznam, keďže poradie položiek nesie význam:
<nav aria-label="Navigačné omrvinky">
<ol>
<li><a href="/knihy/">Knihy</a></li>
<li><a href="/knihy/vedecka-fantastika/">Vedecká fantastika</a></li>
<li><a href="/knihy/vedecka-fantastika/ocenene/" aria-current="page">Ocenené diela</a></li>
</ol>
</nav>
Vizuálny oddeľovač medzi položkami patrí do CSS, napríklad cez pseudoprvok, aby sa znak nedostal do textu odkazu ani do prečítanej podoby pre čítač obrazovky. Rovnako sa neodporúča skrývať omrvinky na mobile úplne, pretože práve na malej obrazovke je orientácia najťažšia a téma pokračuje v článku o mobilnom SEO.
3. BreadcrumbList: povinné vlastnosti bez omáčky
Aby sa omrvinky mohli zobraziť aj vo výsledkoch vyhľadávania, doplní sa k viditeľnej navigácii označenie štruktúrovanými dátami. Google podporuje tri formáty, teda JSON-LD, mikrodáta a RDFa, a JSON-LD označuje za odporúčaný (General structured data guidelines). Pre omrvinky treba definovať BreadcrumbList, ktorý obsahuje aspoň dve položky ListItem, inak stránka na zobrazenie s omrvinkami spôsobilá nie je. Úplná definícia typu je na schema.org/BreadcrumbList, Google z nej však podporuje len časť vlastností.
| Vlastnosť | Typ | Čo o nej hovorí dokumentácia |
|---|---|---|
itemListElement | ListItem | Povinná vlastnosť nadradeného prvku BreadcrumbList, teda pole omrviniek uvedených v konkrétnom poradí. |
item | URL alebo podtyp Thing | Adresa stránky, ktorú omrvinka predstavuje. Pri poslednej položke cesty povinná nie je a ak chýba, Google použije adresu stránky, na ktorej sa označenie nachádza. |
name | Text | Názov omrvinky zobrazený používateľovi. Nepovinný je len vtedy, keď sa namiesto adresy použije objekt typu Thing, ktorý názov už obsahuje. |
position | Celé číslo | Pozícia omrvinky v ceste, pričom hodnota 1 označuje jej začiatok. |
Zápis v JSON-LD pre cestu z predchádzajúcej sekcie vyzerá tak, že posledná položka už adresu nepotrebuje, keďže ju Google doplní z adresy samotnej stránky:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Knihy",
"item": "https://example.com/knihy/"
},{
"@type": "ListItem",
"position": 2,
"name": "Vedecká fantastika",
"item": "https://example.com/knihy/vedecka-fantastika/"
},{
"@type": "ListItem",
"position": 3,
"name": "Ocenené diela"
}]
}
</script>
Jedno staršie riešenie treba pri prevzatých šablónach a starých pluginoch vyradiť rovno: označenie podľa data-vocabulary.org už podľa dokumentácie nie je spôsobilé pre funkcie rozšírených výsledkov Googlu. Ak teda web nasadil omrvinky pred rokmi a nikto sa ich odvtedy nedotkol, prvý krok nie je ladenie, ale prepis na schema.org. Širší kontext k typom označenia a k ich testovaniu nájdete v článku o štruktúrovaných dátach.
Označenie sa umiestňuje na tú stránku, ktorú opisuje, a ak má web duplicitné stránky s tým istým obsahom, Google odporúča umiestniť rovnaké štruktúrované dáta na všetky duplikáty, nielen na kanonickú adresu. Platí aj samozrejmosť, na ktorú sa ľahko zabudne pri testovacích prostrediach: stránky so štruktúrovanými dátami nesmú byť pre Googlebot zablokované súborom robots.txt, značkou noindex ani iným prístupovým obmedzením.
4. Cesta používateľa namiesto štruktúry adresy
Najčastejšie rozhodnutie pri nasadzovaní omrviniek vyzerá technicky, no v skutočnosti je obsahové. Google odporúča poskytovať omrvinky, ktoré predstavujú typickú cestu používateľa k stránke, namiesto toho, aby kopírovali štruktúru adresy, a k tomu dodáva, že položku pre najvyššiu úroveň, teda pre domovskú stránku či názov hostiteľa, ani pre samotnú stránku zahrnúť netreba. Väčšina redakčných systémov robí presne to prvé, keďže cestu generuje z adresy, hoci to nemusí byť tá cesta, ktorou ľudia na stránku prichádzajú.
Rozdiel je vidieť na bežnom prípade. Blogový článok má často adresu s dátumom alebo s identifikátorom, zatiaľ čo čitateľ ho hľadá v téme, takže zmysluplná cesta vedie cez tematickú rubriku, nie cez rok a mesiac. Rovnako pri službách býva užitočnejšia cesta cez typ zákazníka alebo cez oblasť služieb než cez technické členenie, ktoré vzniklo pri stavbe webu. Ako môže rozumná hierarchia vyzerať a kedy sa oplatí zasahovať do samotných adries, rozoberá článok o štruktúre webu a URL adries.
Druhé pravidlo si zaslúži zdôraznenie, lebo rozhoduje o počte položiek. Keď domovská stránka ani aktuálna stránka nemusia byť v označení uvedené, jednoúrovňový web nemá dosť materiálu na povinné dve položky, a to je tiež odpoveď na otázku, či omrvinky patria všade. Na malom webe s piatimi stránkami nemajú čo ukázať, kým na webe s kategóriami a podkategóriami sa vyplatia okamžite.
Viditeľná navigácia a označenie musia hovoriť to isté. Pravidlá kvality pre štruktúrované dáta zakazujú označovať obsah, ktorý nie je viditeľný pre čitateľov stránky, a žiadajú, aby štruktúrované dáta boli verným zobrazením obsahu stránky. Cesta v JSON-LD, ktorá obsahuje tri úrovne, kým v šablóne sú viditeľné dve, teda nie je nevinná nepresnosť, ale porušenie pravidla.
5. Viac ciest k jednej stránke, e-shopy a filtre
Na weboch s bohatým členením sa k tej istej stránke dá dostať viacerými spôsobmi a dokumentácia s touto situáciou počíta. Ak existuje viac spôsobov navigácie k stránke, je možné pre jednu stránku uviesť viac omrvinkových ciest, a to tak, že JSON-LD obsahuje pole s viacerými objektmi BreadcrumbList. Pri knihe s ocenením sa takto dá zaznamenať cesta cez Knihy a Vedeckú fantastiku aj druhá cesta cez Literatúru.
V praxi sa táto možnosť oplatí najviac e-shopom, kde produkt patrí do viacerých kategórií a zákazníci k nemu prichádzajú z rôznych strán. Dôležité je, aby každá uvedená cesta zodpovedala navigácii, ktorá na webe naozaj existuje, pretože vymyslené vetvy len na naplnenie označenia spadajú pod obsah, ktorý pre čitateľa nie je viditeľný. Ďalšie typy označenia, ktoré sa na produktovej stránke kombinujú s omrvinkami, rozoberá článok o SEO pre e-shop.
Otázka filtrovaných výpisov má vlastné riešenie a pri omrvinkách je jednoduchšia, než sa zdá. Filtrované a stránkované výpisy nepatria do označenia ako vlastné úrovne, keďže nejde o miesta v hierarchii, ale o pohľady na tú istú kategóriu, a omrvinky na nich preto ukazujú cestu k rodičovskej kategórii. Ako s takými adresami zaobchádzať z hľadiska indexovania, opisuje článok o stránkovaní a filtroch.
Pri viacerých cestách platí ešte jedna vec, ktorá sa v dokumentácii nesľubuje: Google si vyberá, čo zobrazí, a viac uvedených ciest neznamená viac riadkov vo výsledku. Dokumentácia hovorí priamo, že Google nezaručuje zobrazenie štruktúrovaných dát vo výsledkoch vyhľadávania ani pri správnom označení, pretože použitie štruktúrovaných dát umožní prítomnosť funkcie, no nezaručí ju, a výsledky sa prispôsobujú okrem iného zariadeniu a polohe.
6. Kontrola v Search Console a najčastejšie chyby
Po nasadení sa označenie overí testom rozšírených výsledkov na adrese search.google.com/test/rich-results, ktorý odhalí väčšinu technických chýb, a odporúča sa opraviť aj nekritické upozornenia, hoci na spôsobilosť pre rozšírené výsledky nie sú nevyhnutné. Dokumentácia zároveň radí nasadiť najprv niekoľko stránok a skontrolovať ich nástrojom Kontrola adresy URL, aby bolo vidieť, ako stránku vidí Google, čo je rozumnejšie než prepnúť celú šablónu naraz.
Priebežný dohľad potom preberá Search Console, ktorá má pre omrvinky vlastnú zostavu rozšírených výsledkov v časti Vylepšenia. Pri jej čítaní treba poznať dve obmedzenia, ktoré pomocník uvádza sám: zostavy nie sú úplným zoznamom všetkých nájdených položiek, ale zobrazujú vzorku, a čísla v nich odrážajú počet položiek, nie počet stránok (Prehľad zostavy rozšírených výsledkov). Adresa, ktorá v zostave nie je uvedená, sa dá skontrolovať jednotlivo nástrojom Kontrola adresy URL, a samotná zostava sa objaví len vtedy, keď Google na webe nájde platné označenie podporovaného typu.
Nasledujúce chyby sa objavujú opakovane a všetky sa dajú overiť za pár minút:
- Omrvinky poskladané zo skriptov namiesto odkazov. Bez prvku
<a>s atribútomhrefnemá Google z čoho adresu získať, takže navigácia stratí celú hodnotu pre prelinkovanie. - Jediná položka v označení. Definícia žiada aspoň dve položky
ListItem, inak stránka na zobrazenie s omrvinkami spôsobilá nie je. - Cesta v JSON-LD sa nezhoduje s viditeľnou navigáciou. Pravidlá kvality zakazujú označovať obsah, ktorý čitateľ na stránke nevidí, a takýto rozpor býva dôsledkom ručného dopisovania označenia mimo šablóny.
- Chýbajúce alebo preskočené číslovanie. Vlastnosť
positionje povinná a hodnota 1 označuje začiatok cesty, takže číslovanie musí byť súvislé a musí zodpovedať poradiu na stránke. - Staré označenie podľa data-vocabulary.org. Pre rozšírené výsledky Googlu už nie je spôsobilé, hoci v starých šablónach a pluginoch stále prežíva.
- Názvy položiek bez významu. Cesta s položkami typu Kategória alebo Stránka 2 nepovie človeku ani vyhľadávaču nič, kým pomenovanie podľa obsahu funguje v oboch smeroch.
Pri porušení pravidiel pre štruktúrované dáta môže web dostať manuálne opatrenie a jeho dôsledok je pri omrvinkách presne vymedzený: stránka stratí spôsobilosť zobraziť sa ako rozšírený výsledok, no na jej pozíciu v bežnom vyhľadávaní to nemá vplyv. Stav sa dá overiť v zostave manuálnych opatrení v Search Console a podrobnejšie sa touto témou zaoberá článok o manuálnych opatreniach Googlu.
Časté otázky
Musia omrvinky obsahovať domovskú stránku?
Nemusia. Dokumentácia Googlu uvádza, že nie je potrebné zahrnúť položku pre najvyššiu úroveň cesty, teda pre domovskú stránku ani pre názov hostiteľa, a rovnako nie je potrebná položka pre samotnú stránku. Väčšina webov ju napriek tomu zobrazuje, lebo pre návštevníka je odkaz na úvod užitočný, a v tom prípade sa uvedie aj v označení, aby viditeľná navigácia a štruktúrované dáta hovorili to isté.
Zobrazí Google omrvinky vždy, keď ich správne označím?
Nezobrazí a dokumentácia to hovorí priamo, keďže použitie štruktúrovaných dát umožní prítomnosť funkcie, no nezaručuje ju, a výsledky sa prispôsobujú okrem iného histórii vyhľadávania, polohe a typu zariadenia. Samotná funkcia omrviniek je podľa dokumentácie dostupná na počítači vo všetkých regiónoch a jazykoch, kde funguje vyhľadávanie Google.
Stačí označenie v JSON-LD, keď omrvinky na stránke nie je vidieť?
Nestačí a je to porušenie pravidiel, pretože kvalitatívne pokyny zakazujú označovať obsah, ktorý nie je viditeľný pre čitateľov stránky, a žiadajú, aby štruktúrované dáta verne zobrazovali obsah stránky. Označenie je doplnok k skutočnej navigácii, takže poradie práce je obrátené: najprv omrvinky do šablóny, až potom JSON-LD.
Ako naložiť s produktom, ktorý patrí do viacerých kategórií?
Dokumentácia umožňuje uviesť pre jednu stránku viac omrvinkových ciest, keď k nej na webe vedie viac spôsobov navigácie, a zapisujú sa ako pole viacerých objektov BreadcrumbList. Každá uvedená cesta má zodpovedať navigácii, ktorá na webe naozaj existuje, a Google si z uvedených možností vyberá sám, takže viac ciest neznamená viac zobrazených riadkov.
Prečo Search Console v zostave omrviniek ukazuje menej stránok, než web má?
Zostavy rozšírených výsledkov podľa pomocníka nie sú úplným zoznamom nájdených položiek, ale zobrazujú vzorku, ktorá má pomôcť posúdiť kvalitu označenia, a čísla v nich odrážajú počet položiek, nie počet stránok. Konkrétnu adresu, ktorá v zostave chýba, overíte jednotlivo nástrojom Kontrola adresy URL.