Search code examples
schema.orgjson-ld

How to use multiple elements in JSON-LD

I have a page describing a tourist attraction (TouristAttraction). Since I also want to add breadcrumb informations, I would need to add WebPage as well.

What is the way to go, for adding both infos:

  1. Should I use WebPage and add the TouristAttraction as mainEntity?
  2. Should I create 2 separate JSON-LD script blocks with separate WebPage and TouristAttraction blocks?

And when using 2 entities:

  1. Do I have to provide the main informations (name, image, rating, etc.) in both entities, or just in one (which one)?
Solution

  • @unor's answer is almost correct, but if you are doing it for google serp's, only splitting it up into separate json-blocks (or graph notation) will give the best result.

    Let's say you want to use the Recipe entity to get google's rich snippet for Recipies in the serps you would do it like so:

    <script type="application/ld+json">
{
  "@context":"https:\/\/schema.org",
  "@type":"Recipe",
  "name":"Example",
  "image":"https:\/\/www.example.com"
}
</script>

    In google's Structed Data Testing Tool you will get a preview button for it:

    enter image description here

    If you now want to add other information from other entities (like breadcrumb), you have to use separate JSON-LD blocks, otherwise you will not get the preview button. So for example 

    <script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "ItemPage",
    "breadcrumb": {
        "@type": "BreadcrumbList"
    },
    "mainEntity": {
        "@type":"Recipe",
        "name":"Example",
        "image":"https:\/\/www.example.com"
    }
}
</script>

    is valid, but will not show preview button.

    But if you split it up, it will show to separate entities and also the preview button:

    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemPage",
        "breadcrumb": {
            "@type": "BreadcrumbList"
        }
    }
</script>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
        "@type":"Recipe",
        "name":"Example",
        "image":"https:\/\/www.example.com"
    }
}
</script>

    Same works for Array-Notation:

    <script type="application/ld+json">
[
    {
        "@context": "http://schema.org",
        "@type": "ItemPage",
        "breadcrumb": {
            "@type": "BreadcrumbList"
        }
    },
    {
        "@context": "http://schema.org",
         "@type":"Recipe",
         "name":"Example",
         "image":"https:\/\/www.example.com"
    }
]
</script>

    And graphs:

    <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@graph": 
    [
        {
            "@type": "ItemPage",
            "breadcrumb": {
                "@type": "BreadcrumbList"
            }
        },
        {
            "@type":"Recipe",
            "name":"Example",
            "image":"https:\/\/www.example.com"
        }
    ]
}
</script>

    Credits goes to @unor (see also How do you combine several JSON-LD markups?)