> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Structured data and rich snippets

> Mark up prices, ratings, category path and company data as microdata so that search engines can display enhanced search results.

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.

![Snippets Screenweb3](https://mintcdn.com/websaleag-44ee7ea6/-VOorhOnZ4aGhsis/images/snippets_screenweb3.jpg?fit=max\&auto=format\&n=-VOorhOnZ4aGhsis\&q=85\&s=5655167af48ae6be51d73a8350a00996)

> [!WARNING]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!NOTE]
>
> 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

> [!NOTE]
>
> For this section, the "WEBSALE product rating" module must be activated and integrated.

### Average and count

The block belongs inside the `Product` element.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   <span itemprop="ratingValue">~PR-RatingScore~</span>
   <span itemprop="ratingCount">~PR-RatingVotes~</span>
</div>
```

### Individual ratings

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!NOTE]
>
> `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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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~">
```

> [!NOTE]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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}
```

> [!WARNING]
>
> `~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.

> [!NOTE]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

## Related topics

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


## Related topics

- [Navigation and category tree](https://dokumentation.websale.de/en/v8s/referenz/tags/cat/navigation-und-kategoriebaum.md)
- [E-PRODRATING-EKOMI_ (eKomi product rating)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-prodrating-ekomi.md)
- [Data migration](https://dokumentation.websale.de/en/migration/daten-migration.md)
- [API reference text snippets](https://dokumentation.websale.de/en/schnittstellen/admin-interface-api/api-referenz-textbausteine.md)
- [Text snippets](https://dokumentation.websale.de/en/admin-interface/templates-und-content/textbausteine.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.