W tym artykule opiszemy krok po kroku jak poprawnie wdrożyć mikrodane dla stron produktowych w Twoim e-sklepie

Jeżeli nie wiesz jeszcze czym są mikrodane dla ecommerce polecamy zacząć od naszego artykułu wprowadzającego: Mikrodane w e-commerce – dlaczego Google ich potrzebuje

Do wdrożenia przedstawionych niżej zmian będziesz potrzebował minimum wiedzy technicznej z zakresu HTML a najlepiej jeżeli przekażesz ten artykuł w ręce swojego programisty.

Aby łatwiej zobrazować cały proces posłużymy się prostym przykładem:

Kod HTML bez mikrodanych:

<div class=”product”>
	<span class=”name”>Apple Iphone 7s</span>
	<div class=”offers”>
		<span class=”price”>1899.89<span class=”currency”> USD</span></span>
		<span class=”availability”>instock</span>
	</div>
</div>

Kod HTML z wykorzystaniem mikrodanych:

<div class=”product” itemtype="http://schema.org/Product" itemscope>
	<meta itemprop="name" content="Apple Iphone 7s">
	<span class=”name”>Apple Iphone 7s</span>
	<div class=”offers” itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<meta itemprop="price" content="1899.89" />
		<meta itemprop="priceCurrency" content="USD" />
		<meta itemprop="availability" content="http://schema.org/InStock" />
		<span class=”price”>1899,89<span class=”currency”> USD</span></span>
		<span class=”availability”>instock</span>
	</div>
</div>

Modyfikacje, które zostały wprowadzone polegają na dodaniu odpowiednich znaczników zgodnych ze standardem http://schema.org – i to tak naprawdę wszystko co musimy zrobić.

Kod został podzielony na dwie części:

1. Produktową, która zawiera informacje o nazwie (dodatkowo może być to: id, sku i wiele innych wymienionych tutaj: http://schema.org/Product)
   1. dodanie schematu względem, którego przekazane dane będą odczytywane przez roboty wyszukiwarki:
      1. itemtype=”http://schema.org/Product” itemscope
   2. dodanie znaczników meta w których zawieramy docelowe dane:
      1. <meta itemprop=”name” content=”Apple Iphone 7s”>
2. Ofertową, która zwiera informacje o cenie i dostępności (dodatkowo może być to: stan produktu i inne wymienione tutaj: http://schema.org/Offer)
   1. dodanie schematu względem, którego przekazane dane będą odczytywane przez roboty wyszukiwarki:
      1. itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”
   2. dodanie znaczników meta w których zawieramy docelowe dane:
      1. <meta itemprop=”price” content=”1899.89″ />
      2. <meta itemprop=”priceCurrency” content=”USD” />
      3. <meta itemprop=”availability” content=”http://schema.org/InStock” />

Jak widać wprowadzone modyfikacje nie są skomplikowane, a podany przykład pozwali na ich łatwe i poprawne wdrożenie.

W większości systemów sklepowych szablon strony produktowej pozwala na przekazanie danych odnośnie ceny czy dostępności produktu do kodu HTML w postaci tzw. makr, np. {{price}}, {{availability}}. Wykorzystanie tych znaczników spowoduje ich automatyczne uzupełnienie na każdej stronie produktowej.

Warto także pamiętać, ze wprowadzenie znaczników mikrodanych w żaden sposób nie będzie widoczne dla użytkownika końcowego – aspekt wizualny naszej strony nie ulegnie zmianie.

Po wdrożeniu mikrodanych warto sprawdzić ich poprawność wykorzystując do tego przygotowane przez Google narzędzie

Więcej informacji można znaleźć także w artykule przygotowanym przez Google: https://support.google.com/merchants/answer/6069143?hl=en