React Helmet 在 </html> 之外添加了 <script type="application/ld+json">

Question

我在我的网站上实施了一个第三方小部件来获得丰富网页摘要的星星。问题是 Google-bot 和 Google 结构化数据测试工具无法识别 ld+json 标记，因为它在 html[ 之外=22=]标签。我已经使用 React Helmet 强制脚本在 head 标签内，但徒劳无功！

这是我的应用程序的代码：

return ( <div className="cleanslate widget-box"> {comp} <Helmet> <script type="application/ld+json"> {` { "@context": "https://schema.org/", "@type": "CreativeWorkSeries", "name": "${this.state.name}", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "${this.state.rating}", "bestRating": "10", "ratingCount": "${this.state.voters}" } } `} </script> </Helmet> </div> )

Answer 1

在你的 json 上尝试 JSON.stringify()。像这样：

const ldJson = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Blogs",
    "item": "https://www.speblog.org"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": head.title,
    "item": window.location.href
  }]
};

<script type="application/ld+json">
  {JSON.stringify(ldJson)}
</script>

直到我这样做才对我有用 (react-helment@^5.2.1)

React Helmet 在 </html> 之外添加了 <script type="application/ld+json">

React Helmet adds <script type="application/ld+json"> outside </html>

reactjs

widget

frontend

react-helmet