html - 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

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>