Web Design Blog / Web:

Dane strukturalne (uporządkowane)

Dane strukturalne to informacje na stronie internetowej, które pozwalają lepiej zrozumieć jej treść wyszukiwarce. Jak można się domyślić zalety płynące z zastosowania tego rozwiązania są więc niezliczone. W tym artykule pokażę jak je stosować, na co trzeba uważać i w jaki sposób dane strukturalne wpływają na pozycję w wyszukiwarce.

Prawdziwy potencjał danych uporządkowanych – bo taka terminologia istnieje w polskojęzycznych narzędziach Google – ujawnia się tam gdzie danych (czyli w przypadku www: treści) jest stosunkowo dużo.

Cel stosowania danych uporządkowanych

Podstawowym problemem dla wyszukiwarek internetowych jest zwracanie odpowiednich odpowiedzi w wynikach wyszukiwania na zapytania użytkowników. To dlatego, że jeszcze nie są wstanie na 100% rozstrzygnąć czy tekst na stronie jest wiarygodny, wyczerpujący i czy będzie dla użytkownika przydatny. Aby to zmienić wprowadza się metadane, czyli dane opisujące dane. Dzięki temu jest większe prawdopodobieństwo, że nie dojdzie do nieporozumienia i wszyscy na tym korzystają: właściciele stron internetowych, użytkownicy i wyszukiwarki.

Dane uporządkowane to kolejna próba „naprawienia Internetu” ale też krok dalej niż kolejny znacznik meta, rel lub semantycznie brzmiące znaczniki (jak zostało to wprowadzone w HTML5). Dane strukturalne mówią wyszukiwarce: „Słuchaj, to jest strona firmy lokalnej z Wrocławia”, „to jest Blog na temat mody”. W przypadku sklepu internetowego: „Ta liczba to cena w walucie PLN, a ta pod spodem to ilość towaru w magazynie”. Mogą to być też bardziej szczegółowe kwestie jak część przepisu kulinarnego, w której wymienione zostały składniki. Informacje takie są zamieszczane na stronie w zestandaryzowany sposób co pozwala klasyfikować, porównywać i analizować dane, w wyniku czego zwracać jeszcze lepsze rezultaty.

Korzyści dla użytkownika

Poza oczywistą kwestią wyższej jakości zwracanych wyników, użytkownicy mają okazję namacalnie skorzystać z dobrodziejstw danych strukturalnych a są nimi fragmenty rozszerzone lub jak kto woli: rich snippets. Poniżej prezentuję przykłady z losowo znalezionych wyników wyszukiwania:

Przykład 1: Sklep internetowy (ocena produktu, liczba opinii, cena, stan magazynowy, lub tylko zakres cen)

dane uporządkowane - sklep

Jak widać na tym przykładzie, wyróżnieniu podlegają najważniejsze informacje z punktu widzenia klienta. Cena, opinie i dostępność – to właśnie tego najczęściej szukamy a fragmenty rozszerzone pomagają nam w szybszym znalezieniu interesujących nas produktów.

Przykład 2: Bilety na imprezy/wydarzenia (data, nazwa, miejsce)

dane uporządkowane - impreza, event

Załóżmy, że szukamy biletów na interesującą nas imprezę. Tutaj rich snippets pomagają nam w odnalezienie strony na konkretne wydarzenie na jakie się wybieramy.

Przykład 3: Przepisy kulinarne – (zdjęcie potrawy,  ocenę, ilość opinii i czas przyrządzenia)

dane uporządkowane - przepis kulinarny

Atrakcyjne zdjęcie dania, którego dotyczy przepis z pewnością zwiększy szansę na to, że szukająca tego przepisu osoba kliknie właśnie ten wynik, choćby się znajdował dopiero na trzeciej czy piątej pozycji.

Przykład 4: Blog (ocena, ilość głosów, data publikacji)

Dane uporządkowane - blog

O tym jakie jeszcze mamy rodzaje danych strukturalnych, można poczytać na stronach, do których podałem linki w sekcji ze źródłami.

Testujemy dane strukturalne

Jeżeli zamieszczamy dane strukturalne na stronie internetowej, musimy mieć pewność, że mają one poprawną składnię. W przeciwnym wypadku nie pomożemy wyszukiwarkom w sklasyfikowaniu danych znajdujących się na naszej stronie i tym samym fragmenty rozszerzone nie będą działać. Artykuł z błędnym kodem danych uporządkowanych będzie też zwykle uzyskiwał gorsze pozycje w wyszukiwarce. Dlaczego? Otóż, nie otrzymawszy korzyści płynących z danych strukturalnych zmniejszamy stosunek treści do kodu HTML, który jest przecież sygnałem rankingowym.

Istnieje narzędzie do automatycznego analizowania poprawności danych strukturalnych i zdiagnozowania ewentualnych błędów: Narzędzie do testowania uporządkowanych danych

Jeżeli interesuje cię testowanie własnej witryny, możesz znaleźć więcej narzędzi do testowania witryn, które szczegółowo wymieniłem w artykule: Jakość stron internetowych.

Wspierane formaty danych uporządkowanych

JSON-LD (metoda zalecana przez Google) – polega na dodaniu skryptu w nagłówku lub w ciele strony internetowej. Nie jest przeplatany z treścią tak jak to mamy rozwiązane w pozostałych formatach co zapobiega powstawaniu ewentualnych kolizji. JSON-LD można dynamicznie wstrzykiwać np. za pomocą JavaScriptu i wyszukiwarka nie ma z ich odczytywaniem najmniejszego problemu.

Przykład:

<script type='application/ld+json'> 
{
 "@context": "http://www.schema.org",
 "@type": "LocalBusiness",
 "name": "Nazwa firmy",
 "url": "http://nazwa-firmy.pl",
 "logo": "http://nazwa-firmy.pl/logo.png",
 "image": "http://nazwa-firmy.pl/obrazek1.jpg",
 "description": "Nazwa firmy zajmuje się produkcją i dystrybucją...",
 "address": {
 "@type": "PostalAddress",
 "streetAddress": "ul. Długa 64",
 "addressLocality": "Warszawa",
 "addressRegion": "mazowieckie",
 "postalCode": "00-001",
 "addressCountry": "Warszawa"
 }
}
 </script>

Mikrodane (microdata) – bardzo popularne rozwiązanie. Polega na dodawaniu dodatkowych atrybutów i wartości w znacznikach HTML bezpośrednio w ciele strony. Wadą są możliwe problemy związane z zapisem liczb i formatów adresowych, taki przypadek pokazałem w dodatku 1, który możecie znaleźć na końcu artykułu.

<div itemscope itemtype="http://schema.org/Organization">
   <span itemprop="name">Nazwa firmy</span>
   Dane kontaktowe:
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      Adres:
      <span itemprop="streetAddress">Długa 16</span>
      <span itemprop="postalCode">00-001</span>
      <span itemprop="addressLocality">Warszawa</span>,
    </div>
   Telefon:<span itemprop="telephone">+48 123 123 123 </span>
</div>

RDFa –  stosowane zarówno w ciele strony jak i w jej nagłówku rozszerzenie technologii HTML5 które pozwala na przeplatanie danych z treścią strony.

<div vocab="http://schema.org/" resource="#bbg" typeof="LocalBusiness">
 <h1 property="name">Nazwa Firmy</h1>
 <span property="description"> Nazwa firmy zajmuje się produkcją i dystrybucją...</span>
 <div property="address" resource="#bbg-address" typeof="PostalAddress">
 <span property="streetAddress">00-001 Długa 64</span>
 <span property="addressLocality">Warszawa</span>,
 <span property="addressRegion">PL</span>
 </div>
 Telefon: <span property="telephone">+48 123 123 123</span>
</div>

Podsumowanie

Dane strukturalne polepszają wrażenia użytkownika naszej strony jeszcze zanim użytkownik na nią trafi. Z góry jest przekonany, że znajdzie to czego szukał. Dzięki temu, że treść jest lepiej rozumiana przez wyszukiwarkę, zwykle znajdziemy się wyżej w wynikach wyszukiwania. Stosowanie danych strukturalnych obniży tym samym współczynnik odrzuceń, dzięki temu, że rzadziej będzie dochodzić do nieporozumień na linii wyszukiwarka – użytkownik.

Źródła

https://json-ld.org/

http://schema.org/docs/schemas.html

https://developers.google.com/search/docs/guides/intro-structured-data

https://rdfa.info/

https://www.w3.org/TR/microdata/

 

Dodatek 1: Częsty problem danych strukturalnych w PrestaShop

Ponieważ jest do tego niepowtarzalna okazja, wspomnę o najczęstszym błędzie związanym z danymi strukturalnymi jaki poprawiam dla klientów zwracających się do mnie o optymalizację sklepów internetowych.

Jak wiecie, nie przepadam za gotowymi rozwiązaniami, choćby dlatego, że większość z nich jest przygotowywana na rynek zachodni i stosując te rozwiązania u nas w Polsce, na naszej stronie po jakimś czasie aż roi się od błędów. Deweloperzy PrestaShop i twórcy gotowych szablonów popełnili mały błąd, mianowicie. Pole „cena produktu” musi mieć w danych uporządkowanych format liczbowy zachodni (kropka zamiast przecinka w separatorze dziesiętnym). Zgodnie z ustawieniami w lokalizacji platforma pozwoli nam na stosowanie przecinka w cenach produktów. Narzędzie do testowania oczywiście zwróci błąd niedozwolonego znaku.

Rozwiązaniem jest tutaj modyfikacja szablonu, najczęściej product.tpl:

1: Usuwamy ze znacznika zawierającego cenę atrybut i wartoś: itemprop=”price”

2: Dodajemy po cenie odpowiednie dane <meta itemprop=”price” content=”{$productPrice}”> podmieniając przecinek na kropkę za pomocą dowolnej metody.

Dane strukturalne (uporządkowane)
4.74 (94.71%) głosów: 34

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail