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.