How to add Microdata to Shopify Product Pages
Google defines Microdata as “An open-community HTML specification used to nest structured data within HTML content. Like RDFa, it uses HTML tag attributes to name the properties you want to expose as structured data”.
If you are using Google Merchant and have received errors or warnings regarding missing microdata for prices, condition, or availablity, then the code below will solve this issue.
Simply copy the code and paste it into the head section of the theme.liquid file. The code below assumes you are selling only “new” products.
Once the new code has been added, it can take several weeks before the warnings inside your Google Merchant diagnostic panel are removed.
{% if template contains 'product' %}
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}" />
<meta itemprop="image" content="https:{{ product.featured_image.src | img_url: 'grande' }}">
<meta itemprop="description" content="{{ product.description | strip_html | escape }}" />
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ product.price |money_without_currency |strip_html }}">
{% if product.available == true %}<meta itemprop="availability" content="http://schema.org/InStock"/>{% else %}<meta itemprop="availability" content="http://schema.org/OutOfStock"/>{% endif %}
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
<meta itemprop="sku" content="{{ product.variants.first.sku }}"/>
</div></div>
{% endif %}
You can test the output on one of your product pages using Google’s Structured Data Testing Tool.
About Author
