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.7 (93.82%) głosów: 55

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

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