JSON-LD helps us to index our content into Google.

We can make JSON-LD markup by using react-schemaorg. The tool provided by Google.

$ yarn add react-schemaorg schema-dts

Usage

We just make a simple React component to make JSON-LD schema.

import { WebPage, Article } from "schema-dts";
import { JsonLd } from "react-schemaorg";

type Post = {
    author: string;
    title: string;
    content: string;
    excerpt: string;
}

const WebpageContent = ({post}: {
  post: Post
}) => {
  return (
    <JsonLd<WebPage>
      item={{
        "@context": "https://schema.org",
        '@type': 'WebPage',
        author: post.author,
        name: post.title,
        abstract: post.excerpt,
      }}
    />
  )
}

And put the component into your webpage components.

const IndexPage = () => {
  const post: Post = {
    author: 'John',
    title: "Hello JSON-LD",
    content: "Welcome to JSON-LD with React world!",
    excerpt: "Simply example of JSON-LD with React application."
  }
  return (
  <Layout>
    <SEO title="Home" />
    <WebpageContent
      post={post}
    />
    <h1>{post.title}</h1>
    <p><small>{post.author}</small></p>
    <p>{post.excerpt}</p>
    <div dangerouslySetInnerHTML={{__html: post.content}}></div>
  </Layout>
  )
}

How can we see the result?

The component will convert the properties as a script tag with JSON-LD.

Rendered HTML

<main>
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebPage",
            "author": "John",
            "name": "Hello JSON-LD",
            "abstract": "Simply example of JSON-LD with React application."
        }
    </script>
    <h1>Hello JSON-LD</h1>
    <p><small>John</small></p>
    <p>Simply example of JSON-LD with React application.</p>
    <div>Welcome to JSON-LD with React world!</div>
</main>