A HTML5 mikroadat-specifikáció segítségével a tartalmat olyan címkékkel lehet ellátni, hogy bizonyos típusú információkat – például ismertetőket, személyes adatokat vagy eseményeket – írjanak le. Minden információtípus egy bizonyos típusú elemet ír le, például egy személyt, es eseményt vagy ismertetőt. Egy eseménynek például a következő tulajdonságai lehetnek: helyszín, kezdési időpont, név és kategória.
A mikroadatok egyszerű attribútumokat használnak HTML címkékben (gyakran <span> vagy <div> címkékben), hogy rövid és leíró neveket rendeljenek elemekhez és tulajdonságokhoz. Íme egy rövid HTML kódblokk, amely néhány, Kovács Bélával kapcsolatos alapadatot tartalmaz.
<div> A becsületes nevem Kovács Béla, de általában csak Kovinak hívnak. Ez az én weboldalam: <a href="http://www.example.com">www.example.com</a> Miskolcon, Borsod-Abaúj-Zemplén megyében élek, és mérnökként dolgozom az HQLW Zrt. központjában. </div>
Ez ugyanaz a HTML mikroadatokkal megjelölve.
<div itemscope itemtype="http://data-vocabulary.org/Person"> A becsületes nevem <span itemprop="name">Kovács Béla</span> de általában csak <span itemprop="nickname">Kokó</span>-nak hívnak. Ez az én weboldalam: <a href="http://www.example.com" itemprop="url">www.example.com</a> Miskolcon, Borsod-Abaúj-Zemplén megyében élek, és <span itemprop="title">mérnökként</span> dolgozom az <span itemprop="affiliation">ACME Corp</span>. központjában. </div>
Ennek a mintának a felépítése.
- Az első sorban lévő
itemscopejelzi, hogy a<div>címkében lévő tartalom egy elem. Azitemtype="http://data-vocabulary.org/Personazt jelzi, hogy ez az elem egy személy. - A Személy elem minden tulajdonságát az
itempropattribútum azonosítja. Azitemprop="name"például a személy nevét írja le.
Beágyazott elemek
A fenti példa Kovács Béla kapcsolatfelvételi adatait mutatja meg, de a címét nem tartalmazza. Az alábbi példa ugyanazt a HTML-t mutatja be, de ebben az esetben az address tulajdonságot is tartalmazza.
<div itemscope itemtype="http://data-vocabulary.org/Person">
A becsületes nevem <span itemprop="name">Kovács Béla</span>,
de általában csak <span itemprop="nickname">Kokó</span>-nak hívnak.
Ez az én weboldalam:
<a href="http://www.example.com" class="url">www.example.com</a>.
Itt élek:
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Miskolcon</span>,
<span itemprop="region">Borsod-Abaúj-Zemplén megyében</span>
</span>
és <span itemprop="title">mérnökként</span> dolgozom
az <span itemprop="affiliation">ACME Corp</span>. központjában.
</div>
Ennek a mintának a felépítése:
- Az
addresstulajdonság önmagában is egy elem, amelynek megvannak a saját tulajdonságai. Ezt úgy jelezhetjük, hogy azitemscopeattribútumot arra az elemre helyezzük, amely azaddresstulajdonságot deklarálja, és azitemtypeattribútummal adjuk meg a leírandó elem típusát:<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
További példák: Beágyazott elemek.
Dátum- és időinformációk
A dátum és időpont egyértelmű megadásához használja a time elemet a datetime attribútummal. Itt a startDate tulajdonság jelzi egy esemény kezdésének időpontját. A datetime attribútumban szereplő érték ISO dátumformátumban van megadva. Ennek a formátumnak a használatával részletes dátum-, idő- és esetlegesen időzóna-információkat biztosíthat a keresőmotorok számára ISO formátumban („2009-10-15T19:00-08:00”), míg az oldalon ez továbbra is felhasználóbarát formában jelenik meg („2009. október 15., 19:00”).
<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">2009. október 15., 19:00</time>
Nem látható tartalom
A Google általában nem jelenít meg olyan tartalmat, amely nem látható a felhasználó számára. Más szóval, nem jelenít meg egyes tartalmakat a felhasználóknak, és a rejtett szöveget sem használja fel arra, hogy külön megjelölje az adatokat a keresőmotorok és internetes alkalmazások számára. Érdemes megjelölni azt a szöveget, amely ténylegesen megjelenik a felhasználóknak, amikor meglátogatják a weboldalt.
Ezen irányelvek alól van néhány kivétel. Egyes esetekben megéri megadnia részletesebb adatokat a keresőmotoroknak, még akkor is, ha nem akarja, hogy ez látható legyen az oldal látogatói számára. Ha például egy étterem értékelése 8,5 pont, akkor a felhasználók (a keresőmotorokkal ellentétben) feltételezni fogják, hogy az értékelés alapja egy tízpontos skála. Ezt a meta elemmel lehet jelölni, valahogy így:
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"> Értékelés: <span itemprop="value">8.5</span> <meta itemprop="best" content="10" /> </div>
Ennek a mintának a felépítése:
- A
metacímke segítségével olyan további információk adhatók meg, amelyek nem láthatók az oldalon – ebben a konkrét esetben a „lehető legjobb” érték a 10. A tulajdonság értékét acontentattribútummal lehet megadni.
Ehhez hasonlóan az esemény időtartamának a megadása (ISO időtartam-formátumban) révén az helyesen jelenik meg a keresési találatok mellett, valahogy így:
Időtartam: <span>1 óra 30 perc<meta itemprop="duration" content="PT1H30M" /> </span>
Ennek a mintának a felépítése:
- A
metacímkével lehet megadni a tulajdonság (ebben az esetben az időtartam) értékét. Ez lehetővé teszi, hogy acontentattribútum értékével („PT1H30M”) ISO 8601 időtartam-formátumban határozza meg az időtartamot, miközben azt továbbra is felhasználóbarát szöveggel („1 óra 30 perc”) jeleníti meg magán az oldalon. - A Google a
metaelem szülőelemét vizsgálva állapítja meg, hogy milyen információ szerepel alternatív módon ametacímkén belül. Jelen esetben tehát fontos meggyőződni arról, hogy ametacímke közvetlen szülőcsomópontja magában foglalja az „1 óra 30 perc” szöveget.
Specifikus szójegyzék és példák:
- Ismertetések
- Emberek
- Termékek
- Cégek és szervezetek
- Receptek
- Események
- Videó (vegye figyelembe, hogy bár a Google támogatja a videók jelölését, mi jelenleg csak a videokeresési találatok javítására használjuk).
Ellenőrizze a jelölést a strukturált adatok tesztelőeszközével.