When you search Google for certain recipes or products, the results you see are rich snippets, which are logically structured with product images on top, followed by descriptions, pricing, availability, and user reviews. This is known as structured data.
Why structured data is important?
As of November 2022, Google holds a 92.21% share of the global search engine market. That’s impressive don’t you think? This means that adding structured data to your web pages or product pages will increase the chance that they will show up on Google search results.
So what is Structured Data?
According to Google, Structured Data uses schema markup, which is a standardized format for providing information about a page and classifying the page’s content. This helps search engines to better understand your content and provide more relevant search results..
Google Search supports Structured Data in these 3 formats: JSON-LD, Microdata, and RDFa.
JSON-LD is a JavaScript notation embedded in a <script> tag in the page head or body. Data can be static or dynamically injected into the page’s content. JSON-LD is recommended by Google.
Microdata is an HTML specification used to nest structured data within HTML content. It uses HTML tag attributes to name the properties.
RDFa is an HTML5 extension that supports linked data by introducing HTML tag attributes. It is commonly used in both the head and body sections of the HTML page.
How to Add Structured Data to Your Pages?
The easiest way is to use Google Structured Data Markup Helper where you just select the schema type and then enter the URL. The rest is just selecting images and texts to be tagged.
And if you want to create structured data manually, you need to define the structured data in either JSON-LD or Microdata. In this example, we go with JSON-LD.
First, we need to define the type of Structured Data in JSON-LD. It should be inside <script> tags and can be either in the <head> or <body> of the page.
<head>
<script type="application/ld+json">
</script>
</head>
Inside the <script> tag, tell Google that we’re using schema.org.
<head>
<script type="application/ld+json">
{You can add it manually or you can use markup generators. Google Structured Dat Markup Helper is the most sought-after structured data markup generator for many people,
"@context": "http://schema.org/",
</script>
</head>
Then tell Google the descriptions and the content.
<html>
<head>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe"
}
</script>
</head>
</html>
Add required and recommended properties. In this section, properties allow Google more information about the thing being described.
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg",
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"keywords": "cake for a party, coffee",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
},
{
"@type": "HowToStep",
"text": "In a medium bowl, combine flour, sugar, and cinnamon."
},
{
"@type": "HowToStep",
"text": "Mix in butter until the entire mixture is crumbly."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine flour, sugar, baking powder, and salt."
},
{
"@type": "HowToStep",
"text": "Mix in the butter."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Sprinkle the streusel mixture on top of the cake."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35 minutes, or until firm."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"video": [
{
"@type": "VideoObject",
"name": "How to make a Party Coffee Cake",
"description": "This is how you make a Party Coffee Cake.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "http://www.example.com/video123.flv",
"embedUrl": "http://www.example.com/videoplayer.swf?video=123",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": { "@type": "http://schema.org/WatchAction" },
"userInteractionCount": 2347
},
"expires": "2019-02-05T08:00:00+08:00"
}
]
}
</script>
</head>
</html>
After you have the content and its data, you can validate and test to see if there are any errors or warnings at the Rich Results Test
The last few steps are adding an individual review and the aggregate rating for all reviews.
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
// ...
// other recipe structured data
// ...
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-05-01",
"reviewBody": "This cake is delicious!",
"publisher": "The cake makery"
}
}
</script>
</head>
</html>
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
// other recipe structured data
// review structured data
"aggregateRating": {
"@type": "AggregateRating",
"ratingCount": "18",
"ratingValue": "4"
}
}
</script>
</head>
</html>
The final JSON-LD sample will look something like this.
<!doctype HTML>
<html class="no-js">
<head>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": [
"https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg"
],
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"keywords": "cake for a party, coffee",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
},
{
"@type": "HowToStep",
"text": "In a medium bowl, combine flour, sugar, and cinnamon."
},
{
"@type": "HowToStep",
"text": "Mix in butter until the entire mixture is crumbly."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine flour, sugar, baking powder, and salt."
},
{
"@type": "HowToStep",
"text": "Mix in the butter."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Sprinkle the streusel mixture on top of the cake."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35 minutes, or until firm."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"video": [
{
"@type": "VideoObject",
"name": "How to make a Party Coffee Cake",
"description": "This is how you make a Party Coffee Cake.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "http://www.example.com/video123.flv",
"embedUrl": "http://www.example.com/videoplayer.swf?video=123",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": { "@type": "http://schema.org/WatchAction" },
"userInteractionCount": 2347
},
"expires": "2019-02-05T08:00:00+08:00"
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "18"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Mary"
},
"datePublished": "2018-05-01",
"reviewBody": "This cake is delicious!",
"publisher": "The cake makery"
}
}
</script>
</head>
<body>
</body>
</html>
Conclusion
In addition to your current SEO and online marketing strategies, any e-commerce (WooCommerce, Magento, BigCommerce, and Shopify) website or WordPress blog must include structured data if you want it to rank higher in Google, Bing, and other search engine results.
Sources:
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data
https://terakeet.com/blog/structured-data/
