Mikrodane

Język HTML5 zawiera ponad 100 znaczników. Część z nich to elementy sematyczne, ale większość stanowi kontenery dla różnych elementów strony. Znaczniki te zazwyczaj tylko informują przeglądarkę internetową w jaki sposób wyświetlić umieszczone w tagach dane, ale praktycznie nigdy nie wskazują znaczenia elementu. Kod <h1>Jurassic Park</h1> dostarcza informacji dla przeglądarki, że tekst powinien zostać wyświetlony jako nagłówek najwyższego poziomu, ale nie mówi o czym jest mowa – czy jest to tytuł filmu, książki, artykuł w gazecie, itd.  Utrudnia to wyszukiwarkom inteligentne wyświetlanie odpowiedniej zawartości – po prostu w przeciwieństwie do człowieka nie są w stanie w łatwy sposób zidentyfikować zawartości znaczników. Dlatego też powstały tzw. mikrodane. Słownik schema.org wraz z formatem mikrodanych pozwala na dodawanie pomocniczych informacji do zawartości HTML, określających ich zawartość.

Mikrodane to mające zdefiniowany zakres adnotacje DOM w postaci para nazwa-wartość z niestandardowych słowników.

Oznacza to, że Mikrodane to jakby niestandardowy (nie oparty o standardowe znaczniki HTML5) słownik danych, które pokazują wyszukiwarce co reprezentuje dany fragment tekstu na stronie. Tak naprawdę każdy webmaster może zdefiniować słownik mikrodanych i używać własnych własności na swoich stronach. Muszą mieć one postać par nazwa-wartość.  Aby użyć własności mikrodanych na stronie, należy w odpowiednim miejscu wpisać jej nazwę. Sposób pobierania wartości mikrodanych jest zależny od miejsca deklaracji nazwy własności.

 

Jak oznaczać zawartość mikrodanymi

Uzupełnienie standardowych znaczników języka HTML5 o dodatkowe znaczniki pomaga wyszukiwarkom i innym aplikacjom na lepsze zrozumienie zawartości strony i dzięki temu wyświetlenie jej w bardziej użyteczny sposób.

Atrybut itemscope

Przykład: w serwisie mamy stronę o filmie „Jurassic Park” Stevena Spielberga z linkiem do zwiastuna, informacją o reżyserze i gatunku. Jej kod na naszej stronie może być podobny do tego:

<div>
<h1>Jurassic Park</h1>
<span>Reżyser: Steven Spielberg (ur. 1946)</span>
<span>Sciene-fiction</span>
<a href="../filmy/jurassic-park.html">Trailer</a>
</div>

Na poczatku 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>Jurassic Park</h1>
<span>Reżyser: Steven Spielberg (ur. 1946)</span>
<span>Sciene-fiction</span>
<a href="../filmy/jurassic-park.html">Trailer</a>
</div>

Atrybut itemtype

Od teraz wyszukiwarka internetowa „wie”, że kod HTML zawarty w bloku <div> dotyczy konkretnego obiektu. Musimy teraz wskazać typ obiektu za pomocą atrybutu itemtype:

<div itemscope itemtype="http://schema.org/Movie">
<h1>Jurassic Park</h1>
<span>Reżyser: Steven Spielberg (ur. 1946)</span>
<span>Sciene-fiction</span>
<a href="../filmy/jurassic-park.html">Trailer</a>
</div>

Dzięki temu wyszukiwarka już „wie”, że typ obiektu to film. Typy obiektów są wskazywane za pomocą adresów URL.

Atrybut itemprop

Następnie powinniśmy oznaczyć dodatkowe właściwości obiektu (np. tytuł, reżyser, gatunek, itd) – w tym celu wykorzystuje się atrybut itemprop:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Jurassic Park</h1>
<span>
Reżyser:
<span itemprop="director">Steven Spielberg</span>
(ur. 1946)
</span>
<span itemprop="genre">Sciene-fiction</span>
<a href="../filmy/jurassic-park.html" itemprop="trailer">Trailer</a>
</div>

Dzięki temu wyszukiwarka internetowa może dowiedzieć się co znajduje się pod danym adresem internetowym.

 

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.

Dodając znaczniki Mikrodanych koniecznie pamiętajmy o kilku wskazówkach:

  • Im więcej, tym lepiej. Ogólnie ma zastosowanie zasada, że im większa część treści zostanie oznaczona, tym lepiej.
  • Oczekiwane typy zastępowane tekstem. Właściwości w schemacie schema.org mają zdefiniowany oczekiwany typ danych, który powinien zostać poprawnie przekazany w zaznaczonym elemencie.
  • Prawidłowe korzystanie z właściwości url.

Testowanie znaczników

Aby przetestować znaczniki i mieć pewność, że zostały poprawnie dołączone do strony, można wykorzystać narzędzie Rich Snippets Testing Tool

 

Dane zrozumiałe dla komputerów

W niektórych przypadkach właściwość obiektu może być trudna do zrozumienia przez wyszukiwarki. W takich przypadkach należy dostarczyć czytelną wersję informacji:

Data, godzina i czas trwania.

Data i godzina są podawane na najróżniejsze sposoby. Aby wyszukiwarka zrozumiała poprawny czas, należy skorzystać ze znacznika time z atrybutem datetime. Wartość datetime powinna być datą w formacie RRRR-MM-DD:

<time datetime="2015-12-02">2 grudnia 2015</time>

Można także wskazać konkretną godzinę korzystając z formatu hh:mm. Należy to wykonać w taki sposób

<time datetime="2015-12-02T20:30">2 grudnia 2015, godzina 20:30</time>

 

Model danych mikrodanych

Nazwę własności mikrodanych zawsze deklaruje się w elemencie HTML. Natomiast odpowiadająca jej wartość jest pobierana ze struktury DOM tego elementu. W przypadku większości elementów HTML, wartość ta jest tekstową treścią elementu. Jest jednak kilka wyjątków, które zostały przytoczone w poniższej tabeli:

Pochodzenie wartości własności mikrodanych
Element Wartość
<meta> atrybut content
<audio>
<embed>
<iframe>
<img>
<source>
<video>
atrybut src
<a>
<area>
<link>
atrybut href
<object> atrybut data
<time> atrybut datetime
wszystkie pozostałe elementy zawartość tekstowa

 

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close