我想在我的网站中集成JSON-LD
。目前我使用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>
现在我想在Microdata旁边添加JSON-LD标记以进行测试运行。
然而,对于嵌套的JSON-LD标记来说,这是一种挑战。我找不到嵌套JSON-LD的资源。我没有看到JSON-LD的范围功能来指示HTML的哪些部分被描述(比如itemscope
和Microdata。)
我的示例网站(见上面的代码)分为3个部分:
WebSite
包含的对象
Article
对象“第二条”和Article
对象“第一条”。如何为这样的嵌套网站实施JSON-LD?
答案 0 :(得分:2)
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>
在您的Microdata示例中,您指定了三个顶级项目。要在JSON-LD中执行此操作,您可以使用multiple script
elements(每个项目一个)或使用一个script
元素with @graph
,例如:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@graph":
[
{
"@type": "WebPage"
},
{
"@type": "Article"
},
{
"@type": "Article"
}
]
}
</script>
(请注意,如果可能的话,最好连接具有合适属性的项目。在典型情况下,您将只有一个顶级项目引用/嵌套其他项目。)