React JSON-LD 架构中的脚本标签

Question

总结

我正在将 Schema.org JSON-LD 结构化数据实施到内容非常丰富的 React 应用程序中。我已经正确设置了所有内容，但我质疑我的设置方式是否是最佳实践或可接受的？

问题

我在每个元素的 body 代码中都缩小了标签。我质疑这种方法，因为在整个 body 中使用脚本标签似乎效率低下，而不是尝试将它们合并到 head 标签下的 1 个大脚本标签下，所有 JSON-LD.

示例： 假设我有一个电子商务类别，页面上有很多产品。每个产品都包含在 <div> 中。在每个产品中 div 我提供了一个 schema.org 标签。

<div className="product-1-example">
    <script type="application/ld+json">{"@context":"http://schema.org/", "@type":"Product","name":"3rd thing"}</script>
</div>
<div className="product-2-example">
    <script type="application/ld+json">{"@context":"http://schema.org/", "@type":"Product","name":"3rd thing"}</script>
</div>

如果上面的示例无法帮助说明代码的输出方式，请看下面的屏幕截图：

这种方法可行吗？到处都有这样的脚本标签对我来说似乎很奇怪？我也遇到的问题是，由于我的组件结构，我无法真正将顶部的 1 个漂亮标签与所有合并的结构化数据捆绑在一起（即将所有产品 JSON-LD 数据分组为 1） .我也许可以在顶部用大部分数据构建一个脚本标签，然后用微数据填充其余部分？

Answer 1

真正了解的唯一方法是使用您想要读取标记的系统进行测试。

这样做没有理由是错误的。而且我认为它是在系统处理这些实体时添加的那样完成的。如果可能的话，让每个人在顶部而不是内联添加他们自己的脚本可能更整洁。

我个人更喜欢将实体保留在它们自己的脚本中。如果其中一个有错误，它不会阻止其他人被解析。您可以让实体通过它们的 ID 相互引用。

尽量不要与微数据混用。您不能在两者之间交叉引用 ID。

您可能还需要考虑您的实体结构。通常，您只需要一个主要的顶级实体来表示页面的内容。其他一些顶级实体很好，因为它们被认为与网页相关，例如面包屑列表。但是您不想发送混合消息。例如如果您标记 10 种产品，该页面是关于哪一种？如果您标记产品和文章。该页面是文章还是关于产品？

React JSON-LD 架构中的脚本标签

Script tags in React JSON-LD Schema

reactjs

seo

schema.org

json-ld

structured-data