Schema.org tutorial: Recipe

This tutorial describes how to build pages describing recipes and how to annotate them using the Schema.org module. In this tutorial we will create a page that displays information for a specific recipe.

We will use the Schema.org Recipe type which is one of the schema.org types recognized by Google. You can see this tutorial in action in the Drupal schema.org module screencast.

Background Information

schema.org is a collaboration of Google, Yahoo! and Bing to standardize the way structured data is added to web pages. The schema.org vocabulary includes descriptive terms for content like movies, people, organizations, events, locations, etc. The goal is "to improve the display of search results, making it easier for people to find the right web pages."

Step 1: Install required modules

This tutorial uses the schema.org and the Recipe module. Learn how to install a contributed module in Drupal 7. Make sure you have these modules enabled:

• schema.org
• schema.org UI
• recipe

Step 2: Set up recipe content type with schema.org settings

Go to Structure -> Content Types and edit the Recipe content type which has been created by the recipe module. Click on 'Schema.org Settings' near the bottom of the page, and fill in a type in the autocomplete field. When you start to type the word 'recipe' a dropdown list will be displayed and will list all possible Types. Select 'Recipe'.

Click 'Save and add fields'

Field settings

Now we'll add a field for the recipe image and assign the appropriate schema.org property for it.

On the Manage Fields tab of your recipe content type, create a new field called 'Image' and select of the image formats in the field type drop down list. On the next form, click Save field settings. At the bottom of the next form, enter 'image' for the schema.org mapping and click Save settings.

The recipe module takes care of the other fields mappings automatically.

Here is a run down of the schema.org mappings:

Note that these are the fields Google requires to generate a Rich Snippet. Make sure to have the right mappings on all these fields for the Rich Snippet to work. You can change the field names as long as the schema.org mappings are correct, for example the 'Image' field could be called 'Photo' as long as the schema.org mapping is 'image'.

Step 2. Add content using the Recipe content type.

We'll use a random Apple pie recipe in this example. Go to Add content -> Recipe.

Enter the following information in the appropriate fields:

• Title: Apple pie
• Image: upload any image
• Description: This was my grandmother's apple pie recipe
• Yield: 6
• Cooking time: 1 hour
• Preparation time: 30 mins

We're leaving out the rest of the recipe details for the purpose of this tutorial, but you are encouraged to fill them.

Click 'Save'.

If everything went as planned a node about the Apple pie recipe should have been created. The page can now be tested in the Google Rich Snippets testing tool, simply paste the URL of the page and hit preview. Note that the time displayed by the Rich Snippet corresponds to the total recipe time (preparation + cooking times).

Support

If you experience difficulties setting up your content type, or if it cannot preview it correctly in the Google Rich Snippets testing tool, please file a support request in the schema.org module issue queue.