Nepříliš chytrý blog Od programování po jezevce

Mikrodata – přibližte text vyhledávačům

Není to tak dlouho, přesněji 19 dnů, co se tři největší vyhledávače – Google, Bing a Yahoo! shodli na společném projektu Schema.org. Jde o seznam schémat pro mikrodata, které lze implementovat do zdrojového kódu webu a přiblížit tím vyhledávači smysl textu.

Příklad využití je uváděn na slově „Avatar“. Člověk z kontextu jednoduše pozná, zda se jedná o ikonku uživatele nebo měl autor na mysli spíše film Jamese Camerona. Vyhledávač o něm ale neví nic. Automatické propojování informací sice existuje, ale není ani zdaleka dokonalé a jeho implementace je přinejmenším náročná. Přicházejí tedy na řadu mikrodata. Uvedeme si praktickou ukázku.

Běžné HTML – bez specifikace významu

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Vidíme standardní zápis v HTML. Pro zobrazení v prohlížeči je dostačující, ale pro vyhledávače sémanticky nedostatečný.

HTML rozšířené o základní informaci – jedná se o film (itemtype Movie)

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Vyhledávač nyní již ví, že zadané informace se týkají filmu. Tím ale mikrodata nekončí.

Rozšiřující informace pro vyhledávače (itemprop)

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Nyní jsme specifikovali název filmu, jeho režiséra, žánr a odkaz na trailer. Vyhledávač by už měl být spokojený, my ale můžeme jít ještě dál. Z jednotlivých prvků itemtype se dá vytvářet stromová struktura. A jelikož je James Cameron osoba, můžeme použít itemtype Person.

Vnořené položky

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Vnořený typ Person má svoje vlastní itemprop, které můžeme specifikovat.

Typů a jejich properties je spousta. Kompletní přehled najdete na webu Schema.org Na závěr bych rád doplnil, že jsou mikrodata z důvodu používání vlastních atributů použitelná pouze v HTML5.

Jak nahlížíte na mikrodata a mikroformáty obecně vy?

Zdroj: Schema.org