Itemprop – czym są znaczniki schema.org

Jeśli chcesz, aby wyszukiwarka Google była w stanie lepiej analizować zawartość Twojej strony, warto jest skorzystać z mikroformatów schema.org, takich jak meta itemprop. Czym dokładnie one są i jak działają? Tego dowiesz się w tym artykule.

Mikroformaty schema.org – czym są?

Fragmenty rozszerzone (rich snippets) to dodatkowe informacje, jakie mogą być wyróżniane w wynikach wyszukiwania. Aby Google było w stanie je zinterpretować, należy je zakodować w specjalny sposób. Właśnie w tym celu powstał projekt schema.org. Jego celem jest tworzenie i ulepszanie uniwersalnego języka do kodowania takich elementów.

Przykład fragmentów rozszerzonych (rich snippets) widocznych w wynikach wyszukiwania

Jak wykorzystuje się takie oznaczenia w praktyce? Załóżmy, że sprzedajesz jakiś produkt. Można mu przypisać różne wartości jak waga, rozmiary, cena i opinie klientów. Powinieneś skupić się na tych najważniejszych, o których to potencjalny klient powinien dowiedzieć się najlepiej jeszcze zanim odwiedzi Twoją stronę.

Następnie takie informacje opisuje się za pomocą Microdata Markup, czyli specjalnego zbioru oznaczeń, który jest kompatybilny z HTML. Samo słownictwo związane z Microdata nie ma ściśle przypisanej semantyki. Dzięki temu programiści mogą korzystać z własnych terminów, choć w praktyce głównie wykorzystuje się te zapewnione przez schema.org.

Itemscope i itemtype – podstawowe oznaczenia

Jak cały proces wygląda od strony kodowania? Schema.org zapewnia mnóstwo szczegółowych oznaczeń. Oto część z nich, dotyczących tylko elementów oznaczonych jako „wydarzenie” (event):

Aby jednak zakomunikować wyszukiwarce, że dany fragment kodu dotyczy konkretnego podmiotu, który będzie następnie bardziej szczegółowo opisany, należy wykorzystać itemscope. Przykładowy kod będzie wyglądać następująco:

<div itemscope>

<h1>Procesor1</h1>

<span>marka: Intel </span>

</div>

Poprzez dodanie elementu itemscope informujesz wyszukiwarkę, że kod HTML zawarty w bloku <div>…</div> dotyczy konkretnego elementu. Oczywiście warto także jak najszybciej określić, o czym dokładnie mowa. Do tego celu służy już itemtype. Pierwsza część zapisu będzie wyglądać zatem następująco:

<div itemscope itemtype=”https://schema.org/Product„>

Dzięki temu oznaczeniu wyszukiwarka wie, że dana strona dotyczy produktu, który nabywają klienci, a nie np. wpisu encyklopedycznego o filmie.

Meta itemprop – dodatkowe szczegóły

Jakie dodatkowe informacje na temat produktu możemy zapewnić? W pierwszej kolejności warto zacząć od marki. Do opisywania takich dodatkowych elementów służy atrybut itemprop. Na przytoczonej wcześniej liście dotyczącej pozycji Productznajdziesz różne oznaczenia. Brand dotyczy właśnie marki. Kod będzie zatem wyglądać następująco:

<div itemscope itemtype=”https://schema.org/Product„>

<h1 itemprop=”name”>Procesor1</h1>

<span>Marka: <span itemprop=”brand”>Intel</span>

</div>

Podsumowanie

Korzystanie z mikroformatów schema.org to świetny sposób na wzbogacenie widoczności w sieci. Postaraj się zatem wykorzystać ich potencjał.