docs: add SERP breadcrumb

Author: mrholek

packages/docs/content/4.2/migration/Docs.tsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet'
 import { useLocation } from '@reach/router'
 import { useStaticQuery, graphql } from 'gatsby'
 
-const SEO = ({ title, description, image, article }) => {
+const SEO = ({ title, description, name, image, article }) => {
   const { pathname } = useLocation()
   const { site } = useStaticQuery(query)
 
@@ -20,6 +20,7 @@ const SEO = ({ title, description, image, article }) => {
   const seo = {
     title: title || defaultTitle,
     description: description || defaultDescription,
+    name: name,
     image: `${siteUrl}${image || defaultImage}`,
     url: `${siteUrl}${pathname}`,
   }
@@ -29,7 +30,7 @@ const SEO = ({ title, description, image, article }) => {
       <meta name="description" content={seo.description} />
       <meta name="image" content={seo.image} />
 
-      {seo.url && <meta property="og:url" content={seo.url} />}
+      {seo.url && <meta property="og:url" content={seo.url.replace('docs//', 'docs/')} />}
 
       {(article ? true : null) && <meta property="og:type" content="article" />}
 
@@ -48,6 +49,26 @@ const SEO = ({ title, description, image, article }) => {
       {seo.description && <meta name="twitter:description" content={seo.description} />}
 
       {seo.image && <meta name="twitter:image" content={seo.image} />}
+
+      {seo.name && (
+        <script type="application/ld+json">
+          {`
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            "itemListElement": [{
+              "@type": "ListItem",
+              "position": 1,
+              "name": "React",
+              "item": "${siteUrl}"
+            },{
+              "@type": "ListItem",
+              "position": 2,
+              "name": "${seo.name}",
+              "item": "${seo.url.replace('docs//', 'docs/')}"
+            }]
+          `}
+        </script>
+      )}
     </Helmet>
   )
 }
@@ -57,13 +78,15 @@ export default SEO
 SEO.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
+  name: PropTypes.string,
   image: PropTypes.string,
   article: PropTypes.bool,
 }
 
 SEO.defaultProps = {
   title: null,
   description: null,
+  name: null,
   image: null,
   article: false,
 }

packages/docs/src/components/Seo.tsx

@@ -26,7 +26,11 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
   const [sidebarVisible, setSidebarVisible] = useState()
   return (
     <>
-      <Seo title={mdx.frontmatter.title} description={mdx.frontmatter.description} />
+      <Seo
+        title={mdx.frontmatter.title}
+        description={mdx.frontmatter.description}
+        name={mdx.frontmatter.name}
+      />
       <myContext.Provider
         value={{
           sidebarVisible,
@@ -82,6 +86,7 @@ export const pageQuery = graphql`
       frontmatter {
         title
         description
+        name
         route
       }
       tableOfContents(maxDepth: 3)