react-meta-tags
react-meta-tags copied to clipboard
Will there be support in the future to add script tags for things like JSON-LD?
For SEO purposes, one might need to inject script tags such as the following:
<script type="application/ld+json">
{
...
}
</script>
Will there be support for the script tag to be injected in the future?
Ref https://en.wikipedia.org/wiki/JSON-LD
There are straightforward ways to do this already, without too much pain:
JSON-LD.js
import React from 'react';
const JSONLD = ({ data }) =>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>;
export default JSONLD;
MetaComponent.js
import React from 'react';
import MetaTags from 'react-meta-tags';
import JSONLD from './JSON-LD';
export default class MetaComponent extends React.Component {
render() {
return (
<MetaTags>
<title>{this.props.title}</title>
<meta property="og:type" content="website" />
<meta property="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:image" content={this.props.image} />
{
this.props.data && <JSONLD data={this.props.data}/>
}
</MetaTags>
);
}
}
Actor.js
function Actor() {
const data = {
"@context": "http://schema.org",
"@type": "Person",
"url": "http://www.imdb.com/name/nm0626719/",
"name": "John Nettles",
"image": "https://m.media-amazon.com/images/M/MV5BMjAyNjI2OTg5Ml5BMl5BanBnXkFtZTcwNDAzMDgxOA@@._V1_.jpg",
"jobTitle": [
"Actor",
"Soundtrack",
"Writer"
],
"description": "John Nettles has been a familiar face on British and International television screens for over thirty years. From his early beginnings in the UK hit comedy The Liver Birds (1969), he became a household name overnight playing the Jersey detective \"Jim Bergerac\". The series, Bergerac (1981), was a huge hit in Britain and was exported to many ...",
"birthDate": "1943-10-11"
};
return (
<div>
<MetaComponent data={data}/>
<h2>{data.name}</h2>
</div>
)
}
Output JSON-LD read with a Firefox add-on (foreground) and the component rendering in the background (the h2
element with the actor's name):