gatsby-theme-wordpress-mdx/src/components/Seo/SchemaOrg.js

<p align="center"> <img width='200px' alt="Gatsby Theme" src="https://raw.githubusercontent.com/artezan/gatsby-theme-wordpress-mdx/master/%40artezan/gatsby-theme-wordpress-mdx/dn.png" />

import React from 'react'
import { Helmet } from 'react-helmet'

export default React.memo(
  ({
    author,
    siteUrl,
    defaultTitle,
    description,
    image,
    isBlogPost,
    organization,
    title,
    url
  }) => {
    const baseSchema = [
      {
        '@context': 'http://schema.org',
        '@type': 'WebSite',
        url,
        name: title,
        alternateName: defaultTitle
      }
    ]

    const schema = isBlogPost
      ? [
          ...baseSchema,
          {
            '@context': 'http://schema.org',
            '@type': 'BreadcrumbList',
            itemListElement: [
              {
                '@type': 'ListItem',
                position: 1,
                item: {
                  '@id': url,
                  name: title,
                  image
                }
              }
            ]
          },
          {
            '@context': 'http://schema.org',
            '@type': 'BlogPosting',
            url,
            name: title,
            alternateName: defaultTitle,
            headline: title,
            image: {
              '@type': 'ImageObject',
              url: image
            },
            description,
            author: {
              '@type': 'Person',
              name: author.name
            },
            mainEntityOfPage: {
              '@type': 'WebSite',
              '@id': siteUrl
            }
          }
        ]
      : baseSchema

    return (
      <Helmet>
        {/* Schema.org tags */}
        <script type="application/ld+json">{JSON.stringify(schema)}</script>
      </Helmet>
    )
  }
)