fix(v2): Unbreak blog post title by handling title fallback in `Layou…

…tHead` (#4667) * fix(v2): Unbreak blog post title * Revert "fix(v2): Unbreak blog post title" This reverts commit d21444b. * Move title fallback to LayoutHead * Make SEO component only render title when not null
facebook · Apr 22, 2021 · 2dcbd50 · 2dcbd50
1 parent 458af07
commit 2dcbd50
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
@@ -14,6 +14,7 @@ import SearchMetadatas from '@theme/SearchMetadatas';
 import Seo from '@theme/Seo';
 import {
   DEFAULT_SEARCH_TAG,
+  useTitleFormatter,
   useAlternatePageUtils,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
@@ -90,6 +91,7 @@ export default function LayoutHead(props: Props): JSX.Element {
   } = useDocusaurusContext();
   const {title, description, image, keywords, searchMetadatas} = props;
   const faviconUrl = useBaseUrl(favicon);
+  const pageTitle = useTitleFormatter(title);
 
   // See https://github.com/facebook/docusaurus/issues/3317#issuecomment-754661855
   // const htmlLang = currentLocale.split('-')[0];
@@ -101,9 +103,11 @@ export default function LayoutHead(props: Props): JSX.Element {
       <Head>
         <html lang={htmlLang} dir={htmlDir} />
         {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+        <title>{pageTitle}</title>
+        <meta property="og:title" content={pageTitle} />
       </Head>
 
-      <Seo {...{title, description, keywords, image}} />
+      <Seo {...{description, keywords, image}} />
 
       <CanonicalUrlHeaders />
 

diff --git a/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx
@@ -24,8 +24,8 @@ export default function Seo({
 
   return (
     <Head>
-      <title>{pageTitle}</title>
-      <meta property="og:title" content={pageTitle} />
+      {title && <title>{pageTitle}</title>}
+      {title && <meta property="og:title" content={pageTitle} />}
 
       {description && <meta name="description" content={description} />}
       {description && <meta property="og:description" content={description} />}