摘要
我正在将 Schema.org JSON-LD 结构化数据实现到内容非常丰富的 React 应用程序中。我已经正确设置了所有内容，但我怀疑我的设置方式是否是最佳实践或可接受的？
问题
我在每个元素内的代码正文中都缩小了标签。我对这种方法提出质疑，因为在整个正文中使用脚本标签似乎效率很低，而不是尝试将它们合并到带有所有 JSON-LD 的 1 个大脚本标签下的 head 标签中。
示例:
假设我有一个电子商务类别，页面上有很多产品。每个产品都包含在 <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)。我可以在顶部构建一个包含大部分数据的脚本标签，然后用微数据填充其余部分？
最佳答案
真正了解的唯一方法是使用您想要读取标记的系统进行测试。
这样做没有理由是错误的。我认为它是这样完成的，因为它是在系统处理这些实体时添加的。如果可能的话，让每个人在顶部添加自己的脚本而不是内联脚本可能会更简洁。
我个人更喜欢将实体保留在自己的脚本中。如果其中一个存在错误，也不会阻止其他的解析。您可以让实体通过 ID 相互交叉引用。
尽量不要与微观数据混合。您不能在两者之间交叉引用 id。
您可能还需要考虑您的实体结构。通常，您只需要一个主要的顶级实体来表示页面的内容。其他一些顶级实体也很好，因为它们被认为与网页相关，例如面包屑列表。但您不想发送混合消息。例如如果您标记 10 种产品，该页面是关于哪一种产品？如果您标记产品和文章。该页面是一篇文章还是关于产品？
关于reactjs - React JSON-LD 架构中的脚本标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51688438/