feat: structured data for blog posts

facebook · Aug 10, 2021 · aa5b95b · aa5b95b
1 parent 1815187
commit aa5b95b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
+import BlogPostStructuredData from '@theme/BlogPostStructuredData';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
 import {ThemeClassNames} from '@docusaurus/theme-common';
@@ -30,6 +31,11 @@ function BlogPostPage(props: Props): JSX.Element {
           ? BlogPostContents.toc
           : undefined
       }>
+      <BlogPostStructuredData
+        frontMatter={frontMatter}
+        frontMatterAssets={frontMatterAssets}
+        metadata={metadata}
+      />
       <BlogPostItem
         frontMatter={frontMatter}
         frontMatterAssets={frontMatterAssets}

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostStructuredData/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostStructuredData/index.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Head from '@docusaurus/Head';
+import type {Props} from '@theme/BlogPostStructuredData';
+
+function BlogPostStructuredData(props: Props): JSX.Element {
+  const {frontMatter, frontMatterAssets, metadata} = props;
+  const {date, title, description} = metadata;
+
+  const image = frontMatterAssets.image ?? frontMatter.image;
+
+  const authorURL = frontMatter.author_url || frontMatter.authorURL;
+  const authorTitle = frontMatter.author_title || frontMatter.authorTitle;
+
+  // details on structured data support: https://developers.google.com/search/docs/data-types/article#non-amp
+  // and https://schema.org/BlogPosting
+  const blogPostStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: title,
+    description,
+    ...(image ? {image: [image]} : {}),
+    datePublished: date,
+    author: {
+      '@type': 'Person',
+      name: authorTitle,
+      url: authorURL,
+    },
+  };
+
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(blogPostStructuredData)}
+      </script>
+    </Head>
+  );
+}
+
+export default BlogPostStructuredData;
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -46,6 +46,24 @@ declare module '@theme/BlogPostItem' {
   export default BlogPostItem;
 }
 
+declare module '@theme/BlogPostStructuredData' {
+  import type {
+    FrontMatter,
+    FrontMatterAssets,
+    Metadata,
+  } from '@theme/BlogPostPage';
+
+  export type Props = {
+    readonly frontMatter: FrontMatter;
+    readonly frontMatterAssets: FrontMatterAssets;
+    readonly metadata: Metadata;
+    readonly truncated?: string | boolean;
+  };
+
+  const BlogPostStructuredData: (props: Props) => JSX.Element;
+  export default BlogPostStructuredData;
+}
+
 declare module '@theme/BlogPostPaginator' {
   type Item = {readonly title: string; readonly permalink: string};