Introduction

Structured Data is a standardized format that helps search engines understand the contents of a webpage.

In the case of online stores, we can use Structured Data to describe a product page, providing information about its price, stock, and more.

We recommend using JSON-LD format.

Check a complete list of a Product schema here and more information about Structured Data on Google Search Central.

Structured Data on Shogun Frontend

Adding Structured Data to a Shogun Frontend store is not different than adding it to any other web page.

The following practices to handle Structured Data on Shogun Frontend Store are recommended.

For this example, we will add Structured Data to our product page. To do so, create a new section called ProductStructuredData.

1 - Import the required dependencies:

ProductStructuredData.js

import React from 'react'
import Head from 'frontend-head'
import { useRouter } from 'frontend-router'
import { useCartActions } from 'frontend-checkout'

2 - For the Structured Data work correctly, we need to:

Create a script tag with the type of "application/ld+json"
Use the dangerouslySetInnerHTML from React

ProductStructuredData.js

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: `
      {
        "@context": "https://schema.org"
      }
    `
  }}
/>

3 - Putting these two pieces together:

ProductStructuredData.js

import React from "react"
import Head from "frontend-head"
import { useRouter } from "frontend-router"
import { useCartActions } from "frontend-checkout"

const ProductStructuredData = () => {
  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: `
            {
              "@context": "https://schema.org",
              "@type": "Product"
            }
          `
        }}
      />
    </Head>
  )
}

export default ProductStructuredData

4 - To populate the Structured Data, create a variable called product to access the Product CMS:

5 - For this example, we will be using name, thumbnail, variants (from variants: sku, price, storefrontId) . Select the desired values for your store from the variable previously created.

6 - Add a new prop called product to the ProductStructuredData section:

ProductStructuredData.js

const ProductStructuredData = ({ product }) => {}

7 - Get the necessary information from product prop:

ProductStructuredData.js

const { name, thumbnail, variants } = product || {}

8 - Add the information to the script tag:

ProductStructuredData.js

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: `
      {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "${name}",
        "image": "${(thumbnail || []).src}",
        "sku": "${(variant || []).sku}"
      }
    `
  }}
/>

9 - The final code will look like this:

ProductStructuredData.js

import React from 'react'
import Head from 'frontend-head'
import { useRouter } from 'frontend-router'
import { useCartActions } from 'frontend-checkout'

const ProductStructuredData = ({ product }) => {
  const router = useRouter()
  const { isProductAvailableForSale } = useCartActions()
  const { name, thumbnail, variants } = product || {}
  // Assuming we want just the first variant
  const variant = variants && variants[0]
  const availableForSale = isProductAvailableForSale({ id: variant.storefrontId })

  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: `
            {
              "@context": "https://schema.org",
              "@type": "Product",
              "name": "${name}",
              "description": "Such a cool product!",
              "image": "${(thumbnail || []).src}",
              "sku": "${(variant || []).sku}",
              "offers": {
                "@type": "Offer",
                "priceCurrency": "USD",
                "price": "${(variant || []).price}",
                "availability": "${availableForSale ? 'InStock' : 'OutOfStock'}",
                "url": "https://your-store-url.com${router.pathname}",
                "seller": {
                  "@type": "Organization",
                  "name": "My Cool Store"
                }
              }
            }
          `
        }}
      />
    </Head>
  )
}

export default ProductStructuredData

10 - Finally, add the ProductStructuredData section to the Products template:

Validating the Structured Data

To validate the Structured Data, publish your store and scan the page using Google's Rich Results Test Tool.