How To Add Structured Data To Your Posts and Be Found More in Google Search Results
Structured data helps to provide standardized information about a page and classify the page content. It also helps google enable certain search result features and enhancements. An page with structured data for instance, can appear in graphical search results on google which google calls a host result in a host carousel.
image credit: google
To define the type of structured data do the following:
- In your code snippet create a
<script>
element with the type set toapplication/ld+json
in the<head>
of the page. - Inside the
<script>
element, set@context
tohttp://schema.org
to tell Google you’re using schema.org structured data. - Set @type to “Recipe” to tell Google what kind of thing you’re describing; in this case, it’s a recipe.
Add Required Properties
At this time, you would want to add the details you want displayed in search results. These are also properties recommended by google but it is not compulsory to add all the recommended properties. Also note that the order of the properties do not really matter.
One thing you would want to be careful with, is to ensure to separate each property with a comma, as that is a common source of errors.
You can test your code snippet in the google Structured Data Testing Tool Here
To see a list of required properties and keyword for the recipe example, click here
- In the Structured Data Testin Tool, enter the name for the “dish” in the name value (replace dish with what you are actually creating for).
- Click validate to test. It recognizes the content type and name but says that other properties are required.
- Repeat the above steps to fill in the required properties.
- Add as many properties as possible to drive better engagement for your structured data in search.
Now you should end up with a code like this:
<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": [
{
"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",
"interactionCount": "2347",
"expires": "2019-02-05T08:00:00+08:00"
}
]
}
</script>
</head>
</html>
- Click on run test to test your code snippet
Click on run test |
- You should end up with a result like this:
- Now click on preview to see how your structured data will look in a google search page
To learn how to add reviews to your structured data, read our post on How to Add Review To A Structured Data Page
To learn other code syntax and mark up languages available in the structured data domain, visit the gallery to learn more