Výsledky vyhladavania vo vyhladavaci Google sa stava cim dalej konkurencieschopnejsie. A preto Google predstavil Rich Snippets, je to novy sposob ako zobrazit efektivnejsie obsah stranky priamo vo vyhladavaci. Je to metoda ako sa odlisit od ostatnych podobnych vysledkov vo vyhladavani.
Rich Snippets (strukturovane uryvky) sa stavaju novymi klucovymi slovami. Tieto male detaily (kusky kodu, ktore zadate do html kodu) sposobia "pop" zobrazenie vaseho obsahu aby sa odlisil od ostatnych bez ohladu na to ktoru poziciu mate na prvej strane. Spravne pouzitie Rich Snippets je v dnesnej dobe nevyhnutne aby sme sa odlisili od konkurencie.
Co su v skutocnosti Rich Snippets
Rich Snippets su kusky kodu, ktore zabezpecia zobrazenie viacerych doplnkovych informacii priamo vo vyhladavani. Tieto kusky kodu, ktore su potrebne implementovat do kodu stranky sa volaju Rich Markup (standard najdete na
Schema.org). Tento standard samozrejme podporuje aj spolocnost Google.
Ukazme si konkretny priklad
Predstavme si ze nasa stranka je o filme Avatar, na stranke mame link na trailer k filmu, informacie o reziserovi atd. HTML kod bude vyzerat nasledovne:
<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>
Zacneme s identifikaciou sekcie o stranke ktora je o filme Avatar. Urobime to tak, ze pridame polozku
itemscope do kodu, ktory uzatvara tuto sekciu, nasledovne:
<div itemscope>
<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>
Pridanim polozky
itemscope specifikujeme, ze kod html obsiahnuty v <div>...</div> tagu patri k danej sekcii.
A to nie je vsetko co potrebujeme specifikovat. Dalsim krokom bude specifikacia o aky druh polozky sa jedna. Druh polozky zadefinujeme pomocou atributu
itemtype ktory vlozime hned za
itemscope.
<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>
Takto definujeme ze obsah v <div> tagu je o filme, tak ako je definovany v hierarchii schema.org. Typy poloziek su definovane ako URL adresy, v tomto pripade
http://schema.org/Movie.
Co mozeme este zadefinovat o filme Avatar? Filmy maju dalsie zaujimave informacie ako mena hercov, rezisera, hodnotenie. Definovat vlastnosti poloziek mozeme pomocou atributu
itemprop. Napriklad ked chceme identifikovat rezisera filmu zadame atribut
itemprop="director" do prvku ktory uzatvara meno rezisera. (Na stranke
http://schema.org/Movies najdete vsetky atributy k tejto sekcii)
<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>
Vsimnite si, ze som pridal <span>...</span> tag, do ktoreho som doplnil
itemprop atribut k danemu textu na stranke. <span> tag nemeni vzhlad stranky ako ju renderuje prehliadac, takze su vhodne html prvky pre pouzitie s atributmi
itemprop.
Vyhladavace teraz vedia nie len to, ze dana URL je http://wwwavatarmovie.com, ale aj to ze informacie v nej su o filme Avatar, ktory reziroval James Cameron.
Pouzitie slovnika schema.org
Nie vsetky stranky su o filmoch v nasledovnej sekci vam ukazem kde a ako najdeme dalsie typy poloziek, ktore mozete pouzit na stranke. Na stranke schema.org najdeme aj dalsie typy z ktorych kazda ma svoje vlastne atributy a nastavenia, ktore mozu byt pouzite na specifikaciu co sa na danej stranke nachadza.
Tu je zoznam najpouzivanejsich typov:
- Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
- Embedded non-text objects: AudioObject, ImageObject, VideoObject
- Event
- Organization
- Person
- Place, LocalBusiness, Restaurant ...
- Product, Offer, AggregateOffer
- Review, AggregateRating
