Prerequisites

The.comJSON

Intro

What is Google Structured Data Markup?

Google Structured Data Markup is a data format that helps classify and contextualize information on your site. For example, if a webpage is about a recipe, the data included in the markup would be relevant to the cooking time, ingredients, temperature, servings, etc. There are predefined "types" of data that Google uses to classify information.

It also allows a website to be shown with special search result features and enhancements. You might be familiar with seeing these types of results as they try to explain the gist of the webpage. For example, a recipe website could appear like this:

Quality Guidelines

Google has specified its own quality guidelines for writing structured data markup. Make sure the data you provide is relevant, complete, specific, and accurate. Writing markup that violates Google's guidelines may make your webpage ineligible for the special search result features.

It's recommended to write the markup in JSON-LD, but you can also use Microdata and RDFa.

Adding Structured Data Markup to The.com

Set up the Script

Switch to the <head> of your Page.
Add a Script Element
Open the corner menu and click into the Script's Attributes.
Type application/ld+json into the Script's Type attribute.

Writing Structured Data Markup

This is the hard part, especially if you have never written JSON. In this example, we'll use the Recipe type. You can see a table of the properties that go with the Recipe type on Google's documentation about the recipe type (there are other types to explore there too).

Step 1

Double-click the Script's Text to open the text editor and hit CMD / CTRL + Enter to expand the cell to fullscreen mode. This is where you'll write the structured data.

Alternatively, you can write the markup in a text editor and then paste it into the Script's Text cell later.

Step 2

Include the required properties: @context, @type, name, and image. The @context will always be "http://schema.org/" and in this case the @type will be "Recipe". The name will be the recipe name and the image will be a URL to an image you choose. It should look something like this:

{
 "@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"
}

Note: The curly braces are part of the JSON syntax which defines an object. Later on, you will see that properties can have objects as values, so make sure you keep track of opening and closing curly braces if you are new to JSON. The value of each property should be written inside quotation marks, and each property should be separated by a comma.

Step 3

Add the recommended properties, including aggregateRating, author, cookTime, and (many) more. The order of these properties does not matter. Excluding properties might make your webpage ineligible for special search features. Remember to abide by Google's quality guidelines. Once you have added all the properties, it should look something like this:

{
  "@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"
    }
  ]
}

As a reminder, your version of the code above should be in the Script Element's Text attribute. If you wrote the markup in a text editor, copy and paste it into the Text attribute.

Step 4

Deploy your Page.

Step 5

Validate the markup with the URL using Rich Result Test. After you put your webpage's URL into that tool, you will be given a detailed summary of your structured data markup results.

Note: Adding structured data markup does not guarantee that your webpage will appear as the top search result since Google ranks results based on many factors.

To get a better understanding of how structured data markup works, read Google's documentation.