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

(javascript - Add ld+json script tag in client-side React)

发布于 2018-05-29 13:21:58

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

我已经将该script标签注入了componentDidMount该组件，但是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作为响应的唯一解决方案。

我希望这可以消除混乱。谢谢！

Questioner

Ashish Shetty

Viewed

Original

English

import React from 'react'; import MetaTags from 'react-meta-tags'; import JsonLd from 'path_to_jsonld'; export default class MetaComponent extends React.Component { render() { return ( <div className="wrapper"> <MetaTags> <title>{this.props.title}</title> <meta property="og:type" content="website" /> <meta name="description" content={this.props.description} /> <meta name="og:description" content={this.props.description} /> <meta property="og:title" content={this.props.title} /> <meta property="og:url" content={window.location.href} /> <meta property="og:site_name" content={"content"} /> { this.props.jsonLd && <JsonLd data={this.props.jsonLd} /> } </MetaTags> </div> ) } }

import React from 'react'; import MetaComponent from '../path_to_Metacomponent'; 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 /> <MetaComponent jsonLd={data} title={"abcd"} description={"xyza"} /> ) }

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

(javascript - Add ld+json script tag in client-side React)

热门帖子

热门github