Using Schema.org item properties
Schema.org enables you to enrich your page with attributes which enable search engines to see the information on your pages as structured data.
A webshop perticulairly lends itself for this, since it has a specific purpose with specific items for display.
In the sense of structured data, a productlist can be seen as an ItemList which consists of multiple Products. Each product has a set of properties like a name, image, title, description and a sku (stock keeping unit). Usually, a product also has an Offer, which has the properties currency and a price.
Mapping columns to properties
In myshop, one can define which columns from the productlist are represented by which properties. For instance, if you have a column called ‘Title’, you might want to use it as the Schema.org property ‘name’. This can be done with the productlist settings, please see the general help pages for more information about how to set this up.
When you use a custom layout for either your productlist or moreinfo pages, you will need to add some extensions to your document in order to enable the myshop rendering engine to display the various properties correctly. This page will give an overview of which extensions might be used and how, and it will link to the individual extension’s pages.
Enable your layout to use Schema.org items
When you’re using the default templates from myshop as a basis for your own templates, chances are that you needn’t change anything, because the correct code is already in there. If you, however, use the templates from myshop which were released before the addition of Schema.org compatibility, you’ll need to look at the following example code to see how to implement this behaviour in your own templates.
We’ll cover the two basic templates below, productlist and product. Both templates are similar in construction, in the sense that they both use the Scherm.org Product and Offer items. The productlist template also uses the ItemList item.
Productlist
The example code below shows how to add the appropriate items to your productlist template.
<div style="myshop-block:productlist;" itemscope="itemscope" itemtype="http://schema.org/ItemList">
<div style="myshop-block:product;" itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/Product">
<div style="myshop-has-product-value:title">
<h3>
<a href="#" style="myshop-action:moreinfo;">
<span style="myshop-product:title" itemprop="myshop-product:itemprop-title">
title
</span>
</a>
</h3>
</div>
<div class="myshp_list_product_image">
<a style="myshop-action:moreinfo;">
<img src="myshop-product:image;" alt="myshop-product:title;" itemprop="myshop-product:itemprop-image"/>
</a>
</div>
<div class="myshp_list_product_details">
<div style="myshop-repeat:product-features">
<div style="myshop-has-value:feature">
<div style="myshop-not-is:feature-price">
<span style="myshop-feature:value;" class="myshp_list_product_value"></span>
</div>
</div>
</div>
<div style="myshop-is:in-stock">
<div style="myshop-has:order">
<div style="myshop-has:quantity-field">
<input style="myshop-control:quantity;" size="3"/>
</div>
</div>
</div>
</div>
<div class="myshp_list_product_price" itemprop="offerDetails" itemscope="itemscope" itemtype="http://data-vocabulary.org/Offer">
<div style="myshop-is-product-visible:price">
<meta itemprop="priceCurrency" content="myshop-product:currency" style="myshop-product:currency-sign"/>
<span style="myshop-product:price-no-currency;" itemprop="myshop-product:itemprop-price"></span>
</div>
</div>
</div>
</div>Please notice that this example is simplified to clearify the use of the given functionality, the original myshop templates contain more code for css / layout purposes.
The above example show the use of specific myshop extensions for structured data in lines 6, 14, 35 and 37. The item props used here are for the title, image and price information. Since this is a list of products with links to more information, not all properties are specified here.
Moreinfo
The moreinfo screen contains the most properties / information about a single product. It can also contain a list of related products. The example below shows how the moreinfo template can be adjusted to use the Schema.org structured data.
<div style="myshop-block:product;" class="myshp_info_product myshp_info_gallery_1" itemscope="itemscope" itemtype="http://schema.org/Product">
<!-- Image -->
<div class="myshp_info_image" style="myshop-has-product-value:image">
<div class="myshp_info_image_large">
<img src="myshop-product:image;" alt="myshop-product:title" itemprop="myshop-product:itemprop-image"/>
</div>
</div>
<!-- Productfields -->
<div class="myshp_info_features">
<table width="100%">
<tr>
<td colspan="2">
<!-- Title -->
<h1 style="myshop-product:title;" itemprop="myshop-product:itemprop-title"></h1>
</td>
</tr>
<tr style="myshop-has-product-value:description-short;">
<td colspan="2">
<!-- Description -->
<p style="myshop-product:description-short;" itemprop="myshop-product:itemprop-description-short">
</p>
</td>
</tr>
<!-- Product Fields - Itemprops -->
<span style="myshop-repeat:product-features">
<span style="myshop-not-is:feature-price">
<tr class="myshp_info_row" style="myshop-has-value:feature">
<td class="myshp_info_label">
<strong style="myshop-feature:label">
</strong>
</td>
<td class="myshp_info_value">
<div style="myshop-feature:value" itemprop="myshop-feature:itemprop">
</div>
</td>
</tr>
</span>
</span>
<!-- Product Price / Offer -->
<tr class="myshp_info_row" style="myshop-is-product-visible:price" itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
<td class="myshp_info_price_label">
<strong style="myshop-product:price-label">
</strong>
</td>
<td class="myshp_info_price_value">
<meta itemprop="priceCurrency" content="myshop-product:currency" style="myshop-product:currency-sign"/>
<span style="myshop-product:price-no-currency;" itemprop="myshop-product:itemprop-price"></span>
</td>
</tr>
<!-- Notice: Skipping order buttons / quantity layout for clarity -->
</table>
</div>
<!-- Long description -->
<div class="myshp_info_description_long" style="myshop-product:description-long;" itemprop="myshop-product:itemprop-description-long"></div>
<!-- Begin - Related Products -->
<div class="myshp_basket_related" style="myshop-block:related-products">
<h3>
<span style="myshop-resource:related.title">
Bijpassende artikelen
</span>
</h3>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="myshop-block:productlist" class="myshp_basket_related_table">
<tr style="myshop-block:product" itemprop="isRelatedTo" itemscope="itemscope" itemtype="http://schema.org/Product">
<td valign="top" class="myshp_basket_related_product_row myshp_basket_related_product_image_container">
<div style="myshop-has-product-value:image">
<div class="myshp_basket_related_product_image">
<a style="myshop-action:moreinfo;">
<img src="myshop-product:image;" title="myshop-product:title" alt="myshop-product:title" itemprop="myshop-product:itemprop-image"/>
</a>
</div>
</div>
</td>
<td valign="top" class="myshp_basket_related_product_row myshp_basket_related_product_features">
<h4 style="myshop-product:title;" itemprop="myshop-product:itemprop-title"></h4>
<div class="myshp_basket_related_product_description" style="myshop-product:description-short;" itemprop="myshop-product:itemprop-description-short"></div>
<div class="myshp_basket_related_features">
<table width="100%">
<span style="myshop-repeat:product-features">
<tr style="myshop-has-value:feature">
<td class="myshp_basket_related_features_label">
<strong>
<span style="myshop-feature:label;">
</span>:
</strong>
</td>
<td class="myshp_basket_related_features_value">
<div style="myshop-not-is:feature-price">
<span class="myshp_basket_related_field" style="myshop-feature:value;" itemprop="myshop-feature:itemprop">
</span>
<br/>
</div>
<div style="myshop-is:feature-price">
<b>
<span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="EUR"/>€
<span class="myshp_basket_related_field" style="myshop-feature:value;" itemprop="myshop-product:itemprop-price"></span>
</span>
<br/>
</b>
</div>
</td>
</tr>
</span>
<!-- Notice: Skipping quantity control for clarity -->
</table>
<!-- Notice: Skipping order buttons / layout for clarity -->
</div>
</td>
</tr>
</table>
</div>
</div>Generally, the same myshop extensions are used to add the structured data as for the productlist. The main differences are the ItemList, which is not present in the moreinfo template, and the related products, which are added as related items to the main product.
Recommended mappings
The available item properties for the item Product can be found on the Schema.org website. The recommended item properties to use are:
- productID
- brand
- name
- description
- price
- image
Checking implementation
The best way to check if the structured data is working correctly in your webshop is by using the Google rich snippet tool. This tool can read a single web page and display the items which were found, and show their relations. This way you can check if the data is correct and, more important, if all the properties you wish to use are present.
Please also notice that if a column in your productlist has no mapping in your productlist settings, the itemprop attribute will be removed from the concerning tag.
Post your comment on this topic.