react-meta-tags icon indicating copy to clipboard operation
react-meta-tags copied to clipboard

Will there be support in the future to add script tags for things like JSON-LD?

Open nbkhope opened this issue 6 years ago • 1 comments

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

nbkhope avatar Jan 28 '19 22:01 nbkhope

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

Screenshot from 2019-06-07 15-19-20

alpha-beta-soup avatar Jun 07 '19 03:06 alpha-beta-soup