× Aktuálně z oboru

SHIELD Experience Upgrade 7 – méně hledání a více zábavy [ clanek/2018052902-shield-experience-upgrade-7-mene-hledani-a-vice-zabavy/ ]
Celá zprávička [ clanek/2018052902-shield-experience-upgrade-7-mene-hledani-a-vice-zabavy/ ]

Microdata aneb obohaťte svůj výsledek ve vyhledávání

[ http://programujte.com/profil/21246-filip-podstavec/ ]Google [ https://plus.google.com/+FilipPodstavec?rel=author ]       [ http://programujte.com/profil/118-zdenek-lehocky/ ]Google [ ?rel=author ]       7. 5. 2012       31 416×

Ve výsledcích vyhledávání Google občas narazíte na stránky, kterým výsledek zdobí obrázek, hvězdičkové hodnocení a jiná data přejatá ze stránky. Reklama? Magie? Ne, správně použité značkování microdaty uvnitř struktury stránky!

Co jsou microdata

Microdata jsou způsobem, jak označit ve zdrojovém kódu webové stránky strojově čitelná data. Jejich zpracováním dostávají (nejen) roboti vyhledávačů informace o interním obsahu webu a dokáží jej promítnout do výsledků vyhledávání.
Microdata byla stvořena za účelem jednoduchého značení kódu, dostupného všem webdesignérům bez dlouhého učení syntaxe (což se u Microformátů a RDF říct nedá).

Takto může vypadat váš výsledek ve výsledcích vyhledávání

Přínos microdat

Nečekejte úžasné pozice a fanfáry za sémanticky zaznačený web s microdaty. Tyto přídavné informace Vám bohužel v pozicích výsledků vyhledávání nepomohou. Co ale můžete s jistotou očekávat, pokud robot tato data úspěšně zpracuje, je zvýšení CTR výsledku ve vyhledávání. Hodnoty CTR po zobrazení microdat ve výsledcích vyhledávání jsou o poznání vyšší a často přinášejí, díky přidaného hodnotě ze stránky, relevantnější návštěvníky. Jednoduše řečeno, návštěvník nejde na stránku téměř naslepo, ale již s informacemi o webu a jeho obsahu.

Aplikace microdat, syntaxe

Ta není nikterak složitou záležitostí, přesto si pojďme pro začátek říct a ukázat pár základů.

Aplikace microdat není zásahem do designu webové stránky, pouze označením částí zdrojového kódu. Můžete se proto směle vrhnout na značení bez jakékoli obavy z vlivnější změny nesoucí následky.

Pro značení kódu se používají následující atributy:

  1. Itemscope

    Označuje nový objekt, jež následující část kódu obsahuje. Pro jednodušší představu, může jít o článek, osobu,… Tomuto objektu se poté přiřazuje popis pomocí itemprop a přiřazuje schema pomocí absolutní URL adresy.

  2. Itemtype

    Odkaz specifikující schema daného objektu. Schema je možné si vytvořit i vlastní, ale důrazně doporučuji odkazovat na již hotové a platné.

  3. Itemprop

    Pomocí tohoto atributu označujete detailní popis objektu, ve kterém se nachází.

Schema.org

Jak jsem již uváděl výše, atribut itemtype by měl odkazovat na již existující schema. Za tímto účelem byl vytvořen ve spolupráci Google, Microsoft (Bing), Yahoo a jiných velkých hráčů portál Schema.org [ http://schema.org/ ].
Na tomto portále naleznete veškeré informace a především dokumentaci akceptovatelných microdat vyhledávači.

Praktická ukázka

Ukažme si, jak vypadá takové zaznačení kódu. Vezměme v úvahu vcelku obyčejnou situaci, ke které se může dostat většina blogerů a webdesignérů - autor vlastní blog/magazín, na kterém přispívá více redaktorů a rád by informaci o redaktorech předal skrz microdata robotům vyhledávačů. Takto author info před označením zdrojového kódu:

<div class="authinfo">
	Pavel Vaněk
	<img src="/pavlovafotka.jpg" />
	Profesor
	+420 604 444 444
	<a href="mailto:vanous@vanouspavel.cz">vanous@vanouspavel.cz</a>
	Pavel Vaněk je autorem tohoto magazínu již po 6 let a kontinuálně přispívá zajímavé články.
	<a href="http://pavluvblog.cz/">Blog</a>
</div>

Veškeré údaje o redaktorovi jsou vymyšlené. Doufám, že jsem tímto kusem zdrojového kódu neurazil nějakého reálného Pavla Vaňka.

Nyní se můžeme dát do značení. Abychom zjistili, co vše se dá robotovi o daném autorovi říct, musíme nejprve nalézt na Schema.org [ http://schema.org/ ] nejbližší objekt autorovi. V našem případě jde o objekt Person.
Dále již stačí značit podle dostupných atributů, v našem případě by tedy stránka vypadala takto:

<div class="authinfo" itemscope itemtype="http://schema.org/Person">
	<span itemprop="name">Pavel Vaněk</span>

	<img itemprop="image" src="/pavlovafotka.jpg" />

	<span itemprop="jobTitle">Profesor</span>
	<span itemprop="telephone">+420 604 444 444</span>
	<a href="mailto:vanous@vanouspavel.cz" itemprop="email">vanous@vanouspavel.cz</a> 

	<span itemprop="description">Pavel Vaněk je autorem tohoto magazínu již po 6 let a kontinuálně přispívá zajímavé články.</span> 

	<a href="http://pavluvblog.cz/" itemprop="url">Blog</a>
</div>

Revize microdat

Jak ale poznat, jestli není někde chyba a zda data, která jsme označili, jsou správně? Google poskytuje jednoduché řešení pomocí nástroje Rich snippet testing tool [ http://www.google.com/webmasters/tools/richsnippets ]. Tento nástroj Vám pomůže zjistit či zkontrolovat stav stránek a zobrazit náhled výsledku ve vyhledávání při pozitivním vyhodnocení roboty vyhledávačů.

Doporučení & Tipy

Pouhé nasazení microdat nezaručuje jejich uvedení ve výsledcích vyhledávání. Pro zvýšení šance na zobrazení je dobré dodržovat pár základních zásad:

  1. Nepoužívejte microdata pouze na jedné stránce, snažte se o použití globální.
  2. Využijte co možná nejvíce dostupných dat k popisu.
  3. Přikládejte k objektům obrázky. Pokud se microdata ve vyhledávání projeví, mají tyto náhledy zásadní vliv na CTR.

Závěrem

V nynější době prozatím nepoužívaná microdata mohou být světlou budoucností vyhledávání. Přidané informace o webové stránce usnadňují uživatelům Google orientaci ve výsledcích vyhledávání.
Jejich slabinou je prozatím nízká frekvence zobrazení ve výsledcích vyhledávání. Důležitým faktem je, že aplikace microdat nemůže webu nijak ublížit, pokud nemluvíme o zneužívání a jiných podvodech.

Další zdroje o microdatech

České

  1. Webdesignérův průvodce po HTML5: Microdata | Zdrojak.cz [ http://www.zdrojak.cz/clanky/webdesigneruv-pruvodce-po-html5-microdata/ ]
  2. Microdata a jejich využití při optimalizaci webových stránek | Blog.Podstavec.cz [ http://blog.podstavec.cz/microdata-a-jejich-vyuziti-pri-optimalizaci/ ]

Zahraniční

  1. Getting started | Schema.org [ http://schema.org/docs/gs.html ]
  2. Microdata(HTML) | Wikipedia [ http://en.wikipedia.org/wiki/Microdata_(HTML) ]
  3. About Microdata | Webmaster tools help [ http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035 ]

Článek stažen z webu Programujte.com [ http://programujte.com/clanek/2012033001-microdata-aneb-obohatte-svuj-vysledek-ve-vyhledavani/ ].