How to nest JSON-LD or how to convert Microdata into JSON-LD?

Question

I want to integrate JSON-LD within my websites. Currently I do semantic markup using Microdata:

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title itemprop="name">Semantic Markup Sample</title>
        <meta name="description" itemprop="description" content="Demonstrate some sample semantic markup."/>
        <meta name="keywords" content="HTML, Semantic, Microdata, JSON-LD"/>
        <meta name="author" content="burnersk"/>
        <meta itemprop="datePublished" content="2017-10-12T09:48:17+02:00">
        <meta name="date" itemprop="dateModified" content="2017-10-12T09:51:03+02:00"/>
        <link rel="canonical" itemprop="url" href="https://example.com/semantic-markup-sample.html"/>
    </head>
    <body>
        <header>
            <h1>Semantic Markup Sample</h1>
        </header>
        <section>
            <article itemscope itemtype="http://schema.org/Article">
                <header>
                    <h2><a itemprop="url" href="https://example.com/second-article.html"><span itemprop="name headline">Second Article</span></a></h2>
                </header>
                <section itemprop="description">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </section>
                <footer>
                    <p>
                        <span>Written on </span>
                        <time datetime="2017-10-12T08:48:17+02:00" itemprop="datePublished" >Thursday, 12th of October 2017 08:48</time>
                        <span> by </span>
                        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
                            <span itemprop="name">burnersk</span>
                        </span>
                        <span>.</span>
                        <span> Edited on </span>
                        <time datetime="2017-10-12T08:49:17+02:00" itemprop="dateModified" >Thursday, 12th of October 2017 08:49</time>
                        <span>.</span>
                    </p>
                    <meta itemprop="image" content="https://example.com/second-article.png"/>
                    <div itemprop="publisher" itemscope itemtype="http://schema.org/Person">
                        <meta itemprop="name" content="burnersk"/>
                    </div>
                </footer>
            </article>
            <article itemscope itemtype="http://schema.org/Article">
                <header>
                    <h2><a itemprop="url" href="https://example.com/first-article.html"><span itemprop="name headline">First Article</span></a></h2>
                </header>
                <section itemprop="description">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </section>
                <footer>
                    <p>
                        <span>Written on </span>
                        <time datetime="2017-10-12T07:48:17+02:00" itemprop="datePublished" >Thursday, 12th of October 2017 07:48</time>
                        <span> by </span>
                        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
                            <span itemprop="name">burnersk</span>
                        </span>
                        <span>.</span>
                        <span> Edited on </span>
                        <time datetime="2017-10-12T07:49:17+02:00" itemprop="dateModified" >Thursday, 12th of October 2017 07:49</time>
                        <span>.</span>
                    </p>
                    <meta itemprop="image" content="https://example.com/first-article.png"/>
                    <div itemprop="publisher" itemscope itemtype="http://schema.org/Person">
                        <meta itemprop="name" content="burnersk"/>
                    </div>
                </footer>
            </article>
        </section>
        <aside>
            <section>
                <h2>Sidebar</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </section>
        </aside>
        <footer>
        </footer>
    </body>
</html>

Now I want to add JSON-LD markup alongside Microdata for a test run.

However it is a kind of a challenge with the nested JSON-LD markup. I could not find resources for nested JSON-LD. I see no scope feature of JSON-LD to indicate which parts of the HTML are described (like itemscope with Microdata).

My sample website (see code above) is organized into 3 parts:

WebSite object which contains
- Article object "Second Article" and
- Article object "First Article".

How to implement JSON-LD for such a nested website?

Note that you [must](http://stackoverflow.com/a/24659620/1591669) use `link` instead of `meta` if the value is a URL. So `` has to be ``. — unor, Oct 12 '17 at 10:36

score 2 · Accepted Answer · answered Oct 12 '17 at 10:30

Microdata does not describe the HTML parts, it just makes use of the HTML as transport medium. So after the Microdata is extracted, any connection to the HTML is lost.

The following snippets are semantically different (HTML), but produce the same Microdata:

<div itemscope itemtype="http://schema.org/WebPage">
  <p itemprop="name">Hello world</p>
</div>

<div itemscope itemtype="http://schema.org/WebPage">
  <p itemprop="name">Hello <b>world</b></p>
</div>

<div itemscope itemtype="http://schema.org/WebPage">
  <strong itemprop="name">Hello world</strong>
</div>

<h1>Hello world</h1>

<div itemscope itemtype="http://schema.org/WebPage">
  <meta itemprop="name" content="Hello world" />
</div>

JSON-LD works like the last Microdata example: the data gets specified independently of the existing HTML:

<h1>Hello world</h1>

<script type="application/ld+json">
  {
   "@context": "http://schema.org",
   "@type": "WebPage",
   "name": "Hello world"
  }
</script>

Multiple top-level items in JSON-LD

In your Microdata example, you are specifying three top-level items. To do this in JSON-LD, you can either use multiple script elements (one per item) or use one script element with @graph, e.g.:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@graph": 
  [
    {
       "@type": "WebPage"
    },
    {
       "@type": "Article"
    },
    {
       "@type": "Article"
    }
  ]
}
</script>

(Note that it’s a good practice to connect items with suitable properties, if possible. In typical cases, you’ll only have one top-level item which references/nests the other items.)

How to nest JSON-LD or how to convert Microdata into JSON-LD?

1 Answers1

Multiple top-level items in JSON-LD