From 1d698764894d3fac06e82d9988eefb7c01cdaa8b Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Wed, 16 Mar 2022 19:54:32 +0100
Subject: [PATCH 01/14] Refactor how page metadatas are handled

---
 .../src/index.d.ts                            |   8 +-
 .../src/theme-classic.d.ts                    |  29 +---
 .../src/theme/BlogArchivePage/index.tsx       |  22 ++-
 .../src/theme/BlogListPage/index.tsx          |  83 ++++++---
 .../src/theme/BlogPostPage/index.tsx          |  98 +++++------
 .../src/theme/BlogTagsListPage/index.tsx      |  28 +--
 .../src/theme/BlogTagsPostsPage/index.tsx     |  71 ++++----
 .../DocCategoryGeneratedIndexPage/index.tsx   |  35 +++-
 .../src/theme/DocItem/index.tsx               | 121 +++++++------
 .../src/theme/DocPage/index.tsx               | 162 ++++++++++--------
 .../src/theme/DocTagDocListPage/index.tsx     |  68 ++++----
 .../src/theme/DocTagsListPage/index.tsx       |  37 ++--
 .../src/theme/Layout/index.tsx                |  12 +-
 .../src/theme/MDXPage/index.tsx               |  57 +++---
 .../src/theme/NotFound.tsx                    |  71 ++++----
 .../{LayoutHead => SiteMetadata}/index.tsx    |  36 ++--
 packages/docusaurus-theme-common/src/index.ts |   2 +
 .../src/utils/metadataUtils.tsx}              |  24 ++-
 packages/docusaurus/src/client/App.tsx        |   4 +
 .../src/client/SiteMetadataDefaults.tsx       |  27 +++
 .../src/client/theme-fallback/Error/index.tsx |   6 +-
 .../client/theme-fallback/Layout/index.tsx    |  27 +--
 .../client/theme-fallback/NotFound/index.tsx  |  30 ++--
 .../src/client/theme-fallback/Root/index.tsx  |   5 +-
 .../theme-fallback/SiteMetadata/index.tsx     |  11 ++
 25 files changed, 604 insertions(+), 470 deletions(-)
 rename packages/docusaurus-theme-classic/src/theme/{LayoutHead => SiteMetadata}/index.tsx (76%)
 rename packages/{docusaurus-theme-classic/src/theme/Seo/index.tsx => docusaurus-theme-common/src/utils/metadataUtils.tsx} (67%)
 create mode 100644 packages/docusaurus/src/client/SiteMetadataDefaults.tsx
 create mode 100644 packages/docusaurus/src/client/theme-fallback/SiteMetadata/index.tsx

diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts
index 31da0335637e..689d55a92520 100644
--- a/packages/docusaurus-module-type-aliases/src/index.d.ts
+++ b/packages/docusaurus-module-type-aliases/src/index.d.ts
@@ -91,9 +91,7 @@ declare module '@theme/Layout' {
   import type {ReactNode} from 'react';
 
   export interface Props {
-    readonly children?: ReactNode;
-    readonly title?: string;
-    readonly description?: string;
+    readonly children: ReactNode;
   }
   export default function Layout(props: Props): JSX.Element;
 }
@@ -117,6 +115,10 @@ declare module '@theme/Root' {
   export default function Root({children}: Props): JSX.Element;
 }
 
+declare module '@theme/SiteMetadata' {
+  export default function SiteMetadata(): JSX.Element;
+}
+
 declare module '@docusaurus/constants' {
   export const DEFAULT_PLUGIN_ID: 'default';
 }
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index f6973773c9b3..d7ff56231f44 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -364,8 +364,11 @@ declare module '@theme/Layout' {
 
   export interface Props {
     readonly children?: ReactNode;
-    readonly title?: string;
     readonly noFooter?: boolean;
+
+    // TODO remove
+    /*
+    readonly title?: string;
     readonly description?: string;
     readonly image?: string;
     readonly keywords?: string | string[];
@@ -376,19 +379,13 @@ declare module '@theme/Layout' {
       readonly version?: string;
       readonly tag?: string;
     };
+
+     */
   }
 
   export default function Layout(props: Props): JSX.Element;
 }
 
-declare module '@theme/LayoutHead' {
-  import type {Props as LayoutProps} from '@theme/Layout';
-
-  export interface Props extends Omit<LayoutProps, 'children'> {}
-
-  export default function LayoutHead(props: Props): JSX.Element;
-}
-
 declare module '@theme/LayoutProviders' {
   import type {ReactNode} from 'react';
 
@@ -868,17 +865,3 @@ declare module '@theme/prism-include-languages' {
     PrismObject: typeof PrismNamespace,
   ): void;
 }
-
-declare module '@theme/Seo' {
-  import type {ReactNode} from 'react';
-
-  export interface Props {
-    readonly title?: string;
-    readonly description?: string;
-    readonly keywords?: readonly string[] | string;
-    readonly image?: string;
-    readonly children?: ReactNode;
-  }
-
-  export default function Seo(props: Props): JSX.Element;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx
index f10c59b1910e..a05afdf43fe8 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogArchivePage/index.tsx
@@ -10,6 +10,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import type {ArchiveBlogPost, Props} from '@theme/BlogArchivePage';
 import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
 
 type YearProp = {
   year: string;
@@ -75,14 +76,17 @@ export default function BlogArchive({archive}: Props): JSX.Element {
   });
   const years = listPostsByYears(archive.blogPosts);
   return (
-    <Layout title={title} description={description}>
-      <header className="hero hero--primary">
-        <div className="container">
-          <h1 className="hero__title">{title}</h1>
-          <p className="hero__subtitle">{description}</p>
-        </div>
-      </header>
-      <main>{years.length > 0 && <YearsSection years={years} />}</main>
-    </Layout>
+    <>
+      <PageMetadata title={title} description={description} />
+      <Layout>
+        <header className="hero hero--primary">
+          <div className="container">
+            <h1 className="hero__title">{title}</h1>
+            <p className="hero__subtitle">{description}</p>
+          </div>
+        </header>
+        <main>{years.length > 0 && <YearsSection years={years} />}</main>
+      </Layout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
index 088d6e67f169..2b99bbb2a21f 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
@@ -12,9 +12,33 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import type {Props} from '@theme/BlogListPage';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import SearchMetadata from '@theme/SearchMetadata';
 
-export default function BlogListPage(props: Props): JSX.Element {
+function BlogListPageMetadata(props: Props): JSX.Element {
+  const {metadata} = props;
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {blogDescription, blogTitle, permalink} = metadata;
+  const isBlogOnlyMode = permalink === '/';
+  const title = isBlogOnlyMode ? siteTitle : blogTitle;
+  return (
+    <>
+      <PageMetadata
+        title={title}
+        description={blogDescription}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogListPage,
+        ]}
+      />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+
+function BlogListPageContent(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {
     siteConfig: {title: siteTitle},
@@ -24,27 +48,38 @@ export default function BlogListPage(props: Props): JSX.Element {
   const title = isBlogOnlyMode ? siteTitle : blogTitle;
 
   return (
-    <BlogLayout
-      title={title}
-      description={blogDescription}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_posts_list',
-      }}
-      sidebar={sidebar}>
-      {items.map(({content: BlogPostContent}) => (
-        <BlogPostItem
-          key={BlogPostContent.metadata.permalink}
-          frontMatter={BlogPostContent.frontMatter}
-          assets={BlogPostContent.assets}
-          metadata={BlogPostContent.metadata}
-          truncated={BlogPostContent.metadata.truncated}>
-          <BlogPostContent />
-        </BlogPostItem>
-      ))}
-      <BlogListPaginator metadata={metadata} />
-    </BlogLayout>
+    <>
+      <PageMetadata
+        title={title}
+        description={blogDescription}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogListPage,
+        ]}
+      />
+      <SearchMetadata tag="blog_posts_list" />
+      <BlogLayout sidebar={sidebar}>
+        {items.map(({content: BlogPostContent}) => (
+          <BlogPostItem
+            key={BlogPostContent.metadata.permalink}
+            frontMatter={BlogPostContent.frontMatter}
+            assets={BlogPostContent.assets}
+            metadata={BlogPostContent.metadata}
+            truncated={BlogPostContent.metadata.truncated}>
+            <BlogPostContent />
+          </BlogPostItem>
+        ))}
+        <BlogListPaginator metadata={metadata} />
+      </BlogLayout>
+    </>
+  );
+}
+
+export default function BlogListPage(props: Props): JSX.Element {
+  return (
+    <>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
index 84918a3019ff..00468239e8d8 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -6,40 +6,62 @@
  */
 
 import React from 'react';
-import Seo from '@theme/Seo';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
 
-export default function BlogPostPage(props: Props): JSX.Element {
+function BlogPostPageMetadata(props: Props): JSX.Element {
+  const {content: BlogPostContents} = props;
+  const {assets, metadata} = BlogPostContents;
+  const {title, description, date, tags, authors, frontMatter} = metadata;
+  const {keywords} = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      title={title}
+      description={description}
+      keywords={keywords}
+      image={image}
+      htmlClassNames={[
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogPostPage,
+      ]}>
+      <meta property="og:type" content="article" />
+      <meta property="article:published_time" content={date} />
+      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
+      {authors.some((author) => author.url) && (
+        <meta
+          property="article:author"
+          content={authors
+            .map((author) => author.url)
+            .filter(Boolean)
+            .join(',')}
+        />
+      )}
+      {tags.length > 0 && (
+        <meta
+          property="article:tag"
+          content={tags.map((tag) => tag.label).join(',')}
+        />
+      )}
+    </PageMetadata>
+  );
+}
+
+function BlogPostPageContent(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
   const {assets, metadata} = BlogPostContents;
-  const {
-    title,
-    description,
-    nextItem,
-    prevItem,
-    date,
-    tags,
-    authors,
-    frontMatter,
-  } = metadata;
+  const {nextItem, prevItem, frontMatter} = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
-    keywords,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-
-  const image = assets.image ?? frontMatter.image;
-
   return (
     <BlogLayout
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogPostPage}
       sidebar={sidebar}
       toc={
         !hideTableOfContents &&
@@ -52,35 +74,6 @@ export default function BlogPostPage(props: Props): JSX.Element {
           />
         ) : undefined
       }>
-      <Seo
-        // TODO refactor needed: it's a bit annoying but Seo MUST be inside
-        // BlogLayout, otherwise default image (set by BlogLayout) would shadow
-        // the custom blog post image
-        title={title}
-        description={description}
-        keywords={keywords}
-        image={image}>
-        <meta property="og:type" content="article" />
-        <meta property="article:published_time" content={date} />
-
-        {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
-        {authors.some((author) => author.url) && (
-          <meta
-            property="article:author"
-            content={authors
-              .map((author) => author.url)
-              .filter(Boolean)
-              .join(',')}
-          />
-        )}
-        {tags.length > 0 && (
-          <meta
-            property="article:tag"
-            content={tags.map((tag) => tag.label).join(',')}
-          />
-        )}
-      </Seo>
-
       <BlogPostItem
         frontMatter={frontMatter}
         assets={assets}
@@ -95,3 +88,12 @@ export default function BlogPostPage(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
+
+export default function BlogPostPage(props: Props): JSX.Element {
+  return (
+    <>
+      <BlogPostPageMetadata {...props} />
+      <BlogPostPageContent {...props} />
+    </>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
index 9b354c1f71d7..80805fda6857 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
@@ -11,25 +11,29 @@ import BlogLayout from '@theme/BlogLayout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
 import {
+  PageMetadata,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
+import SearchMetadata from '../SearchMetadata';
 
 export default function BlogTagsListPage(props: Props): JSX.Element {
   const {tags, sidebar} = props;
   const title = translateTagsPageTitle();
   return (
-    <BlogLayout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogTagsListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_tags_list',
-      }}
-      sidebar={sidebar}>
-      <h1>{title}</h1>
-      <TagsListByLetter tags={Object.values(tags)} />
-    </BlogLayout>
+    <>
+      <PageMetadata
+        title={title}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogTagsListPage,
+        ]}
+      />
+      <SearchMetadata tag="blog_tags_list" />
+      <BlogLayout sidebar={sidebar}>
+        <h1>{title}</h1>
+        <TagsListByLetter tags={Object.values(tags)} />
+      </BlogLayout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
index 6791d74f9df8..3f1f52a796c0 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
@@ -12,8 +12,13 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogTagsPostsPage';
 import Translate, {translate} from '@docusaurus/Translate';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  ThemeClassNames,
+  usePluralForm,
+} from '@docusaurus/theme-common';
 import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
 
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {
@@ -47,38 +52,40 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
   );
 
   return (
-    <BlogLayout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogTagPostListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_tags_posts',
-      }}
-      sidebar={sidebar}>
-      <header className="margin-bottom--xl">
-        <h1>{title}</h1>
+    <>
+      <PageMetadata
+        title={title}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogTagPostListPage,
+        ]}
+      />
+      <SearchMetadata tag="blog_tags_posts" />
+      <BlogLayout sidebar={sidebar}>
+        <header className="margin-bottom--xl">
+          <h1>{title}</h1>
 
-        <Link href={allTagsPath}>
-          <Translate
-            id="theme.tags.tagsPageLink"
-            description="The label of the link targeting the tag list page">
-            View All Tags
-          </Translate>
-        </Link>
-      </header>
+          <Link href={allTagsPath}>
+            <Translate
+              id="theme.tags.tagsPageLink"
+              description="The label of the link targeting the tag list page">
+              View All Tags
+            </Translate>
+          </Link>
+        </header>
 
-      {items.map(({content: BlogPostContent}) => (
-        <BlogPostItem
-          key={BlogPostContent.metadata.permalink}
-          frontMatter={BlogPostContent.frontMatter}
-          assets={BlogPostContent.assets}
-          metadata={BlogPostContent.metadata}
-          truncated>
-          <BlogPostContent />
-        </BlogPostItem>
-      ))}
-      <BlogListPaginator metadata={listMetadata} />
-    </BlogLayout>
+        {items.map(({content: BlogPostContent}) => (
+          <BlogPostItem
+            key={BlogPostContent.metadata.permalink}
+            frontMatter={BlogPostContent.frontMatter}
+            assets={BlogPostContent.assets}
+            metadata={BlogPostContent.metadata}
+            truncated>
+            <BlogPostContent />
+          </BlogPostItem>
+        ))}
+        <BlogListPaginator metadata={listMetadata} />
+      </BlogLayout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
index 0d6f3e5ffe7d..179839ac09cc 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
@@ -6,11 +6,13 @@
  */
 
 import React from 'react';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  useCurrentSidebarCategory,
+} from '@docusaurus/theme-common';
 import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
 import DocCardList from '@theme/DocCardList';
 import DocPaginator from '@theme/DocPaginator';
-import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
@@ -19,13 +21,27 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
 
-export default function DocCategoryGeneratedIndexPage({
+function DocCategoryGeneratedIndexPageMetadata({
+  categoryGeneratedIndex,
+}: Props): JSX.Element {
+  return (
+    <PageMetadata
+      title={categoryGeneratedIndex.title}
+      description={categoryGeneratedIndex.description}
+      keywords={categoryGeneratedIndex.keywords}
+      // TODO `require` this?
+      image={useBaseUrl(categoryGeneratedIndex.image)}
+    />
+  );
+}
+
+function DocCategoryGeneratedIndexPageContent({
   categoryGeneratedIndex,
 }: Props): JSX.Element {
   const category = useCurrentSidebarCategory();
   return (
     <>
-      <Seo
+      <PageMetadata
         title={categoryGeneratedIndex.title}
         description={categoryGeneratedIndex.description}
         keywords={categoryGeneratedIndex.keywords}
@@ -57,3 +73,14 @@ export default function DocCategoryGeneratedIndexPage({
     </>
   );
 }
+
+export default function DocCategoryGeneratedIndexPage(
+  props: Props,
+): JSX.Element {
+  return (
+    <>
+      <DocCategoryGeneratedIndexPageMetadata {...props} />
+      <DocCategoryGeneratedIndexPageContent {...props} />
+    </>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index bfea8f72f60c..12d96c544e27 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -10,29 +10,40 @@ import clsx from 'clsx';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import Seo from '@theme/Seo';
 import type {Props} from '@theme/DocItem';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
 
-export default function DocItem(props: Props): JSX.Element {
+function DocItemMetadata(props: Props): JSX.Element {
   const {content: DocContent} = props;
   const {metadata, frontMatter, assets} = DocContent;
+  const {keywords} = frontMatter;
+  const {description, title} = metadata;
+  const image = assets.image ?? frontMatter.image;
+
+  return <PageMetadata {...{title, description, keywords, image}} />;
+}
+
+function DocItemContent(props: Props): JSX.Element {
+  const {content: DocContent} = props;
+  const {metadata, frontMatter} = DocContent;
   const {
-    keywords,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-  const {description, title} = metadata;
-  const image = assets.image ?? frontMatter.image;
+  const {title} = metadata;
 
   // We only add a title if:
   // - user asks to hide it with front matter
@@ -49,64 +60,68 @@ export default function DocItem(props: Props): JSX.Element {
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
 
   return (
-    <>
-      <Seo {...{title, description, keywords, image}} />
-
-      <div className="row">
-        <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
-          <DocVersionBanner />
-          <div className={styles.docItemContainer}>
-            <article>
-              <DocBreadcrumbs />
-              <DocVersionBadge />
+    <div className="row">
+      <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
 
-              {canRenderTOC && (
-                <TOCCollapsible
-                  toc={DocContent.toc}
-                  minHeadingLevel={tocMinHeadingLevel}
-                  maxHeadingLevel={tocMaxHeadingLevel}
-                  className={clsx(
-                    ThemeClassNames.docs.docTocMobile,
-                    styles.tocMobile,
-                  )}
-                />
-              )}
+            {canRenderTOC && (
+              <TOCCollapsible
+                toc={DocContent.toc}
+                minHeadingLevel={tocMinHeadingLevel}
+                maxHeadingLevel={tocMaxHeadingLevel}
+                className={clsx(
+                  ThemeClassNames.docs.docTocMobile,
+                  styles.tocMobile,
+                )}
+              />
+            )}
 
-              <div
-                className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-                {/*
+            <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+              {/*
                 Title can be declared inside md content or declared through
                 front matter and added manually. To make both cases consistent,
                 the added title is added under the same div.markdown block
                 See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
                 */}
-                {shouldAddTitle && (
-                  <header>
-                    <Heading as="h1">{title}</Heading>
-                  </header>
-                )}
-                <MDXContent>
-                  <DocContent />
-                </MDXContent>
-              </div>
+              {shouldAddTitle && (
+                <header>
+                  <Heading as="h1">{title}</Heading>
+                </header>
+              )}
+              <MDXContent>
+                <DocContent />
+              </MDXContent>
+            </div>
 
-              <DocItemFooter {...props} />
-            </article>
+            <DocItemFooter {...props} />
+          </article>
 
-            <DocPaginator previous={metadata.previous} next={metadata.next} />
-          </div>
+          <DocPaginator previous={metadata.previous} next={metadata.next} />
         </div>
-        {renderTocDesktop && (
-          <div className="col col--3">
-            <TOC
-              toc={DocContent.toc}
-              minHeadingLevel={tocMinHeadingLevel}
-              maxHeadingLevel={tocMaxHeadingLevel}
-              className={ThemeClassNames.docs.docTocDesktop}
-            />
-          </div>
-        )}
       </div>
+      {renderTocDesktop && (
+        <div className="col col--3">
+          <TOC
+            toc={DocContent.toc}
+            minHeadingLevel={tocMinHeadingLevel}
+            maxHeadingLevel={tocMaxHeadingLevel}
+            className={ThemeClassNames.docs.docTocDesktop}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function DocItem(props: Props): JSX.Element {
+  return (
+    <>
+      <DocItemMetadata {...props} />
+      <DocItemContent {...props} />
     </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index b2d2ebbe3251..eee491da5fd5 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -21,6 +21,7 @@ import {translate} from '@docusaurus/Translate';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import {
+  PageMetadata,
   ThemeClassNames,
   docVersionSearchTag,
   DocsSidebarProvider,
@@ -28,6 +29,7 @@ import {
   DocsVersionProvider,
 } from '@docusaurus/theme-common';
 import Head from '@docusaurus/Head';
+import SearchMetadata from '@theme/SearchMetadata';
 
 type DocPageContentProps = {
   readonly currentDocRoute: DocumentRoute;
@@ -55,87 +57,95 @@ function DocPageContent({
   }, [hiddenSidebar]);
 
   return (
-    <Layout
-      wrapperClassName={ThemeClassNames.wrapper.docsPages}
-      pageClassName={ThemeClassNames.page.docsDocPage}
-      searchMetadata={{
-        version,
-        tag: docVersionSearchTag(pluginId, version),
-      }}>
-      <div className={styles.docPage}>
-        <BackToTopButton />
+    <>
+      <PageMetadata
+        htmlClassNames={[
+          ThemeClassNames.wrapper.docsPages,
+          ThemeClassNames.page.docsDocPage,
+        ]}
+      />
+      <SearchMetadata
+        version={version}
+        tag={docVersionSearchTag(pluginId, version)}
+      />
+      <Layout>
+        <div className={styles.docPage}>
+          <BackToTopButton />
 
-        {sidebar && (
-          <aside
-            className={clsx(
-              ThemeClassNames.docs.docSidebarContainer,
-              styles.docSidebarContainer,
-              hiddenSidebarContainer && styles.docSidebarContainerHidden,
-            )}
-            onTransitionEnd={(e) => {
-              if (
-                !e.currentTarget.classList.contains(styles.docSidebarContainer!)
-              ) {
-                return;
-              }
+          {sidebar && (
+            <aside
+              className={clsx(
+                ThemeClassNames.docs.docSidebarContainer,
+                styles.docSidebarContainer,
+                hiddenSidebarContainer && styles.docSidebarContainerHidden,
+              )}
+              onTransitionEnd={(e) => {
+                if (
+                  !e.currentTarget.classList.contains(
+                    styles.docSidebarContainer!,
+                  )
+                ) {
+                  return;
+                }
 
-              if (hiddenSidebarContainer) {
-                setHiddenSidebar(true);
-              }
-            }}>
-            <DocSidebar
-              key={
-                // Reset sidebar state on sidebar changes
-                // See https://github.com/facebook/docusaurus/issues/3414
-                sidebarName
-              }
-              sidebar={sidebar}
-              path={currentDocRoute.path}
-              onCollapse={toggleSidebar}
-              isHidden={hiddenSidebar}
-            />
+                if (hiddenSidebarContainer) {
+                  setHiddenSidebar(true);
+                }
+              }}>
+              <DocSidebar
+                key={
+                  // Reset sidebar state on sidebar changes
+                  // See https://github.com/facebook/docusaurus/issues/3414
+                  sidebarName
+                }
+                sidebar={sidebar}
+                path={currentDocRoute.path}
+                onCollapse={toggleSidebar}
+                isHidden={hiddenSidebar}
+              />
 
-            {hiddenSidebar && (
-              <div
-                className={styles.collapsedDocSidebar}
-                title={translate({
-                  id: 'theme.docs.sidebar.expandButtonTitle',
-                  message: 'Expand sidebar',
-                  description:
-                    'The ARIA label and title attribute for expand button of doc sidebar',
-                })}
-                aria-label={translate({
-                  id: 'theme.docs.sidebar.expandButtonAriaLabel',
-                  message: 'Expand sidebar',
-                  description:
-                    'The ARIA label and title attribute for expand button of doc sidebar',
-                })}
-                tabIndex={0}
-                role="button"
-                onKeyDown={toggleSidebar}
-                onClick={toggleSidebar}>
-                <IconArrow className={styles.expandSidebarButtonIcon} />
-              </div>
-            )}
-          </aside>
-        )}
-        <main
-          className={clsx(
-            styles.docMainContainer,
-            (hiddenSidebarContainer || !sidebar) &&
-              styles.docMainContainerEnhanced,
-          )}>
-          <div
+              {hiddenSidebar && (
+                <div
+                  className={styles.collapsedDocSidebar}
+                  title={translate({
+                    id: 'theme.docs.sidebar.expandButtonTitle',
+                    message: 'Expand sidebar',
+                    description:
+                      'The ARIA label and title attribute for expand button of doc sidebar',
+                  })}
+                  aria-label={translate({
+                    id: 'theme.docs.sidebar.expandButtonAriaLabel',
+                    message: 'Expand sidebar',
+                    description:
+                      'The ARIA label and title attribute for expand button of doc sidebar',
+                  })}
+                  tabIndex={0}
+                  role="button"
+                  onKeyDown={toggleSidebar}
+                  onClick={toggleSidebar}>
+                  <IconArrow className={styles.expandSidebarButtonIcon} />
+                </div>
+              )}
+            </aside>
+          )}
+          <main
             className={clsx(
-              'container padding-top--md padding-bottom--lg',
-              styles.docItemWrapper,
-              hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+              styles.docMainContainer,
+              (hiddenSidebarContainer || !sidebar) &&
+                styles.docMainContainerEnhanced,
             )}>
-            {children}
-          </div>
-        </main>
-      </div>
-    </Layout>
+            <div
+              className={clsx(
+                'container padding-top--md padding-bottom--lg',
+                styles.docItemWrapper,
+                hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+              )}>
+              {children}
+            </div>
+          </main>
+        </div>
+      </Layout>
+    </>
   );
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
index 23025464b636..9396a714527c 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
@@ -9,10 +9,15 @@ import React from 'react';
 
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  ThemeClassNames,
+  usePluralForm,
+} from '@docusaurus/theme-common';
 import type {PropTagDocListDoc} from '@docusaurus/plugin-content-docs';
 import Translate, {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/DocTagDocListPage';
+import SearchMetadata from '@theme/SearchMetadata';
 
 // Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {
@@ -55,35 +60,38 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
   );
 
   return (
-    <Layout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.docsPages}
-      pageClassName={ThemeClassNames.page.docsTagDocListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'doc_tag_doc_list',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <main className="col col--8 col--offset-2">
-            <header className="margin-bottom--xl">
-              <h1>{title}</h1>
-              <Link href={tag.allTagsPath}>
-                <Translate
-                  id="theme.tags.tagsPageLink"
-                  description="The label of the link targeting the tag list page">
-                  View All Tags
-                </Translate>
-              </Link>
-            </header>
-            <section className="margin-vert--lg">
-              {tag.docs.map((doc) => (
-                <DocItem key={doc.id} doc={doc} />
-              ))}
-            </section>
-          </main>
+    <>
+      <PageMetadata
+        title={title}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.docsPages,
+          ThemeClassNames.page.docsTagDocListPage,
+        ]}
+      />
+      <SearchMetadata tag="doc_tag_doc_list" />
+      <Layout>
+        <div className="container margin-vert--lg">
+          <div className="row">
+            <main className="col col--8 col--offset-2">
+              <header className="margin-bottom--xl">
+                <h1>{title}</h1>
+                <Link href={tag.allTagsPath}>
+                  <Translate
+                    id="theme.tags.tagsPageLink"
+                    description="The label of the link targeting the tag list page">
+                    View All Tags
+                  </Translate>
+                </Link>
+              </header>
+              <section className="margin-vert--lg">
+                {tag.docs.map((doc) => (
+                  <DocItem key={doc.id} doc={doc} />
+                ))}
+              </section>
+            </main>
+          </div>
         </div>
-      </div>
-    </Layout>
+      </Layout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
index 9443de0841f1..7235075fb1eb 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
@@ -9,31 +9,36 @@ import React from 'react';
 
 import Layout from '@theme/Layout';
 import {
+  PageMetadata,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/DocTagsListPage';
+import SearchMetadata from '@theme/SearchMetadata';
 
 export default function DocTagsListPage({tags}: Props): JSX.Element {
   const title = translateTagsPageTitle();
   return (
-    <Layout
-      title={title}
-      wrapperClassName={ThemeClassNames.wrapper.docsPages}
-      pageClassName={ThemeClassNames.page.docsTagsListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'doc_tags_list',
-      }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <main className="col col--8 col--offset-2">
-            <h1>{title}</h1>
-            <TagsListByLetter tags={tags} />
-          </main>
+    <>
+      <PageMetadata
+        title={title}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.docsPages,
+          ThemeClassNames.page.docsTagsListPage,
+        ]}
+      />
+      <SearchMetadata tag="doc_tags_list" />
+      <Layout>
+        <div className="container margin-vert--lg">
+          <div className="row">
+            <main className="col col--8 col--offset-2">
+              <h1>{title}</h1>
+              <TagsListByLetter tags={tags} />
+            </main>
+          </div>
         </div>
-      </div>
-    </Layout>
+      </Layout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index ce56fe8d01ec..840f8919bc09 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -13,33 +13,25 @@ import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
-import LayoutHead from '@theme/LayoutHead';
 import type {Props} from '@theme/Layout';
 import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 
 export default function Layout(props: Props): JSX.Element {
-  const {children, noFooter, wrapperClassName, pageClassName} = props;
+  const {children, noFooter} = props;
 
   useKeyboardNavigation();
 
   return (
     <LayoutProviders>
-      <LayoutHead {...props} />
-
       <SkipToContent />
 
       <AnnouncementBar />
 
       <Navbar />
 
-      <div
-        className={clsx(
-          ThemeClassNames.wrapper.main,
-          wrapperClassName,
-          pageClassName,
-        )}>
+      <div className={clsx(ThemeClassNames.wrapper.main)}>
         <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
       </div>
 
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index 7a1876a5f61a..cef3c78dff24 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
@@ -11,43 +11,48 @@ import Layout from '@theme/Layout';
 import MDXContent from '@theme/MDXContent';
 import type {Props} from '@theme/MDXPage';
 import TOC from '@theme/TOC';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
 export default function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {
-    metadata: {title, description, permalink, frontMatter},
+    metadata: {title, description, frontMatter},
   } = MDXPageContent;
   const {wrapperClassName, hide_table_of_contents: hideTableOfContents} =
     frontMatter;
 
   return (
-    <Layout
-      title={title}
-      description={description}
-      permalink={permalink}
-      wrapperClassName={wrapperClassName ?? ThemeClassNames.wrapper.mdxPages}
-      pageClassName={ThemeClassNames.page.mdxPage}>
-      <main className="container container--fluid margin-vert--lg">
-        <div className={clsx('row', styles.mdxPageWrapper)}>
-          <div className={clsx('col', !hideTableOfContents && 'col--8')}>
-            <MDXContent>
-              <MDXPageContent />
-            </MDXContent>
-          </div>
-          {!hideTableOfContents && MDXPageContent.toc && (
-            <div className="col col--2">
-              <TOC
-                toc={MDXPageContent.toc}
-                minHeadingLevel={frontMatter.toc_min_heading_level}
-                maxHeadingLevel={frontMatter.toc_max_heading_level}
-              />
+    <>
+      <PageMetadata
+        title={title}
+        description={description}
+        htmlClassNames={[
+          wrapperClassName ?? ThemeClassNames.wrapper.mdxPages,
+          ThemeClassNames.page.mdxPage,
+        ]}
+      />
+      <Layout>
+        <main className="container container--fluid margin-vert--lg">
+          <div className={clsx('row', styles.mdxPageWrapper)}>
+            <div className={clsx('col', !hideTableOfContents && 'col--8')}>
+              <MDXContent>
+                <MDXPageContent />
+              </MDXContent>
             </div>
-          )}
-        </div>
-      </main>
-    </Layout>
+            {!hideTableOfContents && MDXPageContent.toc && (
+              <div className="col col--2">
+                <TOC
+                  toc={MDXPageContent.toc}
+                  minHeadingLevel={frontMatter.toc_min_heading_level}
+                  maxHeadingLevel={frontMatter.toc_max_heading_level}
+                />
+              </div>
+            )}
+          </div>
+        </main>
+      </Layout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/NotFound.tsx b/packages/docusaurus-theme-classic/src/theme/NotFound.tsx
index 6d4b7a0706af..2213158d52a6 100644
--- a/packages/docusaurus-theme-classic/src/theme/NotFound.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NotFound.tsx
@@ -8,42 +8,47 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import Translate, {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
 
 export default function NotFound(): JSX.Element {
   return (
-    <Layout
-      title={translate({
-        id: 'theme.NotFound.title',
-        message: 'Page Not Found',
-      })}>
-      <main className="container margin-vert--xl">
-        <div className="row">
-          <div className="col col--6 col--offset-3">
-            <h1 className="hero__title">
-              <Translate
-                id="theme.NotFound.title"
-                description="The title of the 404 page">
-                Page Not Found
-              </Translate>
-            </h1>
-            <p>
-              <Translate
-                id="theme.NotFound.p1"
-                description="The first paragraph of the 404 page">
-                We could not find what you were looking for.
-              </Translate>
-            </p>
-            <p>
-              <Translate
-                id="theme.NotFound.p2"
-                description="The 2nd paragraph of the 404 page">
-                Please contact the owner of the site that linked you to the
-                original URL and let them know their link is broken.
-              </Translate>
-            </p>
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout>
+        <main className="container margin-vert--xl">
+          <div className="row">
+            <div className="col col--6 col--offset-3">
+              <h1 className="hero__title">
+                <Translate
+                  id="theme.NotFound.title"
+                  description="The title of the 404 page">
+                  Page Not Found
+                </Translate>
+              </h1>
+              <p>
+                <Translate
+                  id="theme.NotFound.p1"
+                  description="The first paragraph of the 404 page">
+                  We could not find what you were looking for.
+                </Translate>
+              </p>
+              <p>
+                <Translate
+                  id="theme.NotFound.p2"
+                  description="The 2nd paragraph of the 404 page">
+                  Please contact the owner of the site that linked you to the
+                  original URL and let them know their link is broken.
+                </Translate>
+              </p>
+            </div>
           </div>
-        </div>
-      </main>
-    </Layout>
+        </main>
+      </Layout>
+    </>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
similarity index 76%
rename from packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
rename to packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
index a3f5204ce535..e21668aa90f2 100644
--- a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
@@ -9,19 +9,18 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import type {Props} from '@theme/Layout';
 import SearchMetadata from '@theme/SearchMetadata';
-import Seo from '@theme/Seo';
 import {
+  PageMetadata,
   DEFAULT_SEARCH_TAG,
-  useTitleFormatter,
   useAlternatePageUtils,
   useThemeConfig,
   keyboardFocusedClassName,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
 
-// Useful for SEO
+// TODO move to SiteMetadataDefaults or theme-common ?
+// Useful for i18n/SEO
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
 // See https://github.com/facebook/docusaurus/issues/3317
 function AlternateLangHeaders(): JSX.Element {
@@ -66,6 +65,7 @@ function useDefaultCanonicalUrl() {
   return siteUrl + useBaseUrl(pathname);
 }
 
+// TODO move to SiteMetadataDefaults or theme-common ?
 function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
   const {
     siteConfig: {url: siteUrl},
@@ -83,45 +83,31 @@ function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
   );
 }
 
-export default function LayoutHead(props: Props): JSX.Element {
+export default function SiteMetadata(): JSX.Element {
   const {
-    siteConfig: {favicon},
-    i18n: {currentLocale, localeConfigs},
+    i18n: {currentLocale},
   } = useDocusaurusContext();
+
+  // TODO maybe move these 2 themeConfig to siteConfig?
+  // These seems useful for other themes as well
   const {metadata, image: defaultImage} = useThemeConfig();
-  const {title, description, image, keywords, searchMetadata} = props;
-  const faviconUrl = useBaseUrl(favicon);
-  const pageTitle = useTitleFormatter(title);
-  const {htmlLang, direction: htmlDir} = localeConfigs[currentLocale]!;
 
   return (
     <>
       <Head>
-        <html lang={htmlLang} dir={htmlDir} />
-        {favicon && <link rel="icon" href={faviconUrl} />}
-        <title>{pageTitle}</title>
-        <meta property="og:title" content={pageTitle} />
         <meta name="twitter:card" content="summary_large_image" />
         {/* The keyboard focus class name need to be applied when SSR so links
         are outlined when JS is disabled */}
         <body className={keyboardFocusedClassName} />
       </Head>
 
-      {/* image can override the default image */}
-      {defaultImage && <Seo image={defaultImage} />}
-      {image && <Seo image={image} />}
-
-      <Seo description={description} keywords={keywords} />
+      {defaultImage && <PageMetadata image={defaultImage} />}
 
       <CanonicalUrlHeaders />
 
       <AlternateLangHeaders />
 
-      <SearchMetadata
-        tag={DEFAULT_SEARCH_TAG}
-        locale={currentLocale}
-        {...searchMetadata}
-      />
+      <SearchMetadata tag={DEFAULT_SEARCH_TAG} locale={currentLocale} />
 
       <Head
       // it's important to have an additional <Head> element here,
diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
index 50de4ea881f6..6d0618d95ccf 100644
--- a/packages/docusaurus-theme-common/src/index.ts
+++ b/packages/docusaurus-theme-common/src/index.ts
@@ -136,6 +136,8 @@ export {
   TabGroupChoiceProvider,
 } from './utils/tabGroupChoiceUtils';
 
+export {PageMetadata} from './utils/metadataUtils';
+
 export {default as useHideableNavbar} from './hooks/useHideableNavbar';
 export {
   default as useKeyboardNavigation,
diff --git a/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
similarity index 67%
rename from packages/docusaurus-theme-classic/src/theme/Seo/index.tsx
rename to packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
index 6acdbe086465..0f8dbafb509f 100644
--- a/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx
+++ b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
@@ -5,20 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Head from '@docusaurus/Head';
-import {useTitleFormatter} from '@docusaurus/theme-common';
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 
-import type {Props} from '@theme/Seo';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import {useTitleFormatter} from './generalUtils';
+
+interface PageMetadataProps {
+  readonly title?: string;
+  readonly description?: string;
+  readonly keywords?: readonly string[] | string;
+  readonly image?: string;
+  readonly htmlClassNames?: string[];
+  readonly children?: ReactNode;
+}
 
-export default function Seo({
+// Helper component to manipulate page metadata and override site defaults
+export function PageMetadata({
   title,
   description,
   keywords,
   image,
+  htmlClassNames,
   children,
-}: Props): JSX.Element {
+}: PageMetadataProps): JSX.Element {
   const pageTitle = useTitleFormatter(title);
   const {withBaseUrl} = useBaseUrlUtils();
   const pageImage = image ? withBaseUrl(image, {absolute: true}) : undefined;
@@ -43,6 +53,8 @@ export default function Seo({
       {pageImage && <meta property="og:image" content={pageImage} />}
       {pageImage && <meta name="twitter:image" content={pageImage} />}
 
+      {htmlClassNames && <html className={htmlClassNames.join(' ')} />}
+
       {children}
     </Head>
   );
diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
index 9378463a20dd..6d434b2c6161 100644
--- a/packages/docusaurus/src/client/App.tsx
+++ b/packages/docusaurus/src/client/App.tsx
@@ -13,7 +13,9 @@ import {BrowserContextProvider} from './exports/browserContext';
 import {DocusaurusContextProvider} from './exports/docusaurusContext';
 import PendingNavigation from './PendingNavigation';
 import BaseUrlIssueBanner from './baseUrlIssueBanner/BaseUrlIssueBanner';
+import SiteMetadataDefaults from './SiteMetadataDefaults';
 import Root from '@theme/Root';
+import SiteMetadata from '@theme/SiteMetadata';
 
 import './client-lifecycles-dispatcher';
 
@@ -27,6 +29,8 @@ export default function App(): JSX.Element {
       <DocusaurusContextProvider>
         <BrowserContextProvider>
           <Root>
+            <SiteMetadataDefaults />
+            <SiteMetadata />
             <BaseUrlIssueBanner />
             <PendingNavigation routes={routes} delay={1000}>
               {renderRoutes(routes)}
diff --git a/packages/docusaurus/src/client/SiteMetadataDefaults.tsx b/packages/docusaurus/src/client/SiteMetadataDefaults.tsx
new file mode 100644
index 000000000000..bd2f953aab3e
--- /dev/null
+++ b/packages/docusaurus/src/client/SiteMetadataDefaults.tsx
@@ -0,0 +1,27 @@
+/**
+ * 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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function SiteMetadataDefaults(): JSX.Element {
+  const {
+    siteConfig: {favicon, tagline, title},
+    i18n: {currentLocale, localeConfigs},
+  } = useDocusaurusContext();
+  const faviconUrl = useBaseUrl(favicon);
+  const {htmlLang, direction: htmlDir} = localeConfigs[currentLocale]!;
+
+  return (
+    <Head defaultTitle={`${title}${tagline ? ` · ${tagline}` : ''}`}>
+      <html lang={htmlLang} dir={htmlDir} />
+      {favicon && <link rel="icon" href={faviconUrl} />}
+    </Head>
+  );
+}
diff --git a/packages/docusaurus/src/client/theme-fallback/Error/index.tsx b/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
index 858e42c4de37..de8ded15b7df 100644
--- a/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Error/index.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import type {Props} from '@theme/Error';
+import Head from '@docusaurus/Head';
 
 function ErrorDisplay({error, tryAgain}: Props): JSX.Element {
   return (
@@ -40,7 +41,10 @@ export default function Error({error, tryAgain}: Props): JSX.Element {
       // Note: we display the original error here, not the error that we
       // captured in this extra error boundary
       fallback={() => <ErrorDisplay error={error} tryAgain={tryAgain} />}>
-      <Layout title="Page Error">
+      <Head>
+        <title>Page Error</title>
+      </Head>
+      <Layout>
         <ErrorDisplay error={error} tryAgain={tryAgain} />
       </Layout>
     </ErrorBoundary>
diff --git a/packages/docusaurus/src/client/theme-fallback/Layout/index.tsx b/packages/docusaurus/src/client/theme-fallback/Layout/index.tsx
index 1c3de03a6053..e897396623b4 100644
--- a/packages/docusaurus/src/client/theme-fallback/Layout/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Layout/index.tsx
@@ -6,31 +6,8 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/Head';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import type {Props} from '@theme/Layout';
 
-export default function Layout({
-  children,
-  title,
-  description,
-}: Props): JSX.Element {
-  const context = useDocusaurusContext();
-  const {siteConfig} = context;
-  const {favicon, tagline, title: defaultTitle} = siteConfig;
-  const faviconUrl = useBaseUrl(favicon);
-  return (
-    <>
-      <Head defaultTitle={`${defaultTitle}${tagline ? ` · ${tagline}` : ''}`}>
-        {title && <title>{`${title} · ${tagline}`}</title>}
-        {favicon && <link rel="icon" href={faviconUrl} />}
-        {description && <meta name="description" content={description} />}
-        {description && (
-          <meta property="og:description" content={description} />
-        )}
-      </Head>
-      {children}
-    </>
-  );
+export default function Layout({children}: Props): JSX.Element {
+  return <>{children}</>;
 }
diff --git a/packages/docusaurus/src/client/theme-fallback/NotFound/index.tsx b/packages/docusaurus/src/client/theme-fallback/NotFound/index.tsx
index 48e11300f7bb..15ccfaefe6ab 100644
--- a/packages/docusaurus/src/client/theme-fallback/NotFound/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/NotFound/index.tsx
@@ -7,20 +7,26 @@
 
 import React from 'react';
 import Layout from '@theme/Layout';
+import Head from '@docusaurus/Head';
 
 export default function NotFound(): JSX.Element {
   return (
-    <Layout title="Page Not Found">
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '50vh',
-          fontSize: '20px',
-        }}>
-        <h1>Oops, page not found </h1>
-      </div>
-    </Layout>
+    <>
+      <Head>
+        <title>Page Not Found</title>
+      </Head>
+      <Layout>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '50vh',
+            fontSize: '20px',
+          }}>
+          <h1>Oops, page not found </h1>
+        </div>
+      </Layout>
+    </>
   );
 }
diff --git a/packages/docusaurus/src/client/theme-fallback/Root/index.tsx b/packages/docusaurus/src/client/theme-fallback/Root/index.tsx
index 0e09dc1f4294..27ef85e88a7f 100644
--- a/packages/docusaurus/src/client/theme-fallback/Root/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Root/index.tsx
@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React from 'react';
+import type {Props} from '@theme/Root';
 
 // Wrapper at the very top of the app, that is applied constantly
 // and does not depend on current route (unlike the layout)
@@ -14,6 +15,6 @@ import React, {type ReactNode} from 'react';
 // and these providers won't reset state when we navigate
 //
 // See https://github.com/facebook/docusaurus/issues/3919
-export default function Root({children}: {children: ReactNode}): JSX.Element {
+export default function Root({children}: Props): JSX.Element {
   return <>{children}</>;
 }
diff --git a/packages/docusaurus/src/client/theme-fallback/SiteMetadata/index.tsx b/packages/docusaurus/src/client/theme-fallback/SiteMetadata/index.tsx
new file mode 100644
index 000000000000..600acae8f23e
--- /dev/null
+++ b/packages/docusaurus/src/client/theme-fallback/SiteMetadata/index.tsx
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+// To be implemented by the theme with <Head>
+export default function SiteMetadata(): JSX.Element | null {
+  return null;
+}

From 18c3ab55fb4f812d6417e24b1fde1c624eae7b04 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Wed, 16 Mar 2022 19:58:25 +0100
Subject: [PATCH 02/14] fix search metas

---
 .../src/theme/SearchPage/index.tsx                 | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
index a9227bdff42d..c245bc8fbf00 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
@@ -17,6 +17,7 @@ import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import {
+  PageMetadata,
   useTitleFormatter,
   usePluralForm,
   isRegexpStringMatch,
@@ -149,7 +150,7 @@ type ResultDispatcher =
   | {type: 'update'; value: ResultDispatcherState}
   | {type: 'advance'; value?: undefined};
 
-export default function SearchPage(): JSX.Element {
+function SearchPageContent(): JSX.Element {
   const {
     siteConfig: {themeConfig},
     i18n: {currentLocale},
@@ -356,7 +357,7 @@ export default function SearchPage(): JSX.Element {
   }, [makeSearch, searchResultState.lastPage]);
 
   return (
-    <Layout wrapperClassName="search-page-wrapper">
+    <Layout>
       <Head>
         <title>{useTitleFormatter(getTitle())}</title>
         {/*
@@ -516,3 +517,12 @@ export default function SearchPage(): JSX.Element {
     </Layout>
   );
 }
+
+export default function SearchPage(): JSX.Element {
+  return (
+    <>
+      <PageMetadata htmlClassNames={['search-page-wrapper']} />
+      <SearchPageContent />
+    </>
+  );
+}

From de500a6f1041d116f43520894f4541514bd43eaa Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 17 Mar 2022 13:09:10 +0100
Subject: [PATCH 03/14] fix changelog page

---
 .../changelog/theme/ChangelogPage/index.tsx   | 145 ++++++++++--------
 1 file changed, 80 insertions(+), 65 deletions(-)

diff --git a/website/src/plugins/changelog/theme/ChangelogPage/index.tsx b/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
index 355bfaa58b6c..df6ec38c2176 100644
--- a/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
+++ b/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
@@ -6,96 +6,111 @@
  */
 
 import React from 'react';
-import Seo from '@theme/Seo';
 import BlogLayout from '@theme/BlogLayout';
 import ChangelogItem from '@theme/ChangelogItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
 import Link from '@docusaurus/Link';
 
-// This page doesn't change anything. It's just swapping BlogPostItem with our
-// own ChangelogItem. We don't want to apply the swizzled item to the actual
-// blog.
-export default function BlogPostPage(props: Props): JSX.Element {
+function ChangelogPageMetadata(props: Props): JSX.Element {
+  const {content: BlogPostContents} = props;
+  const {assets, metadata} = BlogPostContents;
+  const {title, description, date, tags, authors, frontMatter} = metadata;
+  const {keywords} = frontMatter;
+
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      title={title}
+      description={description}
+      keywords={keywords}
+      image={image}
+      htmlClassNames={[
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogPostPage,
+      ]}>
+      <meta property="og:type" content="article" />
+      <meta property="article:published_time" content={date} />
+
+      {authors.some((author) => author.url) && (
+        <meta
+          property="article:author"
+          content={authors
+            .map((author) => author.url)
+            .filter(Boolean)
+            .join(',')}
+        />
+      )}
+      {tags.length > 0 && (
+        <meta
+          property="article:tag"
+          content={tags.map((tag) => tag.label).join(',')}
+        />
+      )}
+    </PageMetadata>
+  );
+}
+
+function ChangelogPageContent(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
   const {assets, metadata} = BlogPostContents;
   const {
-    title,
-    description,
     nextItem,
     prevItem,
-    date,
-    tags,
-    authors,
     frontMatter,
     // @ts-expect-error: we injected this
     listPageLink,
   } = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
-    keywords,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
 
-  const image = assets.image ?? frontMatter.image;
-
   return (
-    <BlogLayout
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogPostPage}
-      sidebar={sidebar}
-      toc={
-        !hideTableOfContents &&
-        BlogPostContents.toc &&
-        BlogPostContents.toc.length > 0 ? (
-          <TOC
-            toc={BlogPostContents.toc}
-            minHeadingLevel={tocMinHeadingLevel}
-            maxHeadingLevel={tocMaxHeadingLevel}
-          />
-        ) : undefined
-      }>
-      <Seo
-        title={title}
-        description={description}
-        keywords={keywords}
-        image={image}>
-        <meta property="og:type" content="article" />
-        <meta property="article:published_time" content={date} />
+    <>
+      <PageMetadata />
+      <BlogLayout
+        sidebar={sidebar}
+        toc={
+          !hideTableOfContents &&
+          BlogPostContents.toc &&
+          BlogPostContents.toc.length > 0 ? (
+            <TOC
+              toc={BlogPostContents.toc}
+              minHeadingLevel={tocMinHeadingLevel}
+              maxHeadingLevel={tocMaxHeadingLevel}
+            />
+          ) : undefined
+        }>
+        <Link to={listPageLink}>← Back to index page</Link>
 
-        {authors.some((author) => author.url) && (
-          <meta
-            property="article:author"
-            content={authors
-              .map((author) => author.url)
-              .filter(Boolean)
-              .join(',')}
-          />
-        )}
-        {tags.length > 0 && (
-          <meta
-            property="article:tag"
-            content={tags.map((tag) => tag.label).join(',')}
-          />
-        )}
-      </Seo>
+        <ChangelogItem
+          frontMatter={frontMatter}
+          assets={assets}
+          metadata={metadata}
+          isBlogPostPage>
+          <BlogPostContents />
+        </ChangelogItem>
 
-      <Link to={listPageLink}>← Back to index page</Link>
-
-      <ChangelogItem
-        frontMatter={frontMatter}
-        assets={assets}
-        metadata={metadata}
-        isBlogPostPage>
-        <BlogPostContents />
-      </ChangelogItem>
+        {(nextItem || prevItem) && (
+          <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+        )}
+      </BlogLayout>
+    </>
+  );
+}
 
-      {(nextItem || prevItem) && (
-        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-      )}
-    </BlogLayout>
+// This page doesn't change anything. It's just swapping BlogPostItem with our
+// own ChangelogItem. We don't want to apply the swizzled item to the actual
+// blog.
+export default function ChangelogPage(props: Props): JSX.Element {
+  return (
+    <>
+      <ChangelogPageMetadata {...props} />
+      <ChangelogPageContent {...props} />
+    </>
   );
 }

From d0db0ff98db77e4c7e3942a995b56b63ccb73d48 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 17 Mar 2022 15:29:29 +0100
Subject: [PATCH 04/14] restore Layout title/description props as it's widely
 used and documented

---
 .../src/theme-classic.d.ts                    | 15 +-------
 .../src/theme/Layout/index.tsx                | 19 ++++++++--
 website/docs/guides/creating-pages.md         |  6 +--
 website/docs/seo.md                           | 37 ++++++++++++-------
 4 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index d7ff56231f44..489ff752da73 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -365,22 +365,11 @@ declare module '@theme/Layout' {
   export interface Props {
     readonly children?: ReactNode;
     readonly noFooter?: boolean;
+    readonly wrapperClassName?: string;
 
-    // TODO remove
-    /*
+    // Not really layout-related, but kept for convenience/retro-compatibility
     readonly title?: string;
     readonly description?: string;
-    readonly image?: string;
-    readonly keywords?: string | string[];
-    readonly permalink?: string;
-    readonly wrapperClassName?: string;
-    readonly pageClassName?: string;
-    readonly searchMetadata?: {
-      readonly version?: string;
-      readonly tag?: string;
-    };
-
-     */
   }
 
   export default function Layout(props: Props): JSX.Element;
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index 840f8919bc09..35592ef869f7 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -14,24 +14,37 @@ import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import type {Props} from '@theme/Layout';
-import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  ThemeClassNames,
+  useKeyboardNavigation,
+} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 
 export default function Layout(props: Props): JSX.Element {
-  const {children, noFooter} = props;
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    // not really layout-related, but kept for convenience/retro-compatibility
+    title,
+    description,
+  } = props;
 
   useKeyboardNavigation();
 
   return (
     <LayoutProviders>
+      <PageMetadata title={title} description={description} />
+
       <SkipToContent />
 
       <AnnouncementBar />
 
       <Navbar />
 
-      <div className={clsx(ThemeClassNames.wrapper.main)}>
+      <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
         <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
       </div>
 
diff --git a/website/docs/guides/creating-pages.md b/website/docs/guides/creating-pages.md
index bf4c277d4a15..160b4dbf1dec 100644
--- a/website/docs/guides/creating-pages.md
+++ b/website/docs/guides/creating-pages.md
@@ -35,9 +35,9 @@ Create a file `/src/pages/helloReact.js`:
 import React from 'react';
 import Layout from '@theme/Layout';
 
-function Hello() {
+export default function Hello() {
   return (
-    <Layout title="Hello">
+    <Layout title="Hello" description="Hello React Page">
       <div
         style={{
           display: 'flex',
@@ -53,8 +53,6 @@ function Hello() {
     </Layout>
   );
 }
-
-export default Hello;
 ```
 
 Once you save the file, the development server will automatically reload the changes. Now open `http://localhost:3000/helloReact` and you will see the new page you just created.
diff --git a/website/docs/seo.md b/website/docs/seo.md
index 111560af2801..3c61f7fae51b 100644
--- a/website/docs/seo.md
+++ b/website/docs/seo.md
@@ -42,8 +42,30 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
 Some content...
 ```
 
+Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
+
+```md
+---
+title: Title for search engines; can be different from the actual heading
+description: A short description of this page
+image: a thumbnail image to be shown in social media cards
+keywords: [keywords, describing, the main topics]
+---
+```
+
+When creating your React page, adding these fields in `Layout` would also improve SEO.
+
+:::tip
+
+Prefer to use front matter for fields like `description` and `keywords`: Docusaurus will automatically apply this to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `<head>` tag.
+
+:::
+
+For JSX pages, you can use the Docusaurus [`<Head>`](docusaurus-core.md#head) component.
+
 ```jsx title="my-react-page.jsx"
 import React from 'react';
+import Layout from '@theme/Layout';
 import Head from '@docusaurus/Head';
 
 export default function page() {
@@ -58,22 +80,9 @@ export default function page() {
 }
 ```
 
-Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
-
-```md
----
-title: Title for search engines; can be different from the actual heading
-description: A short description of this page
-image: a thumbnail image to be shown in social media cards
-keywords: [keywords, describing, the main topics]
----
-```
-
-When creating your React page, adding these fields in `Layout` would also improve SEO.
-
 :::tip
 
-Prefer to use front matter for fields like `description` and `keywords`: Docusaurus will automatically apply this to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `<head>` tag.
+For convenience, the default theme `<Layout>` component accept `title` and `description` as props.
 
 :::
 

From efd61754142cb4cd51d5cee1352e11ae8c9cd1da Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Thu, 17 Mar 2022 15:53:36 +0100
Subject: [PATCH 05/14] add SiteMetadata to client exports

---
 .../src/webpack/__tests__/__snapshots__/base.test.ts.snap       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap
index d0271d7c5b39..49888b4b528b 100644
--- a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap
+++ b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap
@@ -32,6 +32,7 @@ exports[`base webpack config creates webpack aliases 1`] = `
   "@theme-original/PluginThemeComponentEnhanced": "secondPluginThemeFolder/PluginThemeComponentEnhanced.js",
   "@theme-original/PluginThemeComponentOverriddenByUser": "pluginThemeFolder/PluginThemeComponentOverriddenByUser.js",
   "@theme-original/Root": "../../../../client/theme-fallback/Root/index.tsx",
+  "@theme-original/SiteMetadata": "../../../../client/theme-fallback/SiteMetadata/index.tsx",
   "@theme-original/subfolder/PluginThemeComponent2": "pluginThemeFolder/subfolder/PluginThemeComponent2.js",
   "@theme/Error": "../../../../client/theme-fallback/Error/index.tsx",
   "@theme/Layout": "../../../../client/theme-fallback/Layout/index.tsx",
@@ -41,6 +42,7 @@ exports[`base webpack config creates webpack aliases 1`] = `
   "@theme/PluginThemeComponentEnhanced": "src/theme/PluginThemeComponentEnhanced.js",
   "@theme/PluginThemeComponentOverriddenByUser": "src/theme/PluginThemeComponentOverriddenByUser.js",
   "@theme/Root": "../../../../client/theme-fallback/Root/index.tsx",
+  "@theme/SiteMetadata": "../../../../client/theme-fallback/SiteMetadata/index.tsx",
   "@theme/UserThemeComponent1": "src/theme/UserThemeComponent1.js",
   "@theme/subfolder/PluginThemeComponent2": "pluginThemeFolder/subfolder/PluginThemeComponent2.js",
   "@theme/subfolder/UserThemeComponent2": "src/theme/subfolder/UserThemeComponent2.js",

From 5a61898b043d3e72bd263209d35858c7383a69b0 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 16:39:36 +0100
Subject: [PATCH 06/14] fix ChangelogList

---
 .../changelog/theme/ChangelogList/index.tsx   | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/website/src/plugins/changelog/theme/ChangelogList/index.tsx b/website/src/plugins/changelog/theme/ChangelogList/index.tsx
index 1d16dda586ab..790c0d7c06a7 100644
--- a/website/src/plugins/changelog/theme/ChangelogList/index.tsx
+++ b/website/src/plugins/changelog/theme/ChangelogList/index.tsx
@@ -9,27 +9,37 @@ import React from 'react';
 import BlogLayout from '@theme/BlogLayout';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import type {Props} from '@theme/BlogListPage';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import ChangelogItem from '@theme/ChangelogItem';
 
 import styles from './styles.module.css';
+import SearchMetadata from '@theme/SearchMetadata';
 
-export default function ChangelogList(props: Props): JSX.Element {
+function ChangelogListMetadata(props: Props): JSX.Element {
+  const {metadata} = props;
+  const {blogTitle, blogDescription} = metadata;
+  return (
+    <>
+      <PageMetadata
+        title={blogTitle}
+        description={blogDescription}
+        htmlClassNames={[
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogListPage,
+        ]}
+      />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+
+function ChangelogListContent(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
-  const {blogDescription, blogTitle} = metadata;
+  const {blogTitle} = metadata;
 
   return (
-    <BlogLayout
-      title={blogTitle}
-      description={blogDescription}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={ThemeClassNames.page.blogListPage}
-      searchMetadata={{
-        // assign unique search tag to exclude this page from search results!
-        tag: 'blog_posts_list',
-      }}
-      sidebar={sidebar}>
+    <BlogLayout sidebar={sidebar}>
       <header className="margin-bottom--lg">
         <h1 style={{fontSize: '3rem'}}>{blogTitle}</h1>
         <p>
@@ -88,3 +98,12 @@ export default function ChangelogList(props: Props): JSX.Element {
     </BlogLayout>
   );
 }
+
+export default function ChangelogList(props: Props): JSX.Element {
+  return (
+    <>
+      <ChangelogListMetadata {...props} />
+      <ChangelogListContent {...props} />
+    </>
+  );
+}

From 3053362d678b8aabf4c4b32007d786afd830d0e1 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 16:42:45 +0100
Subject: [PATCH 07/14] fix TS interface mismatch

---
 packages/docusaurus-module-type-aliases/src/index.d.ts   | 2 +-
 packages/docusaurus-theme-classic/src/theme-classic.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts
index 3145d8022087..d8d8b53f4273 100644
--- a/packages/docusaurus-module-type-aliases/src/index.d.ts
+++ b/packages/docusaurus-module-type-aliases/src/index.d.ts
@@ -91,7 +91,7 @@ declare module '@theme/Layout' {
   import type {ReactNode} from 'react';
 
   export interface Props {
-    readonly children: ReactNode;
+    readonly children?: ReactNode;
   }
   export default function Layout(props: Props): JSX.Element;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 05b831ee48ec..dffa79e8d3e8 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -466,7 +466,7 @@ declare module '@theme/Navbar/Content' {
 
 declare module '@theme/Navbar/Layout' {
   export interface Props {
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
   }
 
   export default function NavbarLayout(props: Props): JSX.Element;

From c01e0190be75b5da6d1cec18827a811fc3b6b0c1 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 16:47:22 +0100
Subject: [PATCH 08/14] merge metadataUtils

---
 packages/docusaurus-theme-common/src/index.ts |  4 +-
 .../src/utils/metadataUtils.tsx               | 48 +++++++++++++++-
 .../src/utils/metadataUtilsTemp.tsx           | 56 -------------------
 3 files changed, 49 insertions(+), 59 deletions(-)
 delete mode 100644 packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx

diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
index 15cbf9438d61..b479c3089a07 100644
--- a/packages/docusaurus-theme-common/src/index.ts
+++ b/packages/docusaurus-theme-common/src/index.ts
@@ -129,10 +129,10 @@ export {isRegexpStringMatch} from './utils/regexpUtils';
 export {useHomePageRoute} from './utils/routesUtils';
 
 export {
+  PageMetadata,
   HtmlClassNameProvider,
   PluginHtmlClassNameProvider,
-} from './utils/metadataUtilsTemp';
-export {PageMetadata} from './utils/metadataUtils';
+} from './utils/metadataUtils';
 
 export {
   useColorMode,
diff --git a/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
index 0f8dbafb509f..1fca1ed77e0b 100644
--- a/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
@@ -7,7 +7,8 @@
 
 import React, {type ReactNode} from 'react';
 import Head from '@docusaurus/Head';
-
+import clsx from 'clsx';
+import useRouteContext from '@docusaurus/useRouteContext';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import {useTitleFormatter} from './generalUtils';
 
@@ -59,3 +60,48 @@ export function PageMetadata({
     </Head>
   );
 }
+
+const HtmlClassNameContext = React.createContext<string | undefined>(undefined);
+
+// This wrapper is necessary because Helmet does not "merge" classes
+// See https://github.com/staylor/react-helmet-async/issues/161
+export function HtmlClassNameProvider({
+  className: classNameProp,
+  children,
+}: {
+  className: string;
+  children: ReactNode;
+}): JSX.Element {
+  const classNameContext = React.useContext(HtmlClassNameContext);
+  const className = clsx(classNameContext, classNameProp);
+  return (
+    <HtmlClassNameContext.Provider value={className}>
+      <Head>
+        <html className={className} />
+      </Head>
+      {children}
+    </HtmlClassNameContext.Provider>
+  );
+}
+
+function pluginNameToClassName(pluginName: string) {
+  return `plugin-${pluginName.replace(
+    /docusaurus-(?:plugin|theme)-(?:content-)?/gi,
+    '',
+  )}`;
+}
+
+export function PluginHtmlClassNameProvider({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  const routeContext = useRouteContext();
+  const nameClass = pluginNameToClassName(routeContext.plugin.name);
+  const idClass = `plugin-id-${routeContext.plugin.id}`;
+  return (
+    <HtmlClassNameProvider className={clsx(nameClass, idClass)}>
+      {children}
+    </HtmlClassNameProvider>
+  );
+}
diff --git a/packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx b/packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx
deleted file mode 100644
index f55899063b53..000000000000
--- a/packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * 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, {type ReactNode} from 'react';
-import Head from '@docusaurus/Head';
-import clsx from 'clsx';
-import useRouteContext from '@docusaurus/useRouteContext';
-
-const HtmlClassNameContext = React.createContext<string | undefined>(undefined);
-
-// This wrapper is necessary because Helmet does not "merge" classes
-// See https://github.com/staylor/react-helmet-async/issues/161
-export function HtmlClassNameProvider({
-  className: classNameProp,
-  children,
-}: {
-  className: string;
-  children: ReactNode;
-}): JSX.Element {
-  const classNameContext = React.useContext(HtmlClassNameContext);
-  const className = clsx(classNameContext, classNameProp);
-  return (
-    <HtmlClassNameContext.Provider value={className}>
-      <Head>
-        <html className={className} />
-      </Head>
-      {children}
-    </HtmlClassNameContext.Provider>
-  );
-}
-
-function pluginNameToClassName(pluginName: string) {
-  return `plugin-${pluginName.replace(
-    /docusaurus-(?:plugin|theme)-(?:content-)?/gi,
-    '',
-  )}`;
-}
-
-export function PluginHtmlClassNameProvider({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element {
-  const routeContext = useRouteContext();
-  const nameClass = pluginNameToClassName(routeContext.plugin.name);
-  const idClass = `plugin-id-${routeContext.plugin.id}`;
-  return (
-    <HtmlClassNameProvider className={clsx(nameClass, idClass)}>
-      {children}
-    </HtmlClassNameProvider>
-  );
-}

From 2d590a03b53663b82970973919cf43a78519e373 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 16:59:14 +0100
Subject: [PATCH 09/14] make everything use HtmlClassNameProvider

---
 .../src/theme/BlogListPage/index.tsx          | 68 +++++++------------
 .../src/theme/BlogPostPage/index.tsx          | 21 +++---
 .../src/theme/BlogTagsListPage/index.tsx      | 18 ++---
 .../src/theme/BlogTagsPostsPage/index.tsx     | 18 ++---
 .../src/theme/DocPage/index.tsx               | 14 ++--
 .../src/theme/DocTagDocListPage/index.tsx     | 18 ++---
 .../src/theme/DocTagsListPage/index.tsx       | 18 ++---
 .../src/theme/MDXPage/index.tsx               | 23 ++++---
 .../src/utils/metadataUtils.tsx               |  4 --
 9 files changed, 93 insertions(+), 109 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
index 2b99bbb2a21f..910328b214ce 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx
@@ -12,8 +12,13 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import type {Props} from '@theme/BlogListPage';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 
 function BlogListPageMetadata(props: Props): JSX.Element {
   const {metadata} = props;
@@ -25,14 +30,7 @@ function BlogListPageMetadata(props: Props): JSX.Element {
   const title = isBlogOnlyMode ? siteTitle : blogTitle;
   return (
     <>
-      <PageMetadata
-        title={title}
-        description={blogDescription}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.blogPages,
-          ThemeClassNames.page.blogListPage,
-        ]}
-      />
+      <PageMetadata title={title} description={blogDescription} />
       <SearchMetadata tag="blog_posts_list" />
     </>
   );
@@ -40,46 +38,32 @@ function BlogListPageMetadata(props: Props): JSX.Element {
 
 function BlogListPageContent(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
-  const {
-    siteConfig: {title: siteTitle},
-  } = useDocusaurusContext();
-  const {blogDescription, blogTitle, permalink} = metadata;
-  const isBlogOnlyMode = permalink === '/';
-  const title = isBlogOnlyMode ? siteTitle : blogTitle;
-
   return (
-    <>
-      <PageMetadata
-        title={title}
-        description={blogDescription}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.blogPages,
-          ThemeClassNames.page.blogListPage,
-        ]}
-      />
-      <SearchMetadata tag="blog_posts_list" />
-      <BlogLayout sidebar={sidebar}>
-        {items.map(({content: BlogPostContent}) => (
-          <BlogPostItem
-            key={BlogPostContent.metadata.permalink}
-            frontMatter={BlogPostContent.frontMatter}
-            assets={BlogPostContent.assets}
-            metadata={BlogPostContent.metadata}
-            truncated={BlogPostContent.metadata.truncated}>
-            <BlogPostContent />
-          </BlogPostItem>
-        ))}
-        <BlogListPaginator metadata={metadata} />
-      </BlogLayout>
-    </>
+    <BlogLayout sidebar={sidebar}>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostItem
+          key={BlogPostContent.metadata.permalink}
+          frontMatter={BlogPostContent.frontMatter}
+          assets={BlogPostContent.assets}
+          metadata={BlogPostContent.metadata}
+          truncated={BlogPostContent.metadata.truncated}>
+          <BlogPostContent />
+        </BlogPostItem>
+      ))}
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
   );
 }
 
 export default function BlogListPage(props: Props): JSX.Element {
   return (
-    <>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
       <BlogListPageMetadata {...props} />
       <BlogListPageContent {...props} />
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
index 00468239e8d8..c7b9ec88e5d3 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -10,8 +10,13 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
+import clsx from 'clsx';
 
 function BlogPostPageMetadata(props: Props): JSX.Element {
   const {content: BlogPostContents} = props;
@@ -24,11 +29,7 @@ function BlogPostPageMetadata(props: Props): JSX.Element {
       title={title}
       description={description}
       keywords={keywords}
-      image={image}
-      htmlClassNames={[
-        ThemeClassNames.wrapper.blogPages,
-        ThemeClassNames.page.blogPostPage,
-      ]}>
+      image={image}>
       <meta property="og:type" content="article" />
       <meta property="article:published_time" content={date} />
       {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
@@ -91,9 +92,13 @@ function BlogPostPageContent(props: Props): JSX.Element {
 
 export default function BlogPostPage(props: Props): JSX.Element {
   return (
-    <>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogPostPage,
+      )}>
       <BlogPostPageMetadata {...props} />
       <BlogPostPageContent {...props} />
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
index 80805fda6857..1124e06aaa37 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
@@ -12,28 +12,28 @@ import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
 import {
   PageMetadata,
+  HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
 import SearchMetadata from '../SearchMetadata';
+import clsx from 'clsx';
 
 export default function BlogTagsListPage(props: Props): JSX.Element {
   const {tags, sidebar} = props;
   const title = translateTagsPageTitle();
   return (
-    <>
-      <PageMetadata
-        title={title}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.blogPages,
-          ThemeClassNames.page.blogTagsListPage,
-        ]}
-      />
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagsListPage,
+      )}>
+      <PageMetadata title={title} />
       <SearchMetadata tag="blog_tags_list" />
       <BlogLayout sidebar={sidebar}>
         <h1>{title}</h1>
         <TagsListByLetter tags={Object.values(tags)} />
       </BlogLayout>
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
index 3f1f52a796c0..fa3bf26a2437 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
@@ -14,11 +14,13 @@ import type {Props} from '@theme/BlogTagsPostsPage';
 import Translate, {translate} from '@docusaurus/Translate';
 import {
   PageMetadata,
+  HtmlClassNameProvider,
   ThemeClassNames,
   usePluralForm,
 } from '@docusaurus/theme-common';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {
@@ -52,14 +54,12 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
   );
 
   return (
-    <>
-      <PageMetadata
-        title={title}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.blogPages,
-          ThemeClassNames.page.blogTagPostListPage,
-        ]}
-      />
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagPostListPage,
+      )}>
+      <PageMetadata title={title} />
       <SearchMetadata tag="blog_tags_posts" />
       <BlogLayout sidebar={sidebar}>
         <header className="margin-bottom--xl">
@@ -86,6 +86,6 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
         ))}
         <BlogListPaginator metadata={listMetadata} />
       </BlogLayout>
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index b745765d688d..d75ffa55a5fe 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -22,7 +22,6 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 
 import {
-  PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
   docVersionSearchTag,
@@ -59,12 +58,6 @@ function DocPageContent({
 
   return (
     <>
-      <PageMetadata
-        htmlClassNames={[
-          ThemeClassNames.wrapper.docsPages,
-          ThemeClassNames.page.docsDocPage,
-        ]}
-      />
       <SearchMetadata
         version={version}
         tag={docVersionSearchTag(pluginId, version)}
@@ -171,7 +164,12 @@ export default function DocPage(props: Props): JSX.Element {
     : null;
 
   return (
-    <HtmlClassNameProvider className={versionMetadata.className}>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.docsPages,
+        ThemeClassNames.page.docsDocPage,
+        versionMetadata.className,
+      )}>
       <DocsVersionProvider version={versionMetadata}>
         <DocsSidebarProvider sidebar={sidebar ?? null}>
           <DocPageContent
diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
index 9396a714527c..512eabc4a892 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
@@ -11,6 +11,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import {
   PageMetadata,
+  HtmlClassNameProvider,
   ThemeClassNames,
   usePluralForm,
 } from '@docusaurus/theme-common';
@@ -18,6 +19,7 @@ import type {PropTagDocListDoc} from '@docusaurus/plugin-content-docs';
 import Translate, {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/DocTagDocListPage';
 import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 
 // Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {
@@ -60,14 +62,12 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
   );
 
   return (
-    <>
-      <PageMetadata
-        title={title}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.docsPages,
-          ThemeClassNames.page.docsTagDocListPage,
-        ]}
-      />
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.docsPages,
+        ThemeClassNames.page.docsTagDocListPage,
+      )}>
+      <PageMetadata title={title} />
       <SearchMetadata tag="doc_tag_doc_list" />
       <Layout>
         <div className="container margin-vert--lg">
@@ -92,6 +92,6 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
           </div>
         </div>
       </Layout>
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
index 7235075fb1eb..5ab4f5a44db9 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagsListPage/index.tsx
@@ -10,24 +10,24 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import {
   PageMetadata,
+  HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/DocTagsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 
 export default function DocTagsListPage({tags}: Props): JSX.Element {
   const title = translateTagsPageTitle();
   return (
-    <>
-      <PageMetadata
-        title={title}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.docsPages,
-          ThemeClassNames.page.docsTagsListPage,
-        ]}
-      />
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.docsPages,
+        ThemeClassNames.page.docsTagsListPage,
+      )}>
+      <PageMetadata title={title} />
       <SearchMetadata tag="doc_tags_list" />
       <Layout>
         <div className="container margin-vert--lg">
@@ -39,6 +39,6 @@ export default function DocTagsListPage({tags}: Props): JSX.Element {
           </div>
         </div>
       </Layout>
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index cef3c78dff24..44ba2a5c0ffa 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
@@ -11,7 +11,11 @@ import Layout from '@theme/Layout';
 import MDXContent from '@theme/MDXContent';
 import type {Props} from '@theme/MDXPage';
 import TOC from '@theme/TOC';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
@@ -24,15 +28,12 @@ export default function MDXPage(props: Props): JSX.Element {
     frontMatter;
 
   return (
-    <>
-      <PageMetadata
-        title={title}
-        description={description}
-        htmlClassNames={[
-          wrapperClassName ?? ThemeClassNames.wrapper.mdxPages,
-          ThemeClassNames.page.mdxPage,
-        ]}
-      />
+    <HtmlClassNameProvider
+      className={clsx(
+        wrapperClassName ?? ThemeClassNames.wrapper.mdxPages,
+        ThemeClassNames.page.mdxPage,
+      )}>
+      <PageMetadata title={title} description={description} />
       <Layout>
         <main className="container container--fluid margin-vert--lg">
           <div className={clsx('row', styles.mdxPageWrapper)}>
@@ -53,6 +54,6 @@ export default function MDXPage(props: Props): JSX.Element {
           </div>
         </main>
       </Layout>
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
index 1fca1ed77e0b..9de31637150e 100644
--- a/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
@@ -17,7 +17,6 @@ interface PageMetadataProps {
   readonly description?: string;
   readonly keywords?: readonly string[] | string;
   readonly image?: string;
-  readonly htmlClassNames?: string[];
   readonly children?: ReactNode;
 }
 
@@ -27,7 +26,6 @@ export function PageMetadata({
   description,
   keywords,
   image,
-  htmlClassNames,
   children,
 }: PageMetadataProps): JSX.Element {
   const pageTitle = useTitleFormatter(title);
@@ -54,8 +52,6 @@ export function PageMetadata({
       {pageImage && <meta property="og:image" content={pageImage} />}
       {pageImage && <meta name="twitter:image" content={pageImage} />}
 
-      {htmlClassNames && <html className={htmlClassNames.join(' ')} />}
-
       {children}
     </Head>
   );

From 72b37417bd728bf4ebf429a731a45cbf4445b730 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 17:08:53 +0100
Subject: [PATCH 10/14] fix SearchPage

---
 .../src/theme/SearchPage/index.tsx                         | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
index c245bc8fbf00..8ce17fa12a75 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
@@ -17,7 +17,7 @@ import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import {
-  PageMetadata,
+  HtmlClassNameProvider,
   useTitleFormatter,
   usePluralForm,
   isRegexpStringMatch,
@@ -520,9 +520,8 @@ function SearchPageContent(): JSX.Element {
 
 export default function SearchPage(): JSX.Element {
   return (
-    <>
-      <PageMetadata htmlClassNames={['search-page-wrapper']} />
+    <HtmlClassNameProvider className="search-page-wrapper">
       <SearchPageContent />
-    </>
+    </HtmlClassNameProvider>
   );
 }

From 0ebd31587d1b4f5c7272d3db5bb96e9e4cf20d22 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 17:22:18 +0100
Subject: [PATCH 11/14] fix Changelog pages

---
 .../changelog/theme/ChangelogList/index.tsx   | 24 ++++++++++---------
 .../changelog/theme/ChangelogPage/index.tsx   | 21 +++++++++-------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/website/src/plugins/changelog/theme/ChangelogList/index.tsx b/website/src/plugins/changelog/theme/ChangelogList/index.tsx
index 790c0d7c06a7..f05400ab5756 100644
--- a/website/src/plugins/changelog/theme/ChangelogList/index.tsx
+++ b/website/src/plugins/changelog/theme/ChangelogList/index.tsx
@@ -9,26 +9,24 @@ import React from 'react';
 import BlogLayout from '@theme/BlogLayout';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import type {Props} from '@theme/BlogListPage';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import ChangelogItem from '@theme/ChangelogItem';
 
 import styles from './styles.module.css';
 import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 
 function ChangelogListMetadata(props: Props): JSX.Element {
   const {metadata} = props;
   const {blogTitle, blogDescription} = metadata;
   return (
     <>
-      <PageMetadata
-        title={blogTitle}
-        description={blogDescription}
-        htmlClassNames={[
-          ThemeClassNames.wrapper.blogPages,
-          ThemeClassNames.page.blogListPage,
-        ]}
-      />
+      <PageMetadata title={blogTitle} description={blogDescription} />
       <SearchMetadata tag="blog_posts_list" />
     </>
   );
@@ -101,9 +99,13 @@ function ChangelogListContent(props: Props): JSX.Element {
 
 export default function ChangelogList(props: Props): JSX.Element {
   return (
-    <>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
       <ChangelogListMetadata {...props} />
       <ChangelogListContent {...props} />
-    </>
+    </HtmlClassNameProvider>
   );
 }
diff --git a/website/src/plugins/changelog/theme/ChangelogPage/index.tsx b/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
index df6ec38c2176..186b4aac7c26 100644
--- a/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
+++ b/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
@@ -10,9 +10,14 @@ import BlogLayout from '@theme/BlogLayout';
 import ChangelogItem from '@theme/ChangelogItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
 import Link from '@docusaurus/Link';
+import clsx from 'clsx';
 
 function ChangelogPageMetadata(props: Props): JSX.Element {
   const {content: BlogPostContents} = props;
@@ -26,11 +31,7 @@ function ChangelogPageMetadata(props: Props): JSX.Element {
       title={title}
       description={description}
       keywords={keywords}
-      image={image}
-      htmlClassNames={[
-        ThemeClassNames.wrapper.blogPages,
-        ThemeClassNames.page.blogPostPage,
-      ]}>
+      image={image}>
       <meta property="og:type" content="article" />
       <meta property="article:published_time" content={date} />
 
@@ -108,9 +109,13 @@ function ChangelogPageContent(props: Props): JSX.Element {
 // blog.
 export default function ChangelogPage(props: Props): JSX.Element {
   return (
-    <>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogPostPage,
+      )}>
       <ChangelogPageMetadata {...props} />
       <ChangelogPageContent {...props} />
-    </>
+    </HtmlClassNameProvider>
   );
 }

From 64d0ce4144ad18efedc3ffa3f4aecc566451f5c1 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 18:20:59 +0100
Subject: [PATCH 12/14] funny typo

---
 packages/docusaurus/src/client/exports/ComponentCreator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docusaurus/src/client/exports/ComponentCreator.tsx b/packages/docusaurus/src/client/exports/ComponentCreator.tsx
index da50d1b3cfbe..80d2f585c66a 100644
--- a/packages/docusaurus/src/client/exports/ComponentCreator.tsx
+++ b/packages/docusaurus/src/client/exports/ComponentCreator.tsx
@@ -103,7 +103,7 @@ export default function ComponentCreator(
       // Is there any way to put this RouteContextProvider upper in the tree?
       return (
         <RouteContextProvider value={routeContextModule}>
-          <Component {...loadedModules} {...props} />;
+          <Component {...loadedModules} {...props} />
         </RouteContextProvider>
       );
     },

From 98044742292d897b4238cccb1e4ae9d239ccc832 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 18:30:43 +0100
Subject: [PATCH 13/14] remove useless global selector

---
 .../src/theme/DocPage/styles.module.css                       | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
index 120a537b10a3..8b3e52ce13e5 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
@@ -10,10 +10,6 @@
   --doc-sidebar-hidden-width: 30px;
 }
 
-:global(.docs-wrapper) {
-  display: flex;
-}
-
 .docPage,
 .docMainContainer {
   display: flex;

From 8d047404bd2660dd48931c48ffb4e73aecabd48d Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 18 Mar 2022 18:37:04 +0100
Subject: [PATCH 14/14] Add some dogfooding

---
 website/_dogfooding/dogfooding.css | 22 ++++++++++++++++++++++
 website/docusaurus.config.js       |  5 ++++-
 website/src/css/custom.css         |  4 ----
 3 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 website/_dogfooding/dogfooding.css

diff --git a/website/_dogfooding/dogfooding.css b/website/_dogfooding/dogfooding.css
new file mode 100644
index 000000000000..be6cf970b6f9
--- /dev/null
+++ b/website/_dogfooding/dogfooding.css
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+html.plugin-docs.plugin-id-docs-tests .red > a {
+  color: red;
+}
+
+html.plugin-docs.plugin-id-docs-tests .navbar {
+  border-bottom: solid thin cyan;
+}
+
+html.plugin-blog.plugin-id-blog-tests .navbar {
+  border-bottom: solid thin lime;
+}
+
+html.plugin-pages.plugin-id-pages-tests .navbar {
+  border-bottom: solid thin yellow;
+}
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 7d029dbe2082..495072183f96 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -320,7 +320,10 @@ const config = {
           remarkPlugins: [npm2yarn],
         },
         theme: {
-          customCss: [require.resolve('./src/css/custom.css')],
+          customCss: [
+            require.resolve('./src/css/custom.css'),
+            require.resolve('./_dogfooding/dogfooding.css'),
+          ],
         },
         gtag: !isDeployPreview
           ? {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 8c774d3fb16b..728c5d628a99 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -166,10 +166,6 @@ div[class^='announcementBar_'] {
   font-weight: bold;
 }
 
-.red > a {
-  color: red;
-}
-
 .screen-reader-only {
   border: 0;
   clip: rect(0 0 0 0);