Structured data and rich snippets - WEBSALE Dokumentation

A search result can be a single line of text or an entry with price, rating stars and category path. What makes the difference is marking up the page content with microdata. It tells the search engine not only that there is a number on the page, but that this number is a price. Markup is done with three HTML attributes:

Attribute	Meaning
`itemscope`	an element with structured data begins here
`itemtype`	which type of information it is, specified as an address from the schema.org vocabulary
`itemprop`	which property of the element the content describes

Elements can be nested, and an itemtype usually has several itemprop values. Which information a search engine actually evaluates is up to the search engine. The markup is an invitation, not a guarantee.

Only mark up what is also visible on the page. Information that exists only in the markup is ignored by search engines or considered an attempt at deception.

Marking up product data

The markup for Product belongs around the area that contains all product information, that is image, name, price, rating and description.

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

   <img src="~PR-Image~" itemprop="image">

   <h1 itemprop="name">~PR-Name~</h1>

   <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">

      <!-- Währung: im content das Kürzel, sichtbar das Symbol -->
      <span itemprop="priceCurrency" content="~WS-Currency~">~WS-CurrencySymbol~</span>

      <!-- Preis: im content unformatiert, sichtbar formatiert -->
      <span itemprop="price" content="~WS-DisablePriceAndNumberFormat~~PR-Price~~WS-EnablePriceAndNumberFormat~">~PR-Price~</span>

   </div>

   {PR-Descr}
      <span itemprop="description">~PR-Descr~</span>
   {/PR-Descr}

</div>

The price is expected in the content attribute without a thousands separator and with a period as the decimal separator. This is exactly what the two bracket tags WS-DisablePriceAndNumberFormat and WS-EnablePriceAndNumberFormat do, while the visible price remains formatted.

Reference: PR-Image · PR-Name · PR-Price · PR-Descr · WS-Currency · WS-CurrencySymbol · WS-DisablePriceAndNumberFormat

Ratings from WEBSALE product rating

For this section, the “WEBSALE product rating” module must be activated and integrated.

Average and count

The block belongs inside the Product element.

<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   <span itemprop="ratingValue">~PR-RatingScore~</span>
   <span itemprop="ratingCount">~PR-RatingVotes~</span>
</div>

Individual ratings

<div itemprop="reviews" itemscope itemtype="https://schema.org/Review">

   {@PRODRATING-Data}

      <span itemprop="author">~A-NickName_value~</span>

      <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
         <meta itemprop="worstRating" content="1">
         <meta itemprop="bestRating" content="5">
         <span itemprop="ratingValue">~PRODRATING-Rating_value~</span>
      </div>

      <span itemprop="name">~PRODRATING-Subject_value~</span>
      <span itemprop="description">~PRODRATING-Comment_value~</span>

   {/@PRODRATING-Data}

</div>

worstRating and bestRating specify the scale. Without this information, search engines assume 1 and 5.

Reference: PR-RatingScore · PR-RatingVotes · A-NickName_Value · PRODRATING-Data · PRODRATING-Rating_value · PRODRATING-Subject_value · PRODRATING-Comment_value

Shop ratings from Trusted Shops and eKomi

Both providers let customers rate the shop according to criteria such as customer service, delivery and condition of the goods. Once a day, WEBSALE V8s retrieves the average rating and the number of ratings, stores them in the shop database and makes them available via a tag. The integration is identical for both providers. It differs only in the first parameter:

Provider	Parameter
Trusted Shops	`trustedshops`
eKomi	`ekomi`

Activation

The import of ratings must be activated for your shop. Your WEBSALE representative knows the function under the name “third party import”.

Displaying values in the shop

Depending on the second parameter, the WS-ThirdPartyData() tag returns the average (score) or the count (votes). As a bracket, it only shows an area if a value is available. The values can be displayed on any shop page.

{WS-ThirdPartyData(trustedshops,score)}
   Durchschnittsbewertung: ~WS-ThirdPartyData(trustedshops,score)~
{/WS-ThirdPartyData(trustedshops,score)}

{WS-ThirdPartyData(trustedshops,votes)}
   Anzahl Bewertungen: ~WS-ThirdPartyData(trustedshops,votes)~
{/WS-ThirdPartyData(trustedshops,votes)}

Passing values as microdata

The markup is usually placed on the start page, because the rating applies to the shop and not to an individual product.

<div itemscope itemtype="https://schema.org/LocalBusiness">

   <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">

      {WS-ThirdPartyData(trustedshops,score)}
         <span itemprop="ratingValue">~WS-ThirdPartyData(trustedshops,score)~</span>
      {/WS-ThirdPartyData(trustedshops,score)}

      {WS-ThirdPartyData(trustedshops,votes)}
         <span itemprop="ratingCount">~WS-ThirdPartyData(trustedshops,votes)~</span>
      {/WS-ThirdPartyData(trustedshops,votes)}

   </div>

</div>

For eKomi, replace trustedshops with ekomi in all six places. Reference: WS-ThirdPartyData() Guide: Trusted Shops · eKomi

Product ratings from the providers

Trusted Shops transfers product ratings to Google itself. What needs to be set up for this is described under the trust seal. With eKomi, you pass the product ratings via the template. The following block belongs inside a Review element, which in turn is located in the Product element.

<meta itemprop="author" content="Kundenbewertung">
<meta itemprop="about" content="~PR-Name~">
<meta itemprop="datePublished" content="~E-PRODRATING-EKOMI_FeedbackData_Timestamp_year(true)~-~E-PRODRATING-EKOMI_FeedbackData_Timestamp_month(true)~-~E-PRODRATING-EKOMI_FeedbackData_Timestamp_day(true)~">

<div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
   <meta itemprop="worstRating" content="1">
   <meta itemprop="ratingValue" content="~E-PRODRATING-EKOMI_FeedbackData_Rating~">
   <meta itemprop="bestRating" content="5">
</div>

<meta itemprop="description" content="~E-PRODRATING-EKOMI_FeedbackData_Feedback~">

The true parameter on the three time tags ensures the leading zero. Without it, May 3 does not result in a valid date in the format JJJJ-MM-TT (YYYY-MM-DD).

Reference: E-PRODRATING-EKOMI_FeedbackData_Timestamp_day() · E-PRODRATING-EKOMI_FeedbackData_Timestamp_month() · E-PRODRATING-EKOMI_FeedbackData_Timestamp_year() · E-PRODRATING-EKOMI_FeedbackData_Feedback · E-PRODRATING-EKOMI_FeedbackData_Rating Guide: Trusted Shops trust seal

Marking up the category path

The breadcrumb navigation is created from a loop over the category path. The markup can be built into this loop. Each step needs its position in the path, which is supplied by a counter.

{Cat-PathData}
   ~DC-Int1_set(0)~
   <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      {@CAT-PathRegular}
         ~DC-Int1_inc~
         <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="~Cat-Link~">
               <span itemprop="name">~Cat-Name~</span>
            </a>
            <meta itemprop="position" content="~DC-Int1~">
         </li>
      {/@CAT-PathRegular}
   </ol>
{/Cat-PathData}

~DC-Int1_set(0)~ belongs before the loop. If it is inside, the counter is reset on every pass and all steps have position 1.

Older examples mark up the path with https://schema.org/breadcrumb and the properties title and url. This form is no longer evaluated. BreadcrumbList with ListItem, item, name and position is the current standard.

Reference: Cat-PathData · Cat-PathRegular · Cat-PathReverse · Cat-Link · Cat-Name · DC-Int1…3 · DC-Int1…3_set · DC-Int1…3_inc

Marking up the company

Address, telephone number and logo belong on all shop pages and therefore, sensibly, in an include that is integrated everywhere.

<div itemscope itemtype="https://schema.org/Organization">

   <a itemprop="url" href="~URL-Homepage~">
      <img src="firmenlogo.png" itemprop="logo">
   </a>

   <span itemprop="address">Musterweg 21, 12345 Musterhausen</span>
   <span itemprop="telephone">0123456789</span>

</div>

Reference: URL-Homepage

Checking

You can check whether the markup can be read using Google’s structured data test. It shows each detected element with its properties and reports missing required information.

Guide: Trusted Shops
Guide: eKomi
Guide: SEO URLs and link optimization

​Marking up product data

​Ratings from WEBSALE product rating

​Average and count

​Individual ratings

​Shop ratings from Trusted Shops and eKomi

​Activation

​Displaying values in the shop

​Passing values as microdata

​Product ratings from the providers

​Marking up the category path

​Marking up the company

​Checking

​Related topics

Marking up product data

Ratings from WEBSALE product rating

Average and count

Individual ratings

Shop ratings from Trusted Shops and eKomi

Activation

Displaying values in the shop

Passing values as microdata

Product ratings from the providers

Marking up the category path

Marking up the company

Checking

Related topics