Microdata – semantyczne rozszerzenie HTML

- autor: tsissput

Microdata to specyfikacja rozszerzająca język HTML o możliwość zagnieżdżania semantyki w istniejących treściach na stronach internetowych. Wyszukiwarki, roboty sieciowe i przeglądarki mogą wyodrębnić te dane w celu zaproponowania różnych usprawnień użytkownikom. Mikrodane korzystają ze słownika pozwalającego opisać element oraz oznaczyć jego parametru poprzez pary nazwa – wartość. Ułatwia to wyszukiwarkom i robotom sieciowym zrozumienie treści zawartych na stronie, co przekłada się na lepsze wyniki wyszukiwania. Opracowanie standardu microdata to próba stworzenia prostszego sposobu opisywania elementów HTML z wykorzystaniem zrozumiałych dla programów tagów, niż podobne mikroformaty i RDF.

Słowniki mikrodanych dostarczają semantykę lub wyjaśniają sens elementu. Twórcy stron internetowych mogą projektować własne słownictwo lub korzystać ze słowników dostępnych w internecie. Zbiór powszechnie używanych i wspieranych przez google słowników znajduje się na stronie data-vocabulary.org. Obejmują one:

    • osoby,
    • zdarzenia,
    • organizacje,
    • produkty,
    • recenzje,
    • zbiory recenzji,
    • nawigacje okruszkowe (breadcrumbs),
    • oferty,
    • zbiory ofert.

Inne słowniki znaczników dostarczane są przez schematy ze strony schema.org. Główne wyszukiwarki korzystają z tych znaczników w celu poprawy wyników wyszukiwania. Dla niektórych celów odpowiedni jest słownik ad-hoc. W pozostałych, słowniki muszą zostać zaprojektowane od podstaw. Jeśli to możliwe, autorzy powinni wykorzystywać istniejące schematy, gdyż zwiększa to reużywalność takich słowników.

Do stworzenia elementu semantycznego używa się atrybutu itemscope:

<div itemscope>
  <p>Mam na imię Andrzej.</p>
</div>

Aby dodać własność, należy skorzystać z atrybutu itemprop w jednym z potomków elementu:

<div itemscope>
  <p>Mam na imię <span itemprop="name">Andrzej</span>.</p>
</div>

W taki sposób dodaje się własności typu string. Aby dodać własność typu URL, należy użyć elementu a oraz jego atrybutu href:

<div itemscope>
  <p>Mam na imię <span itemprop="name">Andrzej</span>.</p>
  <p>Moja strona internetowa to <a href="andrzej.com" itemprop="url">andrzej.com</a>.</p>
</div>

Podobnie można dodać daty, godziny, lub obie te własności jednocześnie. Należy skorzystać wtedy ze znacznika time z atrybutem datetime:

<div itemscope>
  <p>Mam na imię <span itemprop="name">Andrzej</span&gt.</p>
  <p>Moja strona internetowa to <a href="andrzej.com" itemprop="url">andrzej.com</a>.</p>
  <p>Urodziłem się <time datetime="1990-01-15" itemprop="birthday">15 stycznia 1990 roku</time>.</p>
</div>

Właściwości można w sobie zagnieżdżać używając atrybutu itemscope:

<div itemscope>
  <p>Mam na imię <span itemprop="name">Andrzej</span>.</p>
  <p>Mój dom ma <span itemprop="house" itemscope><span itemprop="rooms">5</span> pokoi i znajduje się w mieście <span itemprop="city">Poznań</span></span>.</p>
</div>

Właściwości, które nie znajdują się w potomkach elementu posiadającego atrybut itemscope, mogą zostać z nim powiązane przy pomocy atrybutu itemref. Wartością tego atrybutu powinna być lista ID elementów opisujących dane pojęcie:

<div itemscope id="Andrzej" itemref="a b"> </div>
<p id="a">Mam na imię <span itemprop="name">Andrzej</span>.</p>
<p id="b" itemprop="house" itemscope itemref="c"> </p>
<p id="c">Mój dom ma <span itemprop="rooms">5</span> pokoi i znajduje się w mieście <span itemprop="city">Poznań</span>.</p>

Powyższy przykład daje taki sam rezultat jak poprzedni. Pierwszy element ma dwie własności: name ustawione na „Andrzej”, oraz house ustawiony na inny element. Drugi obiekt ma kolejne właściwości: rooms ustawione na „5” oraz city – „Poznań”.
Jeden element może mieć kilka własności o tej samej nazwie, ale innych wartościach:

<div itemscope>
  <p>Moje ulubione kolory to:</p>
  <ul>
    <li itemprop="color">Niebieski</li>
    <li itemprop="color">Czerwony</li>
  </ul>
</div>

Element może oznaczać wiele własności razem, jeśli ich wartości są takie same. Można uniknąć w ten sposób duplikowania treści:

<div itemscope>
  <span itemprop="favorite-club favorite-beer">Lech</span>
</div>

Warto zwrócić uwagę na to, że nie ma żadnego związku pomiędzy mikrodanymi, a zawartością dokumentu, którą opisują. Nie ma różnicy pomiędzy tymi dwoma przykładami:

<div>
  <img src="andrzej.jpeg">
  <caption><span itemscope><span itemprop="name">Andrzej</span></span></caption>
</div>

<span itemscope><meta itemprop="name" content="Andrzej"></span>
<div>
  <img src="andrzej.jpeg">
  <caption>Andrzej</caption>
</div>

W obu przypadkach znajduje się zdjęcie z opisem oraz parę nazwa – wartość z nazwą „name” oraz wartością „Andrzej”, kompletnie nie związaną ze zdjęciem. Jedyną różnicą jest to, że w drugim przypadku twórca wyjął własność z widocznej treści dokumentu, przedstawiając ją w bardziej sformalizowany sposób. Jednak w obu przypadkach zdjęcie ni jest w żaden sposób związane z opisującym je elementem.
Jeśli korzystamy z gotowego słownika należy określić URL jednoznacznie go opisujący, czyli tzw. przestrzeń nazw. Robimy to przy wykorzystaniu atrybutu itemtype:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  <p>Mam na imię <span itemprop="name">Andrzej</span>.</p>
</div>

Czasami element zawiera informacje o pojęciu, które posiada globalny identyfikator. Na przykład książki mogą być zidentyfikowane po swoim numerze ISBN. W tym celu wykorzystuje się znacznik itemid:

<div itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  <p>Title <span itemprop="title">The Reality Dysfunction</p>
  <p>Author <span itemprop="author">Peter F. Hamilton</span></p>
</div>

W powyższym przykładzie słownik „http://vocab.example.net/book” powinien definiować, że atrybut itemid przyjmuje urn wskazujący na ISBN książki.

Każdy element HTML może posiadać atrybut boolowski itemscope. Element z takim atrybutem rozpoczyna opis nowego pojęcia, czyli grupę par nazwa – wartość. Elementy takie mogą mieć także atrybut itemtype, nadający pojęciu jego typ. Atrybut ten musi posiadać wartość, która jest poprawnym i bezwzględnym adresem URL. Jeśli element nie posiada tego atrybutu, lub jego wartość jest pusta, wtedy pojęcie nie posiada swojego typu. Typ elementu musi być zdefiniowany w obowiązujących specyfikacjach. O ile nie określono inaczej, adres URL podany jako typ nie powinien być automatycznie dereferencjowany. Specyfikacja może określać, że adres ten może być przetworzony w celu dostarczenia użytkownikowi informacji pomocy. W rzeczywistości autorzy słowników są zachęcani do udostępniania użytecznych informacji pod podanym adresem URL.
Elementy bez atrybutu itemscope nie mogą posiadać atrybutu itemtype.

Każdy element HTML może posiadać atrybut itemprop, a co za tym idzie, dodawać właściwość do jednego lub wielu pojęć. Atrybut itemprop musi zawierać wartość, która jest nieuporządkowanym zestawem unikalnych tokenów, oddzielonych spacjami, które są wrażliwe na wielkość liter i reprezentują nazwy par, które dodają. Wartość atrybutu musi zawierać co najmniej jeden taki token.
Każdy token musi być:

      • Poprawnym, bezwzględnym adresem URL.
      • Jeśli pojęcie ma zdefiniowany typ: nazwa zdefiniowanej własności, dozwolonej w danym miejscu przez specyfikację.
      • Jeśli pojęcie niema zdefiniowanego typu: ciągiem znaków nie zawierających kropki ani dwukropka, czy też spacji.

Jeśli element z atrybutem itemprop dodaje własności do wielu pojęć, powyższe wymagania muszą być spełnione dla każdego z nich. W ramach pojęcia własności są nieuporządkowane względem siebie, z wyjątkiem właściwości o tej samej nazwie, które są uporządkowane w kolejności, w jakiej są podawane przez algorytm definiujący pojęcie.

Wartość pary nazwa – własność dodanej do pojęcia za pomocą atrybutu itemprop zależy od elementu:

      • Jeśli element posiada także atrybut itemscope, wartością jest tworzone przez niego pojęcie.
      • W przypadku elementu meta, wartością jest wartość jego atrybutu content.
      • W przypadku elementów audio, embed, iframe, img, source, track i video, wartością jest URL uzyskany z jego atrybutu src.
      • W przypadku elementów a, area i link, wartością jest URL uzyskany z jego atrybutu href.
      • W przypadku elementu object, wartością jest URL uzyskany z jego atrybutu data.
      • W przypadku elementu time posiadającego atrybut datetime, wartością jest zawartość tego atrybutu.
      • W pozostałych przypadkach, wartością jest zawartość danego elementu.

Karol Kosiński (103892)

Advertisements

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: