Keresők által támogatott tartalmi jelölések

Keresők által támogatott tartalmi jelölések. A Microsoft, a Yahoo és a Google összefogott, hogy egységes microdata jelölőrendszert hozzanak létre a webes tartalmak jelölésére. Az eredeti angol nyelvű leírás itt található meg.

Ennek rövidített leírását és értelmét világosítom meg az eredeti példák felhasználásával:

Tegyük fel, hogy az Avatar című filmet szeretnénk a keresők számára minnél jobban megjeleníteni. A legegyszerűbb html kód így nézhet most ki:

<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>

Ez a kód semmit nem mond arról, hogy a megjelenített tartalom miről szól, az adatok mit jelentenek. Az Első dolog az, hogy a kódrészlet egy egységet jelent - item-et, és a kód ennek leírását tartalmazza. Az item hatáskörét az itemscope paraméter adja meg, amelyet a div utasításba teszünk, és a típusát egy egységes és bővíthető leírórendszerben rögzítjük az itemtype paraméter segítségével, valahogy így:

<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>

Ez a kód azt adja meg, hogy ez az egység egy mozi tulajdonságait írja le, amit a http://schema.org/Movie URL ad meg.

A moziknak és minden egyébnek további fontos jellemzőik is lehetne, mint például a film rendezője. Az ilyen tulajdonságokat az itemprop paraméterrel jelezhetjük:

<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>

Az itemprop használatánál felhívom a figyelmet a span tag használatára. mivel ennek a html tagnek nincsen kifejezett vizuális jelentése, ezért alkalmas az itemprop paraméter hordozójául.

lehetséges egy itemscope egy itemprop tulajdonságához további itemscope és itemtype paramétereket főzni, hizsen a Movie itemtype director tulajdonságához a rendező neve valójában egy itemtype a "Person" tartozik, akinek tulajdonsága a születési ideje. A megoldás az, hogy az itemprop="director" után közvetlenül a beágyazott itemscope és annak itemtype tulajdonságát lehet használni:

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name"&g;Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

A schema.org elnevezéstana több típust ad meg. Ezek az általánostól a specializált felé haladva léteznek, mint például a Thing (dolog), Place (hely), stb... Néhány alapvető típus itt található:

A teljes lista itt található

Néhány ajánlat a használatra:

  • Inkább használjuk, mint ne használjuk, illetve mint a rejtett szövegeket használjuk
  • Nyugodtan használjunk egymásba ágyazott szövegeket

  • Használjuk url-ek tulajdonságaiként

    <div itemscope itemtype="http://schema.org/Person">
  <a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
  <a href="bob.html" itemprop="url">Bob Smith</a>

A teszteléshez a google ad egy megfelelő eszközt.

Gépek által is megérthető formájú információ

A weboldalakat a korábbiak alapján már elég jól le lehet írni, de vannak olyan adattípusok, amelyek további paraméterek nélkül nem jól értelmezhetők a weboldalak számára. Ilyen például a dátum, idő. Erre használhatók az alábbi technikák:

A dátum és idő jelölése

<div itemscope itemtype="http://schema.org/Event">
  <div itemprop="name">Spinal Tap</div>
  <span itemprop="description">One of the loudest bands ever 
  reunites for an unforgettable two-day show.</span>
  Event date: 
  <time itemprop="startDate" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
</div>

A dátumok és időpontok jelölésére az ISO 8601 date/time szabványt használja.

Felsorolási típusú adatok

A programozók által előszeretettel használt típusok, mint például a "létezik", "nem létezik" kategória, mint felsorolási típus. Az alábbi példában az "Offer" itemtype az itemprop="availability" értékkel szerepel.

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <span itemprop="availability">Available today!</span>
</div>

Az alábbi példában egy URL-ben leírt paraméter mondja meg a availability lehetséges jelentéseit.

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <link itemprop="availability" href="http://schema.org/InStock"/>Available today!
</div>

Kanonikus hivatkozások

A linkeket az <a> tag jelenti tipikusan a html leíró nyelvben. ha egy linket akarunk beszúrni, akkor szokás szerint megtehetjük, hogy az itemporp="url" tulajdonságot használjuk

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>?
  by <span itemprop="author">J.D. Salinger</a>
  Here is the book's <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia page</a>.
</div>

Így megjelenik a link a szövegben. Esetleg, ha ezt el akarjuk kerülni, akkor az alábbi lehetőségünk van:

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>? 
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</div>

Meta tagok használata a tartalom magyarázatára

Előfordul, hogy az információt grafikusan, vagy flash objektumokkal jelenítjük meg, ugyanakkor a keresőbarát megoldást is szeretnénk használni. Ilyenkor egymásba lehet ágyazni a tulajdonságokat. Az alábbi példában egy kép jelenti a vizuálisan megjelenített információt - az adat a maximális 5-ből csak a 4 értéket vette fel. Ezt a felhasználó részére előállítja egy script a four-stars.jpg kép formájában, amit a kereső nem tud értékelni. A megoldás az alábbi:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
    Based on <span itemprop="ratingCount">25</span> user ratings
  </div>
</div>

Ebben az esetben az AggregateRating itemtype-nak adtuk meg két paraméterét: <meta itemprop="ratingValue" content="4" /> - az aktuális érték, <meta itemprop="bestRating" content="5" /> - a legnagyobb érték meta tagokat használtuk.

Meta tag-e csak akkor használjunk, ha másképpen nem tudjuk megjelölni az információt.

A sémákat természetesen lehet bővíteni. Ennek a módjáról ezen a linken lehet tájékozódni: http://www.schema.org/docs/extension.html