如何将多个结构化数据组合到一个脚本标签中（ASP.NET、JS）

Question

我有多个由网页上的不同组件生成的 JSON-LD 标记。这些组件在不同时间加载。一旦所有组件完成加载，我想将这些 JSON-LD 标记组合成一个标签。

例如，在产品类别页面上我有

网页组件

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

面包屑组件

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      ...
    }
</script>

类别组件

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CollectionPage",
      ...
    }
</script>

然后，我想将它们组合成具有嵌套数据结构的脚本标签，如下所示

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Website",
  "name": "Your E-Commerce Website Name",
  ..............
  },

  "mainEntity": {
    "@type": "WebPage",
    "name": "Your E-Commerce Start Page Name",
    ................................
    },

    "breadcrumb": {
      "@type": "BreadcrumbList",
      .................................
    },

    "mainEntityOfPage": {
      "@type": "CollectionPage",
      "name": "Your Collection Page Name",
      ................
      }
    }
}   

有人知道如何用 javascript 或 asp.net 做到这一点吗？

如何解决我的问题

Answer 1

您需要做的是引用它们关系中的不同模式。

为了正确实现这一点，您需要为每个元素提供一个“@Id”属性。 “@Id”属性不需要是全局的，而是页面本地的。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "@id": "https://example.com/#webpage",
      "name": "My Web Site"
    }
</script>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "@id": "https://example.com/foo.html#webpage",
      "name": "My Web Page"
    }
</script>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "@id": "https://example.com/foo.html#breadcrumb",
      "name": "My Breadcrumb List"
    }
</script>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CollectionPage",
      "@id": "https://example.com/foo.html#collectionpage",
      "name": "My Collection Page"
    }
</script>

例如，网页“是网站的一部分”

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "@id": "https://example.com/foo.html#webpage",
      "isPartOf": {
          "@type": "WebSite",
          "@id": "https://example.com/#website"
      }
    }
</script>

如您所见，最后一个脚本可以独立于其他脚本，并将“isPartOf”属性添加到网页，通过其“@id”引用它，并通过其“@id”引用网站