How to use JSON-LD to add schema.org data to your Shopify store
There are many ways to let Google and other search engines know what your page is about. JSON-LD is a (relatively) new way to present Schema.org data about your content to search engines.
When Google and other search engines crawl your site, they will see that you have structured data and the bots will be able to read and understand what they are crawling. If Google doesn’t know what your site is all about, how can it recommend it in search results? This is where JSON-LD comes in.
What is JSON-LD?
JSON-LD (JavaScript Object Notation for Linked Data), is a method of encoding Linked Data using JSON. It was a goal to require as little effort as possible from developers to transform their existing JSON to JSON-LD. This allows data to be serialized in a way that is similar to traditional JSON. It is a World Wide Web Consortium Recommendation. It was initially developed by the JSON for Linking Data Community Group before being transferred to the RDF Working Group for review, improvement, and standardization – Wikipedia
Why is JSON-LD important for your shop?
Google looks for JSON-LD, and rewards websites and webshops that serve JSON-LD data. Many of Google’s search results page features (including rich snippets and Knowledge Graph cards) are enabled by JSON-LD mark-up. Their “Shopping” search results tab is also powered by JSON-LD. Making sure that your site serves this type of data can be very helpful in your search engine rankings!
How to add the JSON-LD script to your Shopify store?
Luckily, JSON+LD is set up in a standardized format. Follow the bellow steps to add the script to product page on your Shopify store.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Layout section, click theme.liquid to open the file in the online code editor.
- Find
</head>and paste the below code just above it.1234567891011121314151617181920212223{% if template contains 'product' %}<script type="application/ld+json">{"@context": "http://schema.org/","@type": "Product","name": "{{product.title|escape}}","productID": "{{product.id}}","image": "https:{{product.featured_image | product_img_url: 'master' }}","description": "{{product.description|strip_html|escape}}","brand": {"@type": "Thing","name": "{{product.vendor}}"},"offers": {"@type": "Offer","priceCurrency": "{{shop.currency}}","price": "{{product.price|money_without_currency}}","availability": "{% if product.available %}http://schema.org/InStock{% else %}http://schema.org/OutOfStock{% endif %}","url":"{{shop.url}}{{product.url}}"}}</script>{% endif %} - Click Save and you are done.
You can go to Google Structured Data Testing Tool to test.
This is really useful, we fixed one issue on our GM Cricket Bat page, now we have another issue. When I test the page using Google Structured Data Testing Tool, it is showing me the same product detected twice. Any suggestions?
If Google’s Structured Data Testing Tool detects the product twice, it could be because you have microdata mixed into your html. View source and search for “Itemscope” and “itemprop”. If you see these on the same pages having JSON LD data, then you need to go into those page types liquid templates and remove all the itemscope/itemprop fields/attributes from those templates. Cheers.
This is really beneficial information for me.