Best JSON-LD practices: using multiple <script> elements?

Question

I'm curious about the best practice for applying JSON-LD onto a site for schema.org.

If I have a page with an Article and I also want to define WebSite on my page, I would have this:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "http://www.example.com/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "http://www.example.com/search?&q={query}",
      "query-input": "required"
    }
}
</script>

<!- … -->

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "author": "John Doe",
  "interactionCount": [
    "UserTweets:1203",
    "UserComments:78"
  ],
  "name": "How to Tie a Reef Knot"
}
</script>

Is this correct or wrong? Is there any benefit or need to merge these into the same script or array of items?

Answer 1

It’s valid. You can have as many data blocks (= script elements) as you wish.

A possible benefit of using only one script element: it allows to make relationships between multiple items easier (e.g., should you decide to use hasPart or mainEntity), as you simply have to nest the items.
But making these relationships is of course also possible when using separate data blocks, by referencing the URI of the item with @id (thanks, @ Gregg Kellogg).

(For reference, adding two or more top-level items in a single script is possible with @graph.)

Answer 2

Just tested this on Google's Rich Result Test.

I have one script that contains the info that should always be present in the schema: name, brand, description, etc. I have another script that contains optional things: reviews and aggregate ratings.

Unfortunately, RRT tells me it's missing the reviews and aggregate ratings properties.

Multiple JSON-LD scripts doesn't seem to be supported.

It's a real hassle, because an empty review array and a review count of 0 (for the aggregate rating) are also not supported.

Conditional JSON-LD properties are turning out to be quite the challenge for those who want to dynamically put them on the page.

Answer 3

There is no benefit in having single or multiple data blocks, other than limitations around how you might store and manage schema data in your website.

For example, you might need them separate if different components within your website are responsible for generating each data block independently. Alternatively, if your website is able to manage all schemas for one page in one place, it may be simpler to manage a single data block and render this as a single script element.

You can combine these into a single script by listing each schema as an array like this:

<script type="application/ld+json">
[
  {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "http://www.example.com/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "http://www.example.com/search?&q={query}",
      "query-input": "required"
    }
  },
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "author": "John Doe",
    "interactionCount": [
      "UserTweets:1203",
      "UserComments:78"
    ],
    "name": "How to Tie a Reef Knot"
  }
]
</script>