Znaczniki HTML zazwyczaj informują przeglądarkę internetową w jaki sposób wyświetlić umieszczone w tagach dane, ale nie wskazują znaczenia elementu. Kod HTML <h1>Oliver Twist</h1> dostarcza informacji dla przeglądarki, że tekst powinien zostać wyświetlony jako nagłówek najwyższego poziomu, ale nie mówi o tym, czy mowa jest o książce Karola Dickensa, filmie Davida Leana, miniserialu, czy filmie Romana Polańskiego o tymże tytule. Utrudnia to wyszukiwarkom inteligentne wyświetlanie odpowiedniej zawartości. Słownik schema.org wraz z formatem mikrodanych pozwala na dodawanie pomocniczych informacji do zawartości HTML.
Jak oznaczać zawartość mikrodanymi
Strony internetowe zawierają treści o określonym znaczeniu rozumianym przez ludzi, ale trudnym do rozgryzienia przez wyszukiwarki internetowe. Uzupełnienie dodatkowych znaczników pomaga wyszukiwarkom i innym aplikacjom na lepsze zrozumienie zawartości, a co za tym idzie, wyświetlenie jej w użyteczny, odpowiedni dla typu danych sposób. Mikrodane to zestaw znaczników zapoczątkowanych w HTML5, które pozwalają osiągnąć ten cel.
Atrybut itemscope
Zacznijmy od przykładu. W serwisie mamy stronę o filmie „Oliver Twist” Romana Polańskiego z linkiem do zwiastuna, informacją o reżyserze i gatunku:.
Kod HTML może wyglądać następująco:
<div>
<h1>Oliver Twist</h1>
<span>Reżyser: Roman Polański (ur. 18 sierpnia 1933)</span>
<span>Dramat</span>
<a href="../filmy/oliver-twist-mov.html">Trailer</a>
</div>
W pierwszym kroku należy dodać element itemscope do znacznika HTML, który obejmuje informacje o obiekcie danego typu (w tym przypadku filmu), np. tak:
<div itemscope>
<h1>Oliver Twist</h1>
<span>Reżyser: Roman Polański (ur. 18 sierpnia 1933)</span>
<span>Dramat</span>
<a href="../filmy/oliver-twist-mov.html">Trailer</a>
</div>
Atrybut itemtype
Poprzez dodanie itemscope określone zostaje, że kod HTML zawarty w bloku <div> dotyczy konkretnego obiektu, jednak nie jest to do końca pomocne. Dlatego za pomocą atrybutu itemtype umieszczonym zaraz po itemscope wskazujemy typ obiektu:
<div itemscope itemtype="http://schema.org/Movie">
<h1>Oliver Twist</h1>
<span>Reżyser: Roman Polański (ur. 18 sierpnia 1933)</span>
<span>Dramat</span>
<a href="../filmy/oliver-twist-mov.html">Trailer</a>
</div>
Zawartość atrybutu określa, że obiekt umieszczony w elemencie div, jest filmem (typ Movie w hierarchii schema.org). Typy obiektów są wskazywane za pomocą adresów URL.
Atrybut itemprop
Obiekt posiada zazwyczaj wiele właściwości. Film jest charakteryzowany przez tytuł, reżysera, obsadę, gatunek, itd. W celu oznaczania właściwości obiektu wykorzystuje się atrybut itemprop:
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Oliver Twist</h1>
<span>
Reżyser:
<span itemprop="director">Roman Polański</span>
(ur. 18 sierpnia 1933)
</span>
<span itemprop="genre">Dramat</span>
<a href="../filmy/oliver-twist-mov.html" itemprop="trailer">Trailer</a>
</div>
W atrybutach itemprop wskazano wybrane właściwości filmu określone w słowniku schema.org dla obiektu typu Movie. Aby wskazać prawidłowe nazwisko reżysera atrybutem itemprop="director", wstawiono dodatkowy znacznik <span>. Znaczniki span są w takiej sytuacji najwygodniejsze, ponieważ nie zmieniają sposobu wyświetlania strony przez przeglądarkę.
Dzięki zastosowaniu powyższych znaczników wyszukiwarka internetowa może dowiedzieć się, że pod adresem http://www.oliver-twist.film.pl znajduje się link do trailera filmu dramatycznego „Oliver Twist”, wyreżyserowanego przez Romana Polańskiego.
Elementy zagnieżdżone
Czasami wartość właściwości obiektu może być innym obiektem posiadającym własny zestaw właściwości. Na przykład można wskazać, że reżyser filmu jest obiektem typu Person o właściwościach name i birthDate. Aby wskazać, że wartością właściwości jest inny obiekt, należy wstawić element itemscope bezpośrednio po odpowiednim atrybucie itemprop:
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Oliver Twist</h1>
<span itemprop="director" itemscope itemtype="http://schema.org/Person">
Reżyser: <span itemprop="name">Roman Polański</span>
(ur. <span itemprop="birthDate">18 sierpnia 1933</span>)
</span>
<span itemprop="genre">Dramat</span>
<a href="../filmy/oliver-twist-mov.html" itemprop="trailer">Trailer</a>
</div>
Typy i właściwości schema.org
Schema.org opisuje szereg różnych typów obiektów (np. Book, Event, Organization, Place, Product, Review), z których każdy ma swój własny zestaw właściwości go opisujących. Serwis schema.org definiuje pełną listę typów obiektów rozpoznawanych przez wyszukiwarki Google, Bing i Yahoo!. Najwyżej w hierarchii znajduje się obiekt typu Thing posiadający 4 właściwości: name, description, url i image. Bardziej szczegółowe typy obiektów dziedziczą właściwości po swoich rodzicach (typach nadrzędnych).
Oczekiwane typy, tekst i adresy URL
Dodając znaczniki schema.org do stron internetowych należy pamiętać o kilku wskazówkach:
- Im więcej, tym lepiej, z wyjątkiem ukrytego tekstu. Ogólnie ma zastosowanie zasada, że im większa część treści zostanie oznaczona, tym lepiej. Jednak oznaczona powinna być jedynie zawartość widoczna dla użytkowników. Nie należy oznaczać zawartości w ukrytych elementach strony.
- Oczekiwane typy zastępowane tekstem. Właściwości w schemacie schema.org mają zdefiniowany oczekiwany typ danych. Często oczekiwanym typem jest inny obiekt. Oznacza to, że wartością właściwości może być zagnieżdżony obiekt, ale nie jest to wymagane. W takich przypadkach wartością może być również tekst lub adres URL. Poprawne jest również zagnieżdżenie typu potomnego do oczekiwanego (np. jeśli oczekiwany jest obiekt typu Event, równie dobrze można osadzić element MusicEvent).
- Korzystanie z właściwości
url. Niektóre strony dotyczą pojedynczego obiektu, a inne mogą być zbiorem elementów. W przykładowej sytuacji kiedy witryna posiada stronę z listą autorów artykułów i linkami do ich stron profilowych, to profile autorów powinny zostać oznaczone z wykorzystaniem typu Person. Dodatkowo na stronie zbiorczej z linkami do profili autorów każdy element powinien być oznaczony jako obiekt typu Person ze wskazaniem właściwościurlo wartości będącej adresem strony profilowej, np.:
<div itemscope itemtype="http://schema.org/Person">
<a href="jan-kowalski.html" itemprop="url">Jan Kowalski</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="adam-nowak.html" itemprop="url">Adam Nowak</a>
</div>
Testowanie znaczników
Powinno się testować znaczniki schema.org, aby mieć pewność, że zostały zaimplementowane poprawnie. Google dostarcza narzędzie Rich Snippets Testing Tool, które można wykorzystać do testowania znaczników i identyfikowania ewentualnych błędów.
Dane zrozumiałe dla maszyn
Czasami właściwość obiektu jest trudna do zrozumienia przez maszyny bez dodatkowego ujednoznacznienia. W takich przypadkach podczas oznaczania stron należy dostarczać wersję informacji czytelną dla maszyn.
Data, godzina i czas trwania
Data i godzina mogą być podawane na wiele różnych, niejednoznacznych sposobów. W celu ujednoznacznienia należy korzystać ze znacznika time z atrybutem datetime. Wartość datetime powinna być datą w formacie RRRR-MM-DD:
<time datetime="2011-07-08">08/07/11</time>
Można także wskazać godzinę korzystając z formatu hh:mm lub hh:mm:ss. Czas może być dostarczony razem z datą po prefiksie T (od ang. time):
<time datetime="2011-07-08T11:30">8 Lipiec, 11:30</time>
W kontekście oznaczania wydarzenia może to wyglądać w następujący sposób:
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Męskie Granie</div>
<span itemprop="description">
Niepokorni, przełamujący schematy i wyznaczający nową jakość.
</span>
Data koncertu:
<time itemprop="startDate" datetime="2011-08-06T18:00">
6 sierpnia, godz. 18:00
</time>
</div>
Czas trwania może być określony w analogiczny sposób przez wykorzystanie znacznika time z atrybutem datetime i prefiksem P (od ang. period). W następujący sposób można wskazać, że film trwa półtorej godziny:
<time itemprop="duration" datetime="PT1H30M">90 min.</time>
H służy do wskazania liczby godzin a M liczby minut. Formaty daty, godziny i czasu trwania są określone w standardzie ISO 8601.
Wykorzystanie znacznika link z atrybutem href
Wyliczenia (enumeracje)
Niektóre właściwości przyjmują jedynie wartości z ograniczonego zestawu. Przykładowo sklep internetowy może wykorzystywać typ Offer do określania szczegółów oferty (produktu). Właściwość availability (dostępność) może przyjmować jedną z kilku wartości: W magazynie, Brak, Na zamówienie, itp. Dostępne wartości mogą być wskazywane adresami URL z wykorzystaniem znacznika link i atrybutu href:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">iPhone 4</span>
<span itemprop="price">1749.00</span>
<meta itemprop="priceCurrency" content="PLN" />
<link itemprop="availability" href="http://schema.org/InStock"/>
Dostępny
</div>
Schema.org dostarcza wyliczenia dozwolonych wartości dla kilku właściwości.
Odwołania kanoniczne
Standardowo linki są wskazywane przez element <a>, jak w poniższym przykładzie:
<q>Z kłamstwa robi się istotę porządku świata.</q>
<div itemscope itemtype="http://schema.org/Book">
<span itemprop="name">Proces</span> -
<span itemprop="author">Franz Kafka</span>
<a itemprop="url" href="http://pl.wikipedia.org/wiki/Proces_(powieść)">
"Proces" w Wikipedii
</a>
</div>
Właściwość url może być wykorzystywana do wskazywania odnośnika do strony omawiającej ten sam obiekt w innym serwisie. Linki do innych witryn mogą pomagać wyszukiwarkom w lepszym zrozumieniu opisywanego obiektu.
Istnieją jednak sytuacje, w których nie chcemy dodawać widocznego linka do zewnętrznego serwisu. W takim przypadku można wykorzystać zamiennie element link, jak poniżej:
<q>Z kłamstwa robi się istotę porządku świata.</q>
<div itemscope itemtype="http://schema.org/Book">
<span itemprop="name">Proces</span> -
<link itemprop="url"
href="http://pl.wikipedia.org/wiki/Proces_(powieść)" />
<span itemprop="author">Franz Kafka</span>
</div>
Dodatkowe informacje w tagach meta
Czasami strona zawiera informacje, które są warte oznaczenia, ale jest to niemożliwe ze względu na sposób umieszczenia na stronie. Dane mogą być przekazane w obrazku (np. graficzna reprezentacja oceny obiektu), elemencie Flash (np. czas trwania filmiku) lub mogą być domyślne, ale nie zaznaczone wyraźnie na stronie (np. waluta ceny).
W takich przypadkach należy stosować znacznik meta z atrybutem content. Poniższy kod reprezentuje obrazek pokazujący ocenę użytkowników 4 na 5 gwiazdek:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">iPhone 4</span>
<span itemprop="price">1749.00</span>
<meta itemprop="priceCurrency" content="PLN" />
<img src="4-gwiazdki.jpg" />
123 głosy
</div>
Ten sam przykład z oznaczoną informacją o ocenie użytkowników będzie wyglądał w następujący sposób:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">iPhone 4</span>
<span itemprop="price">1749.00</span>
<meta itemprop="priceCurrency" content="PLN" />
<div itemprop="reviews" itemscope
itemtype="http://schema.org/AggregateRating">
<img src="4-gwiazdki.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
<span itemprop="ratingCount">123</span> głosy
</div>
</div>
Nie należy jednak nadużywać tego rozwiązania. Znacznik meta powinien być wykorzystywany jedynie dla informacji, które nie mogą być oznaczone w inny sposób.
W większości przypadków nie ma potrzeby rozszerzania słownika schema.org. Istnieje jednak możliwość określenia dodatkowych właściwości lub podtypów dla już istniejących typów obiektów. Ale o tym w następnym odcinku poradnika.
Kolejny rozdział poradnika
3. Przewodnik schema.org – zakres obiektów
