Czego się dowiesz z tego artykułu?

  • Czym są dane strukturalne?
  • Po co ich używać?
  • Jakie korzyści daje używanie danych strukturalnych?
  • Jak wdrażać dane strukturalne?
Dane strukturalne w SEO – Poznaj tajemnice rich snipets
Dane strukturalne w SEO – Poznaj tajemnice rich snipets

Google od lat skanuje cały internet katalogując miliardy informacji, które przydają się jego użytkownikom każdego dnia. Wyszukiwarka bazuje głównie na treściach tekstowych, roboty “czytają” strony by je poznać. Okazuje się, że można im ułatwić pracę oznaczając pewne elementy strony za pomocą danych strukturalnych, dzięki którym roboty nie muszą się zastanawiać jak używać konkretnej treści.

Czym są dokładnie dane strukturalne?

Dane strukturalne to specjalne opisy w kodzie HTML, pokazujące robotom czym jest dany element. Weźmy na przykład sklep internetowy i cenę poszczególnego produktu. Kod HTML prezentujący cenę może wyglądać następująco:

<div class="cena-produktu">
  <span>1,000.00</span>
  <span>zł</span>
</div>

Można go jednak rozszerzyć o dane strukturalne dotyczące ceny:

<div class="cena-produktu">
  <span itemprop="price" content="1000.00">1,000.00</span>
  <span itemprop="priceCurrency" content="PLN">zł</span> 
</div>

Dzięki temu można wskazać robotom, że w tym elemencie zawarta jest cena oraz jej waluta. Takim sposobem można zaznaczyć wiele z elementów produktu, które mogą zostać wykorzystane przez Google do wyświetlenia wyniku wyszukiwania.

Poniższy przykład pokazuje dwa wyniki wyszukiwania na to samo zapytanie:

dane strukuralne w wynikach wyszukiwania
dane strukuralne w wynikach wyszukiwania

Drugi zawiera fragmenty rozszerzone: gwiazdki recenzji, cenę oraz stan magazynowy. To właśnie dzięki danym strukturalnym Google jest w stanie wyświetlić więcej informacji na temat strony docelowej już na poziomie wyników wyszukiwania, dlatego warto uwzględnić dane strukturalne w swojej strategi SEO.

Czy opłaca się używać danych strukturalnych?

Chociaż używanie danych strukturalnych nie ma bezpośredniego wpływu na pozycję strony w wynikach wyszukiwania jest ono opłacalne.

Po pierwsze, Google o wiele lepiej zrozumie Twoją stronę, jej strukturę oraz to co chcesz przekazać swoim klientom.

Po drugie, jeżeli Google wyświetli dodatkowe informacje przy wyniku prowadzącym do Twojej strony, wynik ten bardziej zwraca na siebie uwagę. Jest atrakcyjniejszy i czasami wygeneruje więcej kliknięć niż linki prowadzące do innych stron będących wyżej.

Skąd brać informacje o danych strukturalnych?

Dane strukturalne to zdefiniowane wcześniej sposoby opisywania różnych elementów stron. Aby zachować porządek i zunifikować sposoby informowania robotów powstał projekt pod nazwą schema.org.

Wspólnymi siłami opracowały go cztery najważniejsze wyszukiwarki internetowe: Google, Microsoft, Yahoo oraz Yandex. Na stronie schema.org znajdziesz wszelkie informacje dotyczące danych strukturalnych oraz sposobów ich implementowania.

Chcesz się nauczyć skutecznie pozyskiwać klientów z Google? Zobacz nasz kurs SEO, który jest instrukcją działania krok po kroku.

Dzięki dokładnym instrukcjom oraz przykładom pokazywanych na stronie projektu możesz zapoznać się z wszystkimi dostępnymi rodzajami danych. Ich implementacja wymaga jednak wiedzy i znajomości języka HTML.

Dane strukturalne są uniwersalne, jednak występują trzy podstawowe sposoby ich implementacji na stronie internetowej:

Mikroformaty

Mikroformaty (lub mikrodane) to dodatkowe informacje bezpośrednio umieszczane w kodzie HTML każdego z elementów. Zostały one już przedstawione w przykładzie dotyczącym ceny produktu na początku tego wpisu.

Załóżmy, że mamy stronę internetową poświęconą filmom, a każdy z filmów ma swoją dedykowana podstronę. Nagłówek strony z podstawowymi informacjami o filmie będzie posiadał mniej więcej taki kod HTML:

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

Każdy z powyższych elementów oznaczających nazwę filmu, reżysera czy kategorie można opisać mikroformatami:

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

Najprościej mówiąc przy każdym z elementów umieszczamy informacje czy ten element jest, dając tym samym wskazówkę robotowi jak zapisać tę informację.

RDFa

RDFa to sposób bardzo podobny do mikroformatów, używa on jednak innej składni stworzonej przez WC3. Ten sam kod dotyczącym filmu można pokazać za pomocą RDFa:

<div vocab="http://schema.org/" typeof="Movie">
  <h1 property="name">Avatar</h1>
  <div property="director" typeof="Person">
  Director: <span property="name">James Cameron</span>
(born <time property="birthDate" datetime="1954-08-16">August 16, 1954</time>)
  </div>
  <span property="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" property="trailer">Trailer</a>
</div>

JSON-LD

Trochę innym sposobem na zaprezentowanie danych strukturalnych jest format JSON-LD (JavaScript Object Notation for Linked Data). JSON to uniwersalny format przechowywania oraz prezentowania danych. Służy on na przykład do komunikacji między aplikacjami napisanymi w różnych językach (wykorzystywany jest w większości API).

Jego uniwersalność znalazła również zastosowanie w prezentowaniu danych strukturalnych dla robotów wyszukiwarek. To co odróżnia ten sposób od poprzednich to miejsce w jakim podawane są dane. W tym przypadku nie oznaczamy każdego z elementów, a prezentujemy komplet informacji dotyczący jednej podstrony w formie obiektu, najczęściej umieszczonego w sekcji HEAD strony.

Dane tego samego filmu prezentowanego za pomocą JSON-LD będą wyglądały następująco:

<script type="application/ld+json">
{ 
  "@context": "http://schema.org/",
  "@type": "Movie",
  "name": "Avatar",
  "director": 
    { 
       "@type": "Person",
       "name": "James Cameron",
       "birthDate": "1954-08-16"
    },
  "genre": "Science fiction",
  "trailer": "../movies/avatar-theatrical-trailer.html" 
}
</script>

Oczywiście, informacje, które prezentujesz w obiekcie, muszą też być na stronie. Jeżeli umieścisz je tylko w sekcji HEAD dane strukturalne nie będą respektowane.

Jak wdrażać dane strukturalne?

Wiemy już, że używanie danych strukturalnych na pewno się opłaca. Trzeba jeszcze wiedzieć które z nich można zaimplementować, aby zyskać dodatkowe wyniki wyszukiwania oraz na jakich stronach powinny być one umieszczone.

Przy wdrażaniu danych strukturalnych najlepiej jest skorzystać z dokumentacji Google. Znajdziesz tam opisy wszystkich zestawów danych oraz przykłady ich zastosowania.

Warto tutaj zaznaczyć, że zgodnie z nazwą, dane strukturalne mają pewną strukturę i charakteryzują się pewnymi z góry ustalonymi zależnościami. Musisz wiedzieć, że na przykład wymieniona wcześniej cena może być przypisana do produktu czy usługi, ale nie może być przypisana do osoby.

Wszystkie zależności opisane są w dokumentacji na schema.org, natomiast Google podaje wszystkie przykłady gotowych zestawów danych.

Narzędzie do testowania danych strukturalnych

Wdrażając dane strukturalne na stronie będzie Ci potrzebna pomoc w sprawdzeniu poprawności wdrożenia. Bardzo pomocne okazuje się narzędzie do testowania danych strukturalnych pochodzące od Google.

Wklejając adres URL strony lub gotowy kod HTML, możesz sprawdzić poprawność wdrożenia. Narzędzie pokaże Ci jakie błędy zrobiłeś lub czego brakuje jeszcze w Twoich danych strukturalnych.

Sprawdź dane strukturalne tego artykułu, klikając w ten link.