Question

我有一个使用React构建的Gatsby网站。我想通过JSON + LD包含结构化数据。我创建了一个输出<script type="application/ld+json">{JSON.stringify([object])}</script>的特定组件，其中object是具有结构化数据的JS对象：

let object = {
  "@context": "http://schema.org",
  "@type": "Game",
  name: post.title,
  ...
};

但是，我在编译后的站点上得到的JSON.stringify-ed字符串的引号用"来转义HTML：

<script type="application/ld+json">[{&quot;@context&quot;:&quot;http://schema.org&quot;,&quot;@type&quot;:&quot;Game&quot; …

当我尝试使用Google Structured Data Testing Tool解析站点时，它显示了解析错误。我了解这是由于"引起的。（example URL）

有关如何解决此问题的任何提示？

Answer 1

这对我有用：

let object = {
  "@context": "http://schema.org",
  "@type": "Game",
  name: post.title,
  ...
};
const mySchema = JSON.stringify(object);
function makeJSONLD() {
  return (__html: mySchema);
}

return (
  <script type="application/ld+json" dangerouslySetInnerHTML={makeJSONLD()} />
)

dangerouslySetInnerHTML文档在这里：https://reactjs.org/docs/dom-elements.html

仅供参考，Google文档似乎表明您可以将JSON-LD放在页面HTML的顶部或正文中-https://developers.google.com/search/docs/guides/intro-structured-data。就个人而言，我不想在头盔组件中填充不必要的逻辑，但是很高兴可以选择。

Answer 2

我并没有完全解决我的问题，但是通过将JSON + LD移到React <Helmet>内部，它可以正确输出，因此现在可以验证。万一其他人遇到同样的问题，我就把它留在这里。

在GatsbyJS React网站上输出未转义的JSON + LD

2 个答案: