Добавьте тег сценария ld + json в React на стороне клиента

Question

Я сейчас создаю приложение React.Поскольку это SPA, у него есть один файл index.html.Я хочу добавить 2 тега "ld + json" script, т.е. для обзоров и закладок для определенного маршрута.

Я ввел тег script в componentDidMount этого компонента, но Инструмент тестирования структурированных данных Google его не читает.

Это потому, что Google читает напрямую из index.html и поскольку мои script теги связаны внутри main.js, он не может его прочитать?

Возможно ли это сделать на стороне клиентаРеагировать?Является ли серверная отрисовка единственным возможным способом сделать это?

- Подробное объяснение --- В настоящее время я хочу реализовать систему, подобную 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 - единственное решение для этого, где я могу дать обновленный индекс.html в ответ.

Надеюсь, это устранит путаницу. Спасибо!

Answer 1

Для меня React Helmet работает хорошо.

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

, где structdJSON - это что-то вроде результата такой функции:

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);

};

Answer 2

Решение: Использованы «реактивные мета-теги» Ссылка: 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"} />

 )
}

Что делает пакетэто вставить тег script внутри тега head динамически, и поскольку скрипт теперь не входит в файл main.js, Google может прочитать его из источника.