Jednou z věcí, se kterou klientům radíme celkem často, je drobečková navigace. Nejde o zanedbatelnou položku, její význam je značný. Přečtěte si proč.
Význam drobečkové navigace značně roste s velikostí webu, užitečná je hned z několika důvodů:
- pomáhá uživateli s pohybem mezi úrovněmi webu
- dává vyhledávačům povědomí o struktuře stránek, jejich hierarchii
- navíc může vyhledávač zobrazit vaše „drobky“ rovnou ve výsledcích hledání
- co víc byste chtěli…
Velká část webů drobečkovou navigaci v nějaké podobě obsahuje. Obvykle ale nebývá dobře implementovaná, takže slouží pouze jednomu účelu, tedy navigaci uživatelů. Na implementaci totiž velmi záleží, protože pokud není navigace ve správném formátu, znamená pro vyhledávače jen pár odkazů a nic víc.
Drobečkovka po staru
Ještě před nemnoha lety byla jednou z lepších implementací ta, která využívala speciálně stylovaného číslovaného seznamu. Implementace mohla v praxi vypadat asi nějak takhle:
<ol> <li> <a href=http://www.test.cz/>test.cz</a> > </li> <li> <a href=http://www.test.cz/produkty.html>Produkty </a> > </li> <li> <a href=http://www.test.cz/muj-produkt-xyz.html>Můj produkt XYZ</a> </li> </ol>
Tento způsob implementace, ač je zdánlivě snadný, působil určité problémy. Předně je potřeba říci, že sémanticky je navigace v číslovaném seznamu nesmysl. Asi jako tabulkový layout a HTML značka <font>. Druhý problém je potom ryze praktický – průměrný kodér (čest a slávu výjimkám) není prostě schopen upravit CSS tak, aby zmizely odrážky, odsazení a jednotlivé položky byly v řádku a nikoliv ve sloupci, jak tomu u seznamu obvykle bývá. Prostě to nejde (my samozřejmě víme, že to jde, ale vysvětlit klientovi, že má vysvětlit kodérovi, že to jde, bývá náročné).
Drobečkovka s Microdaty
Když budete pátrat na zahraničních webech, jak se s drobečkovkou, neboli Breadcrumbs potýkají, čím dál častěji narazíte na implementaci pomocí microdat, případně RDF.
Microdata už jsou s námi několik let a postupně se z vášnivých diskusí v anarchistických kruzích rozlezla po celém internetu. Google začal brát microdata na zřetel, programátoři taky a i uživatelům se začalo líbit, že se jim díky nim ve vyhledávání zobrazují (nejen) drobky přímo ve výsledcích.
A co na to Seznam?
Seznam nic. A protože v Česku to má Google se Seznamem půl na půl, bylo možné si o nových drobcích maximálně číst. Tedy až do letošního jara, kdy po sérii zvláštních změn v jiných částech vyhledávače Seznam ohlásil podporu microdat.
Současná implementace tedy vypadá následovně:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.test.cz/" itemprop="url"> <span itemprop="title">Test.cz</span> </a> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.test.cz/produkty.html" itemprop="url"> <span itemprop="title">Produkty</span> </a> </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.sulko.cz/muj-produkt-xyz.html" itemprop="url"> <span itemprop="title">Můj produkt XYZ</span> </a> </div>
Nová implementace je sémantičtější, lépe se strojově čte a v neposlední řadě neklade tak vysoké nároky na zručnost kodéra, což se taky počítá.
Výsledek ve vyhledávání Google při použití microdat může vypadat třeba takto:
A pro pořádek i na Seznam.cz:
Závěrem
To by bylo asi tak všechno k implementaci drobečkové navigace. Stále nám ale zbývá ještě důležitější otázka, tedy struktura webu samotná. Jak má vlastně vypadat drobečková navigace po obsahové stránce? Jaké má být provázání obsahu napříč webem? Co když se nějaká stránka hodí do více sekcí webu, jak má potom drobečkovka vypadat? Otázek je spousta na pár hodin povídání. Zastavte se u nás na čaj, určitě něco vymyslíme!
