How to use multiple elements in JSON-LD

Question

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)?

Answer 1

@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:

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?)

Answer 2

Using mainEntity is of course preferable to not using it, as more data (if accurate) is generally better than less data.

But you can use mainEntity in both cases, no matter if you use one or multiple script elements. In the first case, you can simply nest the items. In the second case, you can make use of URI references.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemPage",
  "breadcrumb": {
    "@type": "BreadcrumbList"
  },
  "mainEntity": {
    "@type": "TouristAttraction"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ItemPage",
  "breadcrumb": {
    "@type": "BreadcrumbList"
  },
  "mainEntity": {"@id": "#content"}
}
</script>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "TouristAttraction",
  "@id": "#content"
}
</script>

(And there are other ways, too.)

No matter which way you go, the ItemPage and the TouristAttraction are different entities, of course. So if you add aggregateRating to the ItemPage, it’s for the rating of the page, and if you add it to the TouristAttraction, it’s for the rating of the attraction. For properties that would take the same value, it can still make sense to add them to both entities, as a consumer might only be interested in one of the entities and ignore the other one.

Answer 3

WebPage is implicit for a Web Page, so you don't need to specifically add it.

You can define a BreadcrumbList as a top level entity and systems will understand it is an entity within the WebPage.

For the entity that you want to be considered main, you can also make it a top level entity and state it is the main entity using mainEntityOfPage with its id set to the URL of the page.