Best JSON-Ld Practices: Using Multiple <Script> Elements

Best JSON-LD practices: using multiple script elements?

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

Many JSON-LD script elements per page or a single one with nesting?

Important is that you connect the entities with suitable properties, not how many script elements you use.

If you have these three entities on a page, you should convey how they are related. What you probably want to convey: there is a web page that is part of that website, that is published by that organization, and that has that a breadcrumb list.

So what you are missing is an entity representing the web page (→ WebPage) and properties to connect all your entities (→ publisher, breadcrumb, isPartOf).

In how many script elements you specify these entities is up to you:

One script, nesting all entites.
One script, with multiple top-level objects (using @graph and @id).
A script per entity (using @id).
A combination of the above.

The first one is the most simple:

{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "isPartOf": {
    "@type": "WebSite"
  },
  "publisher": {
    "@type": "Organization"
  },
  "breadcrumb": {
    "@type": "BreadcrumbList"
  }
}

Give each relevant entity an @id, so you can reference these entities on the same page (in the same script element or in other ones), or even on external pages.

I’m using it here to convey that the same Organization is the publisher of the WebPage as well as the WebSite:

{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "@id": "",
  "isPartOf": {
    "@type": "WebSite",
    "@id": "/#this-site",
    "publisher": {"@id": "/#this-org"}
  },
  "publisher": {
    "@type": "Organization",
    "@id": "/#this-org"
  },
  "breadcrumb": {
    "@type": "BreadcrumbList"
  }
}

How to use multiple elements in JSON-LD

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

Sample Image

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

How can I correctly implement Schema.org with multiple lists using JSON-LD?

In general use HTML5 semantic element (main, section and so on) + Correct site outliner (H2 for each list and so on).

Two lists

About your schema.
The best idea is to think in "microdata" view.

Your list is not nested

<ul>
  <li>
    <ul><li></li></ul>
  </li>
  <li>
    <ul><li></li></ul>
  </li>
</ul>

Nested lists example: https://schema.org/OfferCatalog#offer-3

Use multiple json-ld scripts

In this case, I think the best/simple idea is to use two seperate lists "objects" (And add name/url/and so on for each list) - Example outline (Missing properties for short code):

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemList",
        "name": "Recent Articles",
        "numberOfItems": "1",
        "itemListOrder": "Descending",
        "itemListElement": [
            {
                "@type": "Article",
                "position": "1",
                "headline": "I am recent Article"
            }          
        ]

    }
</script>
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemList",
        "name": "Popular Articles",
        "numberOfItems": "1",
        "itemListOrder": "Descending",
        "itemListElement": [
            {
                "@type": "Article",
                "position": "1",
                "headline": "I am Popular Article"
            }          
        ]    
    }
</script>

Sample Image

https://webmasters.stackexchange.com/questions/96903/can-i-have-multiple-json-ld-scripts-in-the-same-page

Publisher as itemref

Try this idea:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref
https://moz.com/blog/search-marketers-guide-to-itemref-itemid

Example (Refernce Organization object to Article):

<!-- Organization -->
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Organization",
    "@id": "#Organization-name",
    "name": "My Organization"
}
</script>
<!-- Recent Articles -->
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemList",
        "name": "Recent Articles",
        "numberOfItems": "1",
        "itemListOrder": "Descending",
        "itemListElement": [
            {
                "@type": "Article",
                "position": "1",
                "headline": "I am recent Article",
                "publisher": {
                 "@id": "#Organization-name"
                 }
            }          
        ]
    }
</script>
<!-- Popular Articles -->
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemList",
        "name": "Popular Articles",
        "numberOfItems": "1",
        "itemListOrder": "Descending",
        "itemListElement": [
            {
                "@type": "Article",
                "position": "1",
                "headline": "I am Popular Article",
                 "publisher": {
                     "@id": "#Organization-name"
                 }
            }          
        ]    
    }
</script>

Testing-tool output:

mainentityofpage

Read this:
https://webmasters.stackexchange.com/questions/87940/new-required-mainentityofpage-for-article-structured-data

Best JSON-Ld Practices: Using Multiple <Script> Elements