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:
- Produktową, która zawiera informacje o nazwie (dodatkowo może być to: id, sku i wiele innych wymienionych tutaj: http://schema.org/Product)
- dodanie schematu względem, którego przekazane dane będą odczytywane przez roboty wyszukiwarki:
- itemtype=”http://schema.org/Product” itemscope
- dodanie znaczników meta w których zawieramy docelowe dane:
- <meta itemprop=”name” content=”Apple Iphone 7s”>
- dodanie schematu względem, którego przekazane dane będą odczytywane przez roboty wyszukiwarki:
- 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)
- dodanie schematu względem, którego przekazane dane będą odczytywane przez roboty wyszukiwarki:
- itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”
- dodanie znaczników meta w których zawieramy docelowe dane:
- <meta itemprop=”price” content=”1899.89″ />
- <meta itemprop=”priceCurrency” content=”USD” />
- <meta itemprop=”availability” content=”http://schema.org/InStock” />
- dodanie schematu względem, którego przekazane dane będą odczytywane przez roboty wyszukiwarki:
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