web-dev-qa-db-fra.com

Ajouter une balise de script ld + json côté client React

J'ai actuellement construit une application React. Comme il s'agit d'un SPA, il a un seul fichier index.html. Je veux ajouter 2 balises "ld + json" script, c'est-à-dire pour les avis et les signets pour un certain itinéraire.

J'ai injecté la balise script dans componentDidMount de ce composant, mais l'outil de test de données structurées de Google ne lit pas cela.

Est-ce parce que Google lit directement depuis index.html et comme mes balises script sont regroupées dans main.js, il ne peut pas le lire?

Est-il possible de le faire dans React côté client? Le côté serveur est-il le seul moyen possible de le faire?

- Explication détaillée --- Je veux actuellement implémenter un système comme IMDB, c'est-à-dire chaque fois que nous recherchons un film dans goole; le résultat de la recherche IMDB affichera la note du film dans les pages google elles-mêmes. Pour ce faire, j'ai besoin de mettre un script dans mon fichier 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>

Étant donné que mon application est un SPA, je ne peux pas mettre cela dans mon fichier index.html principal.

Mon approche actuelle: Supposons que la route "/ movies/inception" rende le composant "MovieDetail". Donc, j'ajoute actuellement le script à la fin de ce composant.

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

 )
}

Mon composant JsonLd

import React from 'react';

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

  export default JsonLd;

Donc, quand j'inspecte le composant; je peux voir la balise de script ajoutée dynamiquement. Mais, dans l'outil de test de structure " https://search.google.com/structured-data/testing-tool ". Il ne montre pas le schéma après validation. Par conséquent, j'ai demandé si cela peut être fait via le côté client ou SSR n'est que la solution pour cela où je peux donner un index.html mis à jour en réponse.

J'espère que cela efface la confusion. Merci!

javascriptreactjsjson-ldgoogle-rich-snippets
11
Ashish Shetty

Solution: lien "react-meta-tags" utilisé: 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>
  )
 }
}

Et puis j'ai importé ce composant dans mon composant principal

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

 )
}

Le package insère dynamiquement la balise de script à l'intérieur de la balise head et puisque le script n'est plus intégré dans le fichier main.js, Google est capable de le lire à partir de la source.

5
Ashish Shetty

Pour moi, React Helmet fonctionne bien.

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

Où structuredJSON est quelque chose comme le résultat d'une telle fonction:

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
Дмитрий Дорогонов

Vous pouvez simplement le rendre dangereusement

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

Comme @ Дмитрий Дорогонов suggéré, vous pouvez utiliser React Helmet pour incorporer des éléments de script. Vous pouvez également les inclure en ligne et utiliser également l'interpolation variable:

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