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

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>