如何嵌套JSON-LD 或如何将Microdata 转换为JSON-LD？

Question

我想在我的网站中集成 JSON-LD。目前我使用微数据做语义标记：

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

现在我想在微数据旁边添加 JSON-LD 标记以进行测试运行。

然而，嵌套 JSON-LD 标记是一种挑战。我找不到嵌套 JSON-LD 的资源。我看不到 JSON-LD 的 scope 特征来指示 HTML 的哪些部分被描述（如 itemscope 与 Microdata）。

我的示例网站（见上面的代码）分为 3 个部分：

WebSite 包含的对象
- Article 对象 "Second Article" 和
- Article 对象 "First Article".

这样的嵌套网站如何实现JSON-LD？

Answer 1

Microdata 没有描述 HTML 部分，它只是 使用 HTML 的 作为传输中等的。因此，提取微数据后，与 HTML 的任何连接都会丢失。

以下片段在语义上不同 (HTML)，但生成相同的微数据：

<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 与上一个 Microdata 示例类似：现有 HTML:

的数据 gets specified independently

<h1>Hello world</h1>

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

JSON-LD

中的多个顶级项目

在您的微数据示例中，您指定了三个顶级项目。要在 JSON-LD 中执行此操作，您可以使用 (one per item) or use one script element ，例如：

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

（请注意，如果可能，最好将项目与合适的属性连接起来。在典型情况下，您只有一个顶级项目，references/nests 其他项目。）

如何嵌套JSON-LD 或如何将Microdata 转换为JSON-LD？

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

html

microdata

json-ld

JSON-LD