Webdesignérův průvodce po HTML5: Microdata

Proč Microdata

Microdata mají v zásadě stejný cíl jako Mikroformáty a RDFa – umožnit tvůrcům webových stránek označovat obsah tak, aby byl strojově zpracovatelný a informace byly dostupné prohlížečům či vyhledávačům. Použitím kteréhokoli z těchto tří formátů dosáhnete obdobného výsledku a záleží v podstatě jen na vašich preferencích, co použijete.

Jak vznikla Microdata

RDFa a Mikroformáty jsou výrazně odlišné a Hixie (jak se Ianu Hicksonovi říká) cítil, že mezi nimi je místo ještě pro jeden formát – rozšiřitelný, aby stačil dnešnímu, dynamicky se rozvíjejícímu, webu, a jednoduchý, aby jej webdesignéři mohli používat bez nějakého dlouhého učení.

Jak fungují

Microdata označují data pomocí párů jméno/hodnota, kdy jména jsou definovaná ve slovnících.

Trošku kostrbatá věta, která ale poměrně přesně vystihuje to, co Microdata dělají. Vysvětleme si její obsah.

Microdata mají slovníky. Slovníky jsou místo, kde se definují jednotlivá jména vlastností. Takže například můžeme mít slovník „Osoba“, kde budou vlastnosti „jméno“, „fotografie“, „webové stránky“. V HTML pak řekneme, že používáme ten a ten slovník (každý slovník má svou unikátní namespace – webovou adresu, na které je umístěn) a pak už jen popisujete, co potřebujete.

Microdata také pracují (ostatně stejně jako RDFa a Mikroformáty) se zanořováním – tedy když chceme vytvořit např. položku Osoba, která má jméno, fotografii a webové stránky, uděláme tedy obalující element Osoba a do něj napíšeme (a patřičně označíme) jméno, fotografii a webové stránky (šlo by to i trošku jinak, ukážeme si níže). V kódu by to vypadalo např. takto:

<section itemscope itemtype="http://data-vocabulary.org/Person">
    <h1 itemprop="name">Jan Sládek</h1>
    <p><img itemprop="photo" src="http://www.example.com/photo.jpg" alt="[já]"></p>
    <p><a itemprop="url" href="http://honzasladek.com">osobní stránky</a></p>
</section>

Použité atributy

K standardnímu HTML5 kódu jsme přidali několik nových atributů. Co znamenají? Vezměme to shora:

itemscope

označuje novou položku, která má nějaké vlastnosti (v našem případě: Osoba má vlastnosti jméno, fotografie, webové stránky). Položky můžeme zanořovat do sebe, takže např. když popisujeme osobu a řekneme, že hraje v hudební skupině, můžeme dát hudební skupině také itemscope a popsat ji do detailů (počet členů, jméno, atd).

itemtype

odkazuje na slovník. Hodnota musí být platná absolutní URL adresa. Slovníky si můžete buď vytvářet vlastní, anebo používat již ty hotové (doporučeno).

itemprop

specifikuje jednotlivé vlastnosti celé položky. Hodnoty itemprop jsou právě vlastnosti, specifikované ve slovníku.

Co můžeme popisovat

Vzhledem k možnosti psát vlastní slovníky můžeme popsat libovolná data. Slovníků již vzniklo mnoho, spousta dalších jistě vznikne. Za pozornost stojí hlavně http://www.data-vocabulary.org/, neboť tyto specifikace má implementovány Google a používá je pro své Rich Snippets, o kterých si povíme za chvilku. Microdata také používají slovníky od komunity Mikroformátů, jako je hCard či hCalendar.

Kódujte, jak chcete

Pokud používáte Mikroformáty, jistě vás občas naštvalo, že jste museli např. všechny informace o nějaké osobě obalit jedním obalovým prvkem. Microdata toto řeší šikovným atributem itemref (lze přidat pouze k položce, která má itemscope), jejíž hodnota je id jiné položky na stránce, a data z obou položek se poté sloučí.

<div itemscope itemref="x">
    <p itemprop="b">test</p>
    <p itemprop="a">2</p>
</div>
<div id="x">
    <p itemprop="a">1</p>
</div>

Itemref může odkazovat i na více položek najednou.

Odkud berou Microdata hodnoty pro jednotlivé vlastnosti

Zatím jsme nemluvili o tom, jaká data vlastně pomocí všech těch vlastností popisujeme. A ani o tom moc mluvit nebudeme – je to totiž zcela logické. Když označuji odkaz, chci popsat cíl jeho URL, když označuji nadpis, chci popsat text mezi tagy <hx></hx> atd. Stačí se řídit zdravým rozumem a vše funguje, jak má. Pokud byste ale někdy byli na pochybách, podívejte se do specifikace.

Použití v praxi

Sémantický web slibuje výrazné zlepšení uživatelského prožitku. Vyhledávače budou mnohem přesnější, probírání se ohromným množstvím dat mnohem snazší. Zatím jsme ale stále na začátku, žádný rozšířený prohlížeč ani Microdata ani RDFa ani Mikroformáty v základu neimplementuje a nevyužívá. U vyhledávačů je tomu naštěstí jinak.

Google Rich Snippets

Google již nějakou dobu podporuje Mikroformáty i RDFa a letos v březnu přidal i podporu pro Microdata. Získanými daty vylepšuje své vyhledávání – často se tu objevují jako strukturovaný šedý text. Např. různé akce jsou skvělým příklad toho, o kolik více se uživatel dozví rovnou z vyhledávače, a může tak lépe zhodnotit, zda vaše stránky navštívit či ne.

(Minulý týden koupil Google společnost Freebase, i to naznačuje, jakou důležitost přikládá tento gigant sémantickému webu. – pozn.red.)

Ti další

Bing, Yahoo! či český Seznam zatím podporu Microdata nenabízejí, asi čekají na to, zda se rozšíří a až se ustálí (zatím dost divoká) specifikace.

Shrnutí a odkazy

Rychlý průlet oblastí Microdat je za námi. Co si z něj odnést? Že Microdata existují, jsou jednoduchá a přitom poměrně mocná, a u Google vám již pomohou, takže je můžete snadno prodat svým zákazníkům.

Také si z něj ale odneste, že je jedno, zda používáte Mikroformáty, RDFa či Microdata. Zatím nám stále nabízejí podobné možnosti. Pokud ale nepoužíváte ani jednu z těchto sémantických konvencí, začínáte být pozadu za konkurencí.

Pokud vás Microdata zaujala, tak se určitě podívejte na následující odkazy:

• Dive Into HTML5 – Microdata
• Porovnání Mikroformáty – RDFa – Microdata
• Google Rich Snippets
• Specifikace Microdata
• Úvod do Microdata na NetTuts