Mikroformaty, czyli jak wdrożyć dane strukturalne schema.org?

Dane strukturalne zgodne ze standardem schema.org opracowanym dla stron internetowych spełniają szereg zadań. Pozwalają wyszukiwarce lepiej zrozumieć treści zawarte w witrynie i prawidłowo interpretować je. Dzięki nim strona ma również większe szanse na zaistnienie w rozszerzonych wynikach wyszukiwania (rich snippets). W jaki sposób prawidłowo wdrożyć dane strukturalne na swojej stronie www? Tego dowiecie się z poniższego wpisu. Znajdzie się też miejsce na kilka przykładów popularnych mikroformatów wprost do wykorzystania na Waszych sajtach ????

Z roku na rok w SERPACH coraz mniej miejsca znajduje się na tradycyjne wyniki organiczne tj. wylistowane adresy URL + title + description. Coraz więcej zaś, co szczególnie widać po wynikach mobilnych (Wszak mamy rok mobile! Który to z kolei?) miejsca zajmują tzw. wyniki rozszerzone, zarówno tekstowe jak i graficzne i answer boxy zwane też pozycją zerową. Pierwsze miejsce w wynikach wyszukiwania nie jest już tak łakomym kąskiem jak jeszcze parę lat temu. Co więcej w naturalnych wynikach również pojawia się szereg dodatkowych, urozmaicających elementów jak: oceny, breadcrumbsy czy cena. Jak mówi przysłowie – DOSTOSUJ SIĘ ALBO ZGIŃ. Poznanie mocy danych strukturalnych jest szansą na pozostanie przy tej pierwszej opcji.

Co to są mikroformaty?

Mówiąc najogólniej to co jest w pełni zrozumiałe dla Ciebie czytelniku niekoniecznie musi być takie jasne dla robotów Google, które czasami potrzebują nieco naszej pomocy aby w pełni zrozumieć otaczający je świat. Przykładowo więc numer telefonu, który wyświetla się w dziale kontakt na Twojej witrynie dla wyszukiwarki może być tylko ciągiem niewiele znaczących cyfr. Czy jest to PIT, NIP, numer konta, a może nazwa własna autora strony? Opisanie wszystkich danych, jakie znajdują się w obrębie witryny mikroformatami oraz zawarcie możliwie wielu informacji w danych strukturalnych schema.org pozwoli nam uniknąć tych problemów. Co za tym idzie Google lepiej będzie mogło poradzić sobie ze zrozumieniem naszej strony i zaindeksowaniem jej w swoich zasobach.

Jak stosować dane strukturalne na stronach www?

Dane strukturalne możemy zawierać w kodzie strony w sekcji HEAD (JSON-LD), BODY (mikrodane) lub opisując widoczne z poziomu użytkownika treści (mikroformaty). Każdy z tych trzech sposobów przedstawiam poniżej. Wystarczy, że podmienisz zawartość i możesz je śmiało wykorzystać na swojej stronie www.

Mikrodane dla biznesu lokalnego (należy wkleić w sekcji BODY, najlepiej tuż przed jej zamknięciem):

<span itemscope itemtype=”http://schema.org/LocalBusiness”>

<meta itemprop=”priceRange” content=”PLN”/>

<meta itemprop=”name” content=”Nazwa Twojej firmy”/>

<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

<meta itemprop=”streetAddress” content=”Twoja ulica”/>

<meta itemprop=”addressLocality” content=”Miasto”/>

<meta itemprop=”addressRegion” content=”Województwo”/>

<meta itemprop=”postalCode” content=”kod pocztowy”/>

</span><span itemprop=”location” itemscope itemtype=”http://schema.org/Place”>

<link itemprop=”url” href=”http://lepiej-widoczni.pl/”>

<link itemprop=”hasMap” href=”https://goo.gl/maps/kod-twojej-mapy”>

<span itemprop=”geo” itemscope itemtype=”http://schema.org/GeoCoordinates”>

<meta itemprop=”latitude” content=”52.00000″ />

<meta itemprop=”longitude” content=”20.0000″ />

</span> </span><meta itemprop=”telephone” content=”888 888 888″/>

<meta itemprop=”image” content=”adres url grafiki” /></span>

 

Dane strukturalne JSON-LD do wklejenia w sekcji HEAD:

<script type=”application/ld+json”>

{

„@context”: „http://schema.org”,

„@type” : „LocalBusiness”,

„priceRange” : „PLN”,

„telephone” : „Tel: (22) 888 888 888”,

„email” : „twoj@email.pl”,

„address”: {

„@type”: „PostalAddress”,

„addressLocality”: „Miasto”,

„addressRegion”: „Wojewdztwo”,

„postalCode”:”kod pcztowy”,

„streetAddress”: „Ulica i numer domu”

},

„description”: „Opis Twojej strony”,

„name”: „Nazwa Twojej strony”,

„url” : „https://lepiej-widoczni.pl”,

„image” : „adres url grafiki”,

„openingHours”: „Mo,Tu,We,Th,Fr 09:00-17:00”,

„geo”: {

„@type”: „GeoCoordinates”,

„latitude”: „51.34”,

„longitude”: „73.98”

},

„sameAs” : [ „http://www.facebook.com/profil”,

„http://www.twitter.com/profil”],

„review”: {

„@type” : „Review”,

„author”: „Lepiej Widoczni”,

„reviewBody” : „Opisz czym się zajmujesz”

}

}

</script>

 

Mikroformaty – ujęcie w odpowiednich znacznikach danych widocznych dla użytkownika:

 

<div itemscope=”” itemtype=”http://schema.org/localbusiness”>

<span itemprop=”name”>Nazwa Twojej strony</span><br>

<span itemprop=”url” href=”http://www.example.com”>http://lepiej-widoczni.pl</span>

<span itemprop=”address” itemscope=”” itemtype=”http://schema.org/PostalAddress”>

 

<span itemprop=”streetAddress”>Ulica i numer domu</span><br>

<span itemprop=”addressLocality”>Irvine</span>, <span itemprop=”addressRegion”>Województwo</span>

<span itemprop=”postalCode”>kod pocztowy</span>

</span><br>

<a itemprop=”telephone” href=”tel:+111111111″>111111111</a><br>

<span itemprop=”faxNumber”>Twój fax</span><br>

<span itemprop=”email”>Twoj@mail.com</span>

<link itemprop=”image” itemprop=”logo” href=”adres url gafiki”>

<time itemprop=”openingHours” datetime=”Mo, Tu, We, Th, Fr 09:00-17:00″>Dni i godziny otwarcia</time>

</div>

Aby sprawdzić czy w sposób prawidłowy umieściliśmy nasze dane strukturalne warto skorzystać z narzędzia do testowania uporządkowanych danych.