web-dev-qa-db-ja.com

ld + jsonスクリプトタグをクライアント側に追加React

現在Reactアプリを作成しています。これはSPAであるため、index.htmlファイルが1つあります。 "ld + json" scriptタグを2つ追加します。特定のルートのレビューとブックマーク。

そのコンポーネントの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を応答として提供できる唯一のソリューションであるかどうかを尋ねました。

これで混乱が解消されることを願っています。ありがとう！

javascriptreactjsjson-ldgoogle-rich-snippets
11
Ashish Shetty

解決策：「react-meta-tags」リンクを使用： https://github.com/s-yadav/react-meta-tags

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"} />

 )
}

パッケージが行うことは、ヘッドタグ内に動的にスクリプトタグを挿入することであり、スクリプトはmain.jsファイル内にバンドルされていないため、googleはソースから読み取ることができます。

5
Ashish Shetty

私にとって、 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);
};
7
Дмитрий Дорогонов

危険なだけにレンダリングできます

<script type='application/ld+json' dangerouslySetInnerHTML={ { __html: `{ "@context": "http://schema.org", "@type": "LocalBusiness", ... }`}} />
1
Shivam

@ДмитрийДорогонов が示唆するように、スクリプト要素をインライン化するために React Helmet を使用できます。それらをインラインに含めたり、変数補間を使用したりすることもできます。

<script type="application/ld+json">{`
  {
    "@context": "http://schema.org",
    "@type": "${typeVariable}"
  }
`}</script>
0
Giovanni Benussi