Cmlap Hírek, cikkek Mikroformázás vagy séma

Mikroformázás vagy séma

A Google a Yahoo és a Bing összefogtak, hogy egy közös html elemeket jelölõ szótárt alkossanak a webmestereknek, amellyel a weboldalon a keresõmotorok számára is érthetõ struktúrált formát adhatnak vissza.
Ez a nemrég indult schema.org  oldalon bárki számára elérhetõ.

Azonban tudni érdemes, hogy ehhez hasonló kezdeményezés már korábban (néhány éve) elindult, egy nonprofit szervezet alkotta meg, ez a microformats.org oldalon található. Azért említeném meg, mert ez a korábbi a css class attribútumot használja a struktúra felépítéséhez, és bizonyára ez adta az ötletet az új "séma" kialakításához is, mivel a struktúrálható típusok is hasonlók.
A lényeg, hogy a keresõk a html-bõl nem biztos, hogy a megfelõ részeket a megfelelõ módon értelmezik (nem biztos, hogy tudják az oldalon melyik rész micsoda), ezáltal esetleg a nem túl releváns találatokat is megjelenítik, vagy esetleg nem úgy jelennek meg az eredmények ahogyan azt a cikk vagy blog bejegyzés írója kitalálta.

Ezen akartak annak idején a microformat alkotói változtatni, és kitalálták, hogy a sima HTML4-es szabványnak megfelelõ tag-eket felhasználva (jelen esetben a class atribútumát az elemnek) fel lehetne használni jelölésre is.

Ezek az attribútumok ugyanúgy egymásba vannak ágyazva mint maguk az elemek, illetve az egymásba ágyazott elemk vannak jelölve.

Ilyen struktúrák lehetnek például cikkek (hNews), receptek (hRecipe), termékek (hProduct), események (hCalendar), stb...

Ugyanilyen, illetve hasonló típusokat sorakoztat fel a schema.org szótár is, csak nem a css-re épít hanem új attribútumot kapnak a html tag-ek.

A microformázások egy részét már most is figyelembe veszi az indexeléskor a google, illetve ha jól megnézzük még a facebook is használja például az esemény micformat-ot!

A tag-ek class-jába kell illeszteni az elõre meghatározott szabály szerinti elnevezéseket, ezzel jelezve, hogy hol kezdõdik pl. az esemény vagy cikk, illetve melyik elem a címe, a linkje, dátuma, stb...

A fentebb belinkelt oldalakon nézd át a számodra szükséges struktúrák jelölési módjait! Azért az érthetõbbség kedvéért bemutatom egy egyszerû példán mirõl is van szó.


Az alábbi példában ugyanazon esemény látható schema és microformat jelöléssel:

Esemény Shema.org jelöléssel

<div itemscope="" itemtype="http://schema.org/Event">

    <a itemprop="url" href="/esemeny-urlje.html" mce_href="/esemeny-urlje.html">
        Esemény címe (Pl: Görkori)
    </a>

    <time itemprop="startDate" datetime="2011-06-11T09:30:00">
        Dátum (Pl: 2011. június 11. de. fél 10)
    </time>

    <div itemprop="location" itemscope="" itemtype="http://schema.org/Place">
        <a itemprop="url" href="/helyszin-urlje.html" mce_href="/helyszin-urlje.html">
        Helyszín (Pl: Infopark, Magyar tudósok körútja)
    </a>
    </div>

    <span itemprop="description">
        Leírás (Pl: Közös görkorizáshoz talákozzunk a ...)
    </span>
    
</div>

Esemény microformat jelöléssel

<div class="vevent">

    <a class="url" href="/esemeny-urlje.html" mce_href="/esemeny-urlje.html">
        <span class="description">Esemény címe (Pl: Görkori)</span>
    </a>

    <span class="dtstart" title="2011-06-11 09:30">
        Dátum (Pl: 2011. június 11. de. fél 10)
    </span>

    <div class="location vcard">
        <a itemprop="url" href="/helyszin-urlje.html" mce_href="/helyszin-urlje.html">
            <span class="fn">Helyszín (Pl: Infopark, Magyar tudósok körútja)</span>
        </a>
    </div>

    <span class="summary">
        Leírás (Pl: Közös görkorizáshoz talákozzunk a ...)
    </span>

</div>


A mellékelt fényképeken egy facebook esemény html-je látható, amelyben megtalálhatóak ezek a jelölések.

(Firebug-gal nézd, ne az oldal forrását a menübõl!)



Ha tetszett vagy hasznosnak talltad, krlek oszd meg!
Author / szerz:
Tovbbi kpek:
A microformat-ot a facebook is használja
A microformat-ot a facebook is használja (kód folytatás)
Hozzszlsok
Vlasszon nyelvet!
Keress a tartalomban
Kattintson ide az adatok elkldshez!