Add structured data for breadcrumbs.

Author: rmariuzzo

src/components/SEO.tsx

@@ -17,6 +17,10 @@ type SEOProps = {
     width: number
   }
   pathname?: string
+  breadcrumbs?: Array<{
+    name: string
+    url?: string
+  }>
 }
 
 export const SEO: React.FC<SEOProps> = ({
@@ -25,7 +29,8 @@ export const SEO: React.FC<SEOProps> = ({
   meta,
   image,
   title,
-  pathname
+  pathname,
+  breadcrumbs = []
 }) => {
   const { site } = useStaticQuery(
     graphql`
@@ -127,6 +132,34 @@ export const SEO: React.FC<SEOProps> = ({
               ]
         )
         .concat(meta as any)}
+      script={
+        breadcrumbs.length > 0
+          ? [
+              {
+                type: 'application/ld+json',
+                innerHTML: `
+                  {
+                    "@context": "https://schema.org",
+                    "@type": "BreadcrumbList",
+                    "itemListElement": [${JSON.stringify(
+                      breadcrumbs.map((crumb, i) => {
+                        const item: any = {
+                          '@type': 'ListItem',
+                          position: i + 1,
+                          name: crumb.name
+                        }
+                        if (crumb.url) {
+                          item.item = `${site.siteMetadata.siteUrl}${crumb.url}`
+                        }
+                        return item
+                      })
+                    )}]
+                  }
+                `
+              }
+            ]
+          : undefined
+      }
     />
   )
 }

src/layouts/PostLayout.tsx

@@ -3,7 +3,6 @@ import { formatRFC7231 } from 'date-fns'
 
 import * as S from './PostLayout.styles'
 import { MainLayout } from './MainLayout'
-import { SEO } from '../components/SEO'
 
 type PostLayoutProps = {
   title: string
@@ -25,7 +24,6 @@ export const PostLayout: React.FC<PostLayoutProps> = ({
 }) => {
   return (
     <MainLayout {...more}>
-      <SEO title={title} />
       <S.Container>
         <S.PostCategory>{category}</S.PostCategory>
         <S.PostTitle>{title}</S.PostTitle>

src/pages/{MarkdownRemark.frontmatter__slug}.tsx

@@ -3,6 +3,8 @@ import { graphql } from 'gatsby'
 import { parseISO } from 'date-fns'
 
 import { PostLayout } from '../layouts/PostLayout'
+import { getBlogNameById } from '../utils/blog'
+import { SEO } from '../components/SEO'
 
 type TemplateProps = {
   data: {
@@ -38,23 +40,27 @@ const Template: React.FC<TemplateProps> = ({ data, ...more }) => {
   const previousSlug = slugs[slugs.indexOf(frontmatter.slug) - 1]
   const nextSlug = slugs[slugs.indexOf(frontmatter.slug) + 1]
 
-  const category =
-    categoryId === 'lymphoma'
-      ? 'Lymphoma'
-      : categoryId === 'code'
-      ? 'Code'
-      : 'Secret'
+  const category = getBlogNameById(categoryId)
 
   return (
-    <PostLayout
-      {...more}
-      title={frontmatter.title}
-      date={parseISO(frontmatter.date)}
-      category={category}
-      contents={html}
-      previousSlug={previousSlug}
-      nextSlug={nextSlug}
-    />
+    <>
+      <SEO
+        title={frontmatter.title}
+        breadcrumbs={[
+          { name: category, url: `/${categoryId}` },
+          { name: frontmatter.title }
+        ]}
+      />
+      <PostLayout
+        {...more}
+        title={frontmatter.title}
+        date={parseISO(frontmatter.date)}
+        category={category}
+        contents={html}
+        previousSlug={previousSlug}
+        nextSlug={nextSlug}
+      />
+    </>
   )
 }
 

src/utils/blog.ts

@@ -0,0 +1,19 @@
+const blogIds = ['lymphoma', 'code'] as const
+type BlogId = typeof blogIds[number]
+
+const isBlogId = (source: any): source is BlogId => {
+  return blogIds.includes(source)
+}
+
+export const getBlogNameById = (id: string): string => {
+  if (!isBlogId(id)) {
+    return 'General'
+  }
+
+  switch (id) {
+    case 'lymphoma':
+      return 'Lymphoma'
+    case 'code':
+      return 'Code'
+  }
+}