Freebies
Sok weboldal tartalmaz olyan adatot, melyet érdemes kiemelni. Ilyen például egy webáruház. Adatkiemeléssel segítjük a keresőrobotok munkáját. Így például egy termék árára könnyebben tudnak rákeresni, mivel a Google kereső tisztában lesz azzal, hogy egy adott terméknek mi a neve, ára valamint melyik fénykép tartozik hozzá. Erre több megoldás is létezik, ilyen például a Microdata séma. Talán ez azoknak szimpatikus, akik html forráskódban készítik el a honlap tartalmát, így az egyes elemekhez könnyedén hozzáadják a szükséges kódokat.
<div itemscope itemtype="http://schema.org/Product" class="product-info">
<p itemprop="name">Fehér zokni</p>
<img itemprop="image" src="http://zoknibazar.hu/page/feher-zokni.jpg" alt="Fehér zokni" />
<p itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span itemprop="price">400 Forint/darab</span></p></div>
A példában látható, hogy nem bonyolult a séma használata, egyedül a helyes használatra kell figyelni. Mint látszik, a termék név és a termékhez tartozó kép a Product típusba tartozik, még a termék ára a Offer típusba. A kiemelés készítés során erre figyelni kell! Természetesen megkönnyíti a munkát a világhálón megtalálható rengeteg sablon, például a schema.org-on található képadat kiemelése minta forráskód.
A Microdata séma mellett még gyorsan megemlítenék egy kevésbé elterjedt megoldást, melyet az említett keresőoldal még tesztelő eszközzel is támogat. A JSON-LD (JSON for Linking Data) szkriptként jelenik meg a weboldal forrásában. Ugyan úgy alkalmazható termékek adatainak kiemelésére és minta kódok is bőséggel találhatók a világhálón. Használata viszont eltér, nem olvad össze a html kód elemeivel, így könnyebb az átláthatósága.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://zoknibazar.hu",
"logo": "http://zoknibazar.hu/page/logo.jpg",
"contactPoint" : [
{ "@type" : "ContactPoint",
"telephone" : "+36-80-123-4567",
"contactType" : "customer service"
} ],
"address": {
"@type": "PostalAddress",
"addressCountry": "Hungary",
"addressLocality": "Budapest",
"postalcode": "1234",
"streetAddress": "Napraforgó utca 88."
}
}
</script>
A példában egy nem létező cég adatai láthatók. Első ránézésre könnyedén megtalálható benne minden adat, így akár saját weboldalába könnyedén beépítheti, csak az adatokat kell módosítani.
Befejezésképp lássuk hogyan működik ez a gyakorlatban, mi is a haszna a kiemelésnek. A tyúkhúsleves szóra keresve, a keresési eredmények közt megjelennek azok a honlapok, melyeken használnak adatkiemelést. A címük mellett természetesen megjelennek azok az adatok, melyek a forráskódban ki lettek emelve. (Ebben az esetben általában a kép.) A megfelelő kiemeléssel jobb helyezést szerezhetünk weboldalunknak a keresési eredményekben, így a befektetett munka megéri a fáradtságot.