Schema.org – dane strukturalne i SEO

4 lipca 2021
tigre
seo
0 Comments

Schema.org – dane strukturalne i SEO

Pojedynczy standard schema.org pojawił się w 2011 roku z inicjatywy trzech największych wyszukiwarek – Google, Microsoft i Yahoo. Później nowy schemat był wspierany przez gigantów wyszukiwania w Internecie,. W 2021 r. ponad 10 milionów witryn używa znaczników semantycznych Schema.org, zarówno do oznaczania stron internetowych, jak i wiadomości e-mail. Wiele znanych usług, takich jak Google, Microsoft, Pinterest, korzysta ze słowników Schema.org w celu poprawy komfortu użytkowania.

Schema.org powstał w celu poprawy jakości wyników wyszukiwania. Mikroznaczniki są wykonywane za pomocą tagów, które zawierają dodatkowe atrybuty. Dają możliwość ręcznego określenia metadanych, podpowiadając robotom wyszukiwarek, co dokładnie znajduje się na wybranej stronie internetowej.

Jeśli strona ma poprawny znacznik semantyczny, w wynikach wyszukiwania nie zostanie wyświetlony standardowy fragment, ale rozszerzony. Będzie zawierać na przykład cenę towaru, adres sklepu, czy SKU towaru.

Struktura schema.org

Według struktury schema.org jest semantycznym słownikiem znaczników. Zawiera wiele klas, które są używane do określenia zawartości strony internetowej. Słownik zawiera szczegółowy opis właściwości dla każdej klasy. Składnia jest drugim obowiązkowym elementem znaczników Schema. Można powiedzieć, że słownik to język programowania, a składnia to metoda posługiwania się nim.

Składnia jest metodą określania właściwości i innych danych słownikowych. Dane te są podawane bezpośrednio w kodzie strony internetowej.

Oprócz Schema.org istnieją również inne słowniki, takie jak Open Graph, który swego czasu był najpopularniejszy w Runecie. W dalszym ciągu rozwijane są inne słowniki: Microdata, RDFa, FOAF i DUBLIN CORE.

Do 2021 r. istniało znaczne zamieszanie związane z kilkoma słownikami stosującymi różną składnię. Dla znaczników Schema.org można stosować kilka wariantów składni, od microdata do JSON-LD, który jest aktywnie rekomendowany przez Google.

Główne atrybuty Schema.org

Znacznik semantyczny Schema.org opiera się na trzech głównych atrybutach:

itemscope – Pokazuje zakres słownika mikrodanych i określa zakres danych. Używając tego atrybutu, robot wyszukiwania rozumie, że strona zawiera opis konkretnego obiektu. Atrybut itemscope jest zawsze używany w połączeniu z atrybutem itemtype.
itemtype – pokazuje adres słownika użytego do wygenerowania znacznika. W naszym przypadku atrybut itemtype będzie wskazywał na domenę schema.org.
itemprop – pozwala dodać konkretną właściwość do wybranego elementu. Para nazwa-wartość.

Typy danych

Pełna lista typów jest dostępna na schema.org. Najczęściej oznaczane są następujące typy danych:

Artykuły (artykuł).
Okruszki (Breadcrumbs).
Produkty ( Produkt ).
Recenzje ( Recenzja ).
FAQ (strona FAQ).
Organizacja

Przyjrzyjmy się bliżej, jak zaimplementować znaczniki dla wszystkich określonych typów danych.

Trochę o tagach

Jeśli znasz HTML, nie ma problemów z tagami. Dla początkujących webmasterów zwracamy uwagę, że w kodzie znaczników semantycznych schema.org są używane standardowe tagi HTML:

div – znacznik „kontenera” do odgraniczania sekcji dokumentu. div pozwala ułożyć elementy blokowe i pokazać początek/koniec opisywanego obiektu;
span to wbudowany kontener. Przydatne do opisywania obiektu fragmentami tekstu;
link to tzw. pusty element (przykłady pustych elementów: <area>, <base>, <br>, <col>, <embed>) używany do ustawienia kanonicznego adresu URL. Ten tag jest używany w połączeniu z atrybutem href do wskazania łącza;
czas – określa datę lub czas. Zwróć uwagę na format, który musisz określić. Data – tylko w formacie RRRR-MM-DD (np. 2021-07-22). Czas – tylko w formacie Thh:mm (np. T19:10) lub w formacie Thh:mm:ss (np. T05:10:10);
<a> widoczny link </a> – ten tag jest potrzebny do pokazania adresów URL, które powinny być widoczne na stronie;
<meta> – do przechowywania dodatkowych informacji.

Zobaczmy teraz, jak używać tych tagów podczas generowania kodu.

Jak ręcznie oznaczyć dane na przykładzie filmu

Załóżmy, że mamy stronę internetową o filmie To. Na niej, oprócz opisu filmu, znajduje się również link do zwiastuna. Otwórz schema.org i znajdź żądany typ danych – film . Znajdziesz tam wszystkie niezbędne atrybuty związane z opisem filmu.

Coś takiego może wyglądać jak kod strony bez znaczników semantycznych:

<div>
<h1>It (2017 film) </h1>
<span> Reżyser: Andy Muschetti (ur. 26 sierpnia 1973) </span>
<span> Horror </span>
<a href = „../ movies / ono-teaser .html „> Zwiastun </a>
</div>

Wszystko się zgadza. Ale musimy pokazać robotowi dokładnie, która część strony internetowej należy do zwiastuna filmu. Odbywa się to za pomocą atrybutu itemscope:

<div itemscope itemtype=”http://schema.org/Movie” >
<h1>Nowy</h1>
<span>Reżyser: Andy Muscetti (rok 26 sierpnia 1973 r.)</span>
<a href=”../movies/ono-teaser.html”>Teaser</a>
</div>

Dzięki typowi elementu robot wyszukiwania wie na pewno, że strona jest dedykowana filmowi. W opisie teasera mamy już informacje o gatunku, tytule, reżyserze filmu. Ale te dane nie są oznaczone, a wyszukiwarki widzą je nieprawidłowo. Możesz naprawić sytuację, stosując nazwę atrybutów, reżysera, gatunek i inne: