Mikrodata se používají v HTML5 pro označení významu obsahu stejně jako mikroformáty nebo RDFa. Pro popis položky (item) se používají slovníky. Vlastnosti položky se popisují pomocí páru jméno-hodnota.

Slovníky poskytují význam položky. Na webu jsou dostupné již existující slovníky jako data-vocabulary.org nebo schema.org. Slovník si však také můžete vytvořit sami.

Slovníky definují např. tyto typy položek: Person, Event, Organization, Place, Product, Review atd.

Atributy

• itemscope – vytváří položku
• itemtype – URL slovníku popisující položku
• itemid – unikátní identifikátor položky
• itemprop – popisuje vlastnost položky
• itemref – odkaz na vlastnost, která není vnořená u položky

Příklad

Jako příklad uvedu označení obsahu pomocí slovníku data-vocabulary.org. Mějme tedy následující kus neoznačeného kódu:

Tomáš Matonoha
<div>
 Dlouhá 36<br />
 Krnov<br />
 18400<br />
 Česká republika
</div>

Pomocí mikrodat jej můžeme označit takto:

<div itemscope itemtype="http://data-vocabulary.org/Person">
 <span itemprop="name">Tomáš Matonoha</span>
 <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
  <span itemprop="street-address">Dlouhá 36</span><br />
  <span itemprop="locality">Krnov</span><br />
  <span itemprop="postal-code">18400</span><br />
  <span itemprop="country-name">Česká republika</span>
 </div>
</div>

Schema.org

Iniciativa Schema.org vznikla společně pod vyhledávači Google, Bing a Yahoo!. Později se k nim přidal ruský Yandex. Schema.org je slovník definující typy mikrodat, které můžete na webových stránkách použít. Navíc je dostupná bohatá dokumentace a příklady.

Jelikož Schema.org podporují tyto významné vyhledávače, osobně doporučuji Schema.org jako slovník používat. Český vyhledávač Seznam zatím mikrodata nepodporuje, ale snad se toho někdy dočkáme.

V redakčním systému WordPress se řada pluginů podporující Schema.org neustále rozšiřuje.

DOM API

Pro programový přístup k mikrodatům lze využít i tzv. DOM API: document.getItems(typeNames) Více informací však získáte v dokumentaci. Aktuálně toto podporuje prohlížeč Opera. Pomocí knihovny MicrodataJS však můžete přidat podporu DOM API do prohlížeče pomocí JavaScriptu.

Závěr

Mikrodata jsou moderní způsob, jak sémanticky označit obsah webu. Díky podpoře velkých vyhledávačů a způsobu používání v HTML5 tak nyní stojí před mikroformáty a RDFa.

Mgr. Tomáš Matonoha

Zabývám se vývojem webových stránek s redakčním systémem WordPress. Programuji také webové stránky a eshopy na míru pomocí PHP a frameworku Nette. Zajímá mě responzivní design a moderní webové technologie: HTML5, CSS3, LESS, PHP, MySQL, jQuery a Twitter Bootstrap.

• 
• 
• 
• 
•