javascript - 客户端React添加ld+json脚本标签

Question

我目前已经构建了一个 React 应用程序。由于它是一个 SPA，它只有一个 index.html 文件。我想添加 2 个“ld+json”script 标签，即用于某条路线的评论和书签。

我已经在该组件的 componentDidMount 中注入(inject)了 script 标签，但 Google 结构化数据测试工具没有读取它。

是否因为 Google 直接从 index.html 读取并且由于我的 script 标记捆绑在 main.js 中，所以它无法读取它？

是否可以在客户端 React 中执行此操作？服务器端渲染是唯一可行的方法吗？

-- 详细解释---我目前想实现一个像 IMDB 那样的系统，即每当我们在 goole 中搜索电影时； IMDB 搜索结果将在 google 页面本身中显示电影的评级。为此，我需要在我的 index.html 文件中放置一个脚本

<script type='application/ld+json'>
  {
      "@context": "http://schema.org/",
      "@type": "Review",
      "itemReviewed": {
        "@type": "Thing",
        "name": "Name"
      },
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "3",
        "bestRating": "5"
      },
      "publisher": {
        "@type": "Organization",
        "name": "1234"
      }
    }
</script>

因为我的应用程序是一个 SPA，所以我不能把它放在我的主 index.html 文件中。

我目前的做法: 假设“/movies/inception”路由渲染“MovieDetail”组件。因此，我目前正在该组件的末尾添加脚本。

import React from 'react';
import JsonLd from '../path_to_JSONLD';

class MovieDetail extends React.Component {
 render(){
 let data = {
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Thing",
    "name": "Name"
   },
    "reviewRating": {
     "@type": "Rating",
     "ratingValue": "3",
     "bestRating": "5"
    },
   "publisher": {
     "@type": "Organization",
     "name": "1234"
    }
  }
   return(
    <SOME COMPOENTS />
    <JsonLd data={data} />

 )
}

我的 JsonLd 组件

import React from 'react';

const JsonLd = ({ data }) =>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
  />;

  export default JsonLd;

因此，当我检查组件时；我可以看到动态添加的脚本标签。但是，在结构测试工具“https://search.google.com/structured-data/testing-tool”中。它在验证后不显示架构。因此，我问它是否可以通过客户端完成，或者 SSR 是唯一的解决方案，我可以在其中提供更新的 index.html 作为响应。

我希望这能消除困惑。谢谢!

Answer 1

对我来说，React Helmet效果很好。

<Helmet>
    <script className='structured-data-list' type="application/ld+json">{structuredJSON}</script>
</Helmet> 

其中 structuredJSON 类似于此类函数的结果:

export const structuredDataSingle = (prod, imgPath, availability) => {

    let data = {
        "@context": "http://schema.org/",
        "@type": "Product",
        "name": `${prod.title}`,
        "image": prod.images.map((item) => imgPath + item),
        "description": prod['description'],
        "url": location.href,
        "offers": {
            "@type": "Offer",
            "priceCurrency": `${prod['currency'] || "₴"}`,
            "price": prod['price'] ? `${parseFloat(prod['price'])}` : 0,
            "availability": `${availability}`,
            "seller": {
                "@type": "Organization",
                "name": "TopMotoPro"
            }
        }
    };

    // brand
    if(prod['brand']) {
        data['mpn'] = prod['brand'];
        data['brand'] = {
            "@type": "Thing",
            "name": `${prod['brand']}`
        };
    }

    // logo
    if(prod['logo']){
        data['logo'] = imgPath + prod['logo'];
    }

    return JSON.stringify(data);
};