Add ld+json script tag in client-side React
For me, React Helmet works well.
<Helmet>
<script className='structured-data-list' type="application/ld+json">{structuredJSON}</script>
</Helmet>
Where structuredJSON
is something like result of such function:
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);
};
Solution: Used "react-meta-tags" Link : 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>
)
}
}
And then I imported this component in my main component
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"} />
)
}
What the package does is insert the script tag inside the head tag dynamically and since the script now is not bundled inside the main.js file google is able to read it from the source.
You can simply render it dangerously
<script type='application/ld+json' dangerouslySetInnerHTML={ { __html: `{ "@context": "http://schema.org", "@type": "LocalBusiness", ... }`}} />