Rich snippets: zwiększanie CTR w sklepie internetowym poprzez dane strukturalne Google

Rich snippets, czyli rozszerzone opisy stron internetowych, to nic innego jak dodatkowe treści, dzięki którym klienci mogą otrzymać więcej informacji już na samym etapie wyszukiwania. Warto więc zadbać, aby nasz e-commerce posiadał te znaczniki poprawnie i w pełnym wymiarze skonfigurowane. Przeczytaj artykuł i dowiedz się, jak poprawnie wykorzystywać Rich Snippets w swoim ecommerce.

Spis treści

Co to są rich snippets i jakie dają możliwości?

Rich Snippets, czyli dane uporządkowane, to dodatkowe znaczniki HTML w naszym sklepie. Pozwalają w jednoznaczny sposób określić poszczególne elementy serwisu w sposób ustandaryzowany. Poprawne wprowadzenie tych danych w sklepie pozwala innym programom korzystać z dodatkowych informacji o naszej stronie i wzbogacać nasz opis np. w Google o dodatkowe dane takie jak:

Breadcrumbs,
ocena produktu,
liczba recenzji,
obraz produktu,
godziny otwarcia,
logo firmy,
dodatkowe dane kontaktowe i wiele więcej.

Rich snippets (inaczej: fragmenty rozszerzone) mogą mieć też realny wpływ na zwiększenie ruchu na stronie. Wyróżniając się z masy innych stron w wynikach wyszukiwania mamy większą szansę na dużo lepszy CTR z wyników wyszukiwania – zwiększamy bowiem ruch i klikalność.

Co warto wyróżnić w naszym sklepie?

O dane strukturalne możemy wzbogacić większość podstron w naszym e-sklepie. Rozpoczynając od strony głównej, poprzez kategorie, kartę produktu, kończąc na stronie kontaktowej. Nasze dane możemy oznaczać kilkoma formatami RFDa, Microdata oraz JSON-LD. Skupię się na dwóch najpopularniejszych, czyli Microdata oraz JSON-LD.

Microdata to standard przypominający zwykły kod HTML. Oznaczanie określonych elementów w naszym kodzie odbywa się poprzez umieszczenie atrybutów dla tagów HTML. Jest trudniejszy w implementacji, gdyż musimy zaznajomić się z kodem naszego sklepu, aby go wdrożyć. W większości przypadków potrzebny będzie nam programista, który wdroży nam ten format.

JSON-LD – ten kod można implementować dynamicznie poprzez kod JavaScript lub widgety do zarządzania treścią w naszym systemie CMS. Uważa się, że format jest prosty we wdrożeniu, jednak bardziej czasochłonny, ponieważ ręcznie należy oznaczać wszystkie elementy.

Zarówno format Microdata, jak i JSON-LD, mogą być kłopotliwe we wdrażaniu samodzielnym. Warto poprosić naszego programistę o wdrożenie i samodzielnie sprawdzić narzędziem od Google’a o nazwie Structured Data Testing Tool.

Breadcrumbs

Dzięki konfiguracji Breadcrumbs Google może zastąpić adres URL zgodnie z naszą ścieżką. Breadcrumbs to ścieżka dostępu umożliwiająca użytkownikowi strony orientację, w jakim miejscu strony aktualnie się znajduje, jak i powrót do wcześniej odwiedzanych lokalizacji serwisu.

Breadcrumbs znajduje zastosowanie tylko w przypadku stron o uporządkowanej hierarchii. Przykładowy schemat ścieżki znaczonej „okruszkami chleba”: Strona domowa >>> Strona sekcji >>> Strona podsekcji

Format JSON-LD:

<script type="application/ld+json">
{ 
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[ 
	{ 
		"@type":"ListItem",
		"position":1,
		"item":{ 
			"@id":"https://domena.pl",
			"name":"Home Page"
		}
	},
	{ 
		"@type":"ListItem",
		"position":2,
		"item":{ 
			"@id":""https://domena.pl/sprzet-rtv",
			"name":"Sprzęt RTV"
		}
	},
	{ 
		"@type":"ListItem",
		"position":3,
		"item":{ 
			"@id":""https://domena.pl/sprzet-rtv/telewizory",
			"name":"Telewizory"
		}
	},
	{ 
		"@type":"ListItem",
		"position":4,
		"item":{ 
			"@id":""https://domena.pl/sprzet-rtv/telewizory/4k-uhd",
			"name":"4K UHD"
		}
	},
]
}
</script>

Format Microdata:

<ol class="breadcrumb"  >
	<li   >
		<a  href="https://domena.pl/" >
			<span >Home Page</span>
		</a>
	<meta  content="1" />
	</li>
	<li   >
		<a  href="https://domena.pl/sprzet-rtv" >
			<span >Sprzet RTV</span>
		</a>
	<meta  content="2" />
	</li>
	<li   >
		<a  href="https://domena.pl/sprzet-rtv/telewizory" >
			<span >Telewizory</span>
		</a>
	<meta  content="3" />
	</li>
	<li   >
		<a  href="https://domena.pl/sprzet-rtv/telewizory/4k-uhd" >
			<span >4K UHD</span>
		</a>
	<meta  content="4" />
	</li>
</ol>

Karta produktu

Na karcie produktu możemy otagować podstawowe informacje o produkcie takie jak: nazwa, SKU produktu (ang. Stock Keeping Unit, czyli unikalny kod produktu), zdjęcia, opis produktu oraz co ważne oceny, które zostały przyznane przez naszych klientów. Przykładowy widok produktu w Google wygląda jak na załączonym screenie poniżej:

Format JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Product Name",
  "image": [
    "https://example.com/photos/photo1.jpg",
    "https://example.com/photos/photo2.jpg",
    "https://example.com/photos/photo3.jpg"
   ],
  "description": "Opis produktu",
  "sku": "sku-1935",
  "mpn": "1232124767765",
  "brand": {
    "@type": "Thing",
    "name": "Nazwa producenta"
  },
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "4",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "Kamil Opiniowiec"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.0",
    "reviewCount": "99"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://domena.pl/nazwa-produktu",
    "priceCurrency": "PLN",
    "price": "122.39",
    "priceValidUntil": "2020-12-12",
    "itemCondition": "https://schema.org/UsedCondition",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Executive Objects"
    }
  }
}
</script>

Format Microdata:

<div  >
    <span >1232124767765</span>
    <span >sku-1935</span>
    <span >Product Name</span>
    <span >Nazwa producenta</span>
    <img  src="https://example.com/photos/16x9/photo.jpg" />
    <img  src="https://example.com/photos/4x3/photo.jpg" />
    <img  src="https://example.com/photos/1x1/photo.jpg" />
    <span >Opis produktu</span>
    <div   >
        <link  href="https://domena.pl/nazwa-produktu" />
        <span >122.39</span><span >PLN</span>
        <span >InStock</span>
        <span >2020-12-12</span>
    </div>
    <div   >
        <meta  content="89" />
        <meta  content="4.4" />
    </div>
    <div   >
        <div   >
            <meta  content="Fred Benson" />
        </div>
        <div   >
            <meta  content="4" />
            <meta  content="5" />
        </div>
    </div>
</div>

Informacje kontaktowe

Dane typu Organization potoczniej nazywane informacjami kontaktowymi oraz danymi firmy najlepiej umieścić na podstronie kontaktowej naszego sklepu.

Google zaprezentuje je w swojej wyszukiwarce mniej więcej tak jak na poniższym screenie:

Informacje kontaktowe - dane strukturalne

Format JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "Moja Firma",
  "legalName" : "Moja Firma sp. z o.o.",
  "foundingDate": "2009",
  "url": "https://domena.pl/",
  "logo": "https://domena.pl/logo.png",
	"address": {
  	"@type": "PostalAddress",
  	"streetAddress": "Ciołkowskiego 1923/12",
  	"addressLocality": "Warszawa",
  	"postalCode": "00-003",
  	"addressCountry": "Polska"
	},
	"contactPoint": {
  	"@type": "ContactPoint",
  	"contactType": "Biuro sklepiu",
  	"telephone": "[+48 123-123-123]",
  	"email": "[email protected]"
	}
}
</script>

Format Microdata:

<div  >
  <div class="historyb" id="historyb">
    <span class="historyh2" >Moja Firma</span>
    <div   >
        <span >
          Ciołkowskiego 1923/12
        </span>
        <span >Warszawa</span>,
        <span >00-003</span>
    </div>
    <a href="tel:+48123123123">
      <span >+48 123-123-123</span>
    </a>
    <a href="mailto:[email protected]">
      <span >[email protected]</span>
    </a>
    <span >Moja Firma sp. z o.o.</span>
     <a  href="https://domena.pl/">
      <img  src="https://domena.pl/logo.png" />
    </a>
  </div>
</div>

Search Box

Ciekawym (i zarazem mniej spotykanym) rozwiązaniem jest otagowanie naszej wyszukiwarki w sklepie. Dzięki temu po wpisaniu marki naszego sklepu Google może zaserwować użytkownikom wewnętrzną wyszukiwarkę w obrębie swoich wyników jako wyszukiwanie z parametrem „site:”.

Prezentuje się to jak na załączonym screenie poniżej:

Format JSON-LD:

 <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://domena.pl/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://domena.pl/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>

Format Microdata:

<div  >
  <meta  content="https://www.example.com/"/>
  <form   >
    <meta  content="https://domena.pl/search?q={search_term_string}"/>
    <input  type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

Artykuły

Prowadzisz bloga swojego sklepu? To pytanie retoryczne. 🙂 Musisz mieć bloga w swoim e-sklepie. Sprawdź dlaczego, a jeżeli dalej masz wątpliwości zajrzyj koniecznie do 9 powodów, dla których sklep internetowy potrzebuje bloga.

Sprawdź, czy Twój sklep jest odpowiednio zoptymalizowany – porozmawiaj z ekspertem SEO

Wybierz termin bezpłatnej konsultacji

Artykuły najczęściej są prezentowane w formie karuzeli. Mogą być dobrym pierwszym punktem styku z Twoją marką. Warto zadbać o prawidłowe otagowanie wpisów, aby Google mógł je dodatkowo wyróżnić. Możemy także wyróżnić 3 typy artykułów:

Article – typowe artykuły wyczerpująco opisujące dane zganienie,
BlogPosting – wpisy z naszego bloga,
NewsArticle – krótkie notatki prasowe.

Każdy tych typów możemy dowolnie skonfigurować w naszym sklepie.

Poniżej prezentacja jak to wygląda w praktyce.

Poniższy kod tyczy się typu Article, jednak inne typy to tylko kwestia modyfikacji trzeciej linijki określającej typ (czyli: „@type”: „Article”,/ „@type”: „BlogPosting”,/ „@type”: „NewsArticle”,)

Format JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://domena.pl/artykul-url"
  },
  "headline": "Nazwa/Tytuł artykułu",
  "description": "Opis artykułu",
  "image": "https://domena.pl/artykul-img.png",  
  "author": {
    "@type": "Person",
    "name": "Mateusz Borowik"
  },  
  "publisher": {
    "@type": "Organization",
    "name": "domena.pl",
    "logo": {
      "@type": "ImageObject",
      "url": "https://domena.pl/logo.png",
      "width": 128,
      "height": 128
    }
  },
  "datePublished": "2020-02-02",
  "dateModified": "2020-02-02"
}
</script>

Format Microdata:

<div  >
    <meta  itemid="https://domena.pl/artykul-url" />
    <h2 >Nazwa/Tytuł artykułu</h2>
    <h3   >
    <span >Mateusz Borowik</span>
</h3>
    <span >Opis artykułu</span>
    <div   >
        <img  src="https://domena.pl/artykul-img.png" />
        <meta  content="256">
        <meta  content="256">
    </div>
    <div   >
        <div   >
            <img  src="https://domena.pl/logo.png" />
            <meta  content="128">
            <meta  content="128">
        </div>
        <meta  content="domena.pl">
    </div>
    <meta  content="2020-02-02" />
    <meta  content="2020-02-02" />
</div>

Podsumowanie

Mam nadzieję, że powyższe wytyczne pomogą Wam wdrożyć Rich Snippets w swoim sklepie. Jeżeli korzystamy z gotowych rozwiązań e-commerce typu Prestashop, Magento czy rozwiązań SaaS większość z nich ma już zaimplementowane dane uporządkowane, lub posiadają odpowiednie moduły dodatkowe.

Najważniejsze, aby po wprowadzeniu naszych znaczników przetestować rezultat w narzędziu od Google o nazwie: „Structured Data Testing Tool„. Jest to najszybsza metoda weryfikowania poprawności danych. Jeśli mimo to, masz problem z wdrożeniem Rich Snippets, warto pomyśleć o pomocy doświadczonego specjalisty SEO.