GitHub Twitter

Schema.org markup examples

With these examples you will get a better understanding of benefits brought by structure data, i.e., schema.org markup

Keywords: schemaorg, markup, structured data, example

Topics:

Audience:

  • (General interest, Markup provider, Markup consumer) People interested in Schema.org markup examples

Authors:

Contributors:

License: CC-BY 4.0

Version: 2.0

Last Modified: 17 February 2021


◀ Previous tutorial: What and why schema.org | Next tutorial: What and why Bioschemas

1. Google cupcake microdata

By performing a simple search of cupcake recipes on Google, see Figure 1, we will have as a result a preview of the information shown on the website even before going to the actual website; information such as the recipe name, rating, cooking time, calories and a description.

Figure 1: Cupcake recipe search in Google
Figure 1: Cupcake recipe search in Google

Displayed on the website you can find the same rating details shown on the Google card, see Figure 2.

Figure 2: Cupcake recipe card
Figure 2: Cupcake recipe card

And behind the scenes this metadata, used by Google on its search result cards, its marked schema.org, see Figure 3.

Figure 3: Cupcake recipe HTML
Figure 3: Cupcake recipe HTML

The type used on the markup itemprop="aggregateRating" is referencing the property on https://schema.org/Recipe website, see Figure 4.

Figure 4: Cupcake recipe HTML
Figure 4: Cupcake recipe HTML

2. DuckDuckGo cupcake jsonld

DuckDuckGo take advantage of schema.org in a similar way Google does, see a search on Figure 5.

Figure 5: Cupcake recipe search in DuckDuckGo
Figure 5: Cupcake recipe search in DuckDuckGo

The author of the recipe could be found on the search result card and the actual website as seen below, Figure 6.

Figure 6: Cupcake recipe card in DuckDuckGo
Figure 6: Cupcake recipe card in DuckDuckGo

and behind the scenes, Figure 7, we will find the json-ld tag with the Recipe information

Figure 7: Cupcake recipe JSON-LD in DuckDuckGo
Figure 7: Cupcake recipe JSON-LD in DuckDuckGo

The author property, for instance, holds the name we are seeing displayed on DuckDuckGo result search cards, Figure 8.

Figure 8: Author information
Figure 8: Author information

As expected from the documentation on schema.org, see Figure 9.

Figure 9: Author property in schema.org
Figure 9: Author property in schema.org

◀ Previous tutorial: What and why schema.org | Next tutorial: What and why Bioschemas

Top ▲