feat(v2): default canonical urls (#4109)

facebook · Jan 28, 2021 · beddecb · beddecb
1 parent 6917eb9
commit beddecb
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
@@ -16,6 +16,7 @@ import {
   useTitleFormatter,
   useAlternatePageUtils,
 } from '@docusaurus/theme-common';
+import {useLocation} from '@docusaurus/router';
 
 // Useful for SEO
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
@@ -42,6 +43,32 @@ function AlternateLangHeaders(): JSX.Element {
   );
 }
 
+// Default canonical url inferred from current page location pathname
+function useDefaultCanonicalUrl() {
+  const {
+    siteConfig: {url: siteUrl},
+  } = useDocusaurusContext();
+  const {pathname} = useLocation();
+  return siteUrl + useBaseUrl(pathname);
+}
+
+function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
+  const {
+    siteConfig: {url: siteUrl},
+  } = useDocusaurusContext();
+  const defaultCanonicalUrl = useDefaultCanonicalUrl();
+
+  const canonicalUrl = permalink
+    ? `${siteUrl}${permalink}`
+    : defaultCanonicalUrl;
+  return (
+    <Head>
+      <meta property="og:url" content={canonicalUrl} />
+      <link rel="canonical" href={canonicalUrl} />
+    </Head>
+  );
+}
+
 export default function LayoutHead(props: Props): JSX.Element {
   const {
     siteConfig,
@@ -50,16 +77,8 @@ export default function LayoutHead(props: Props): JSX.Element {
   const {
     favicon,
     themeConfig: {image: defaultImage, metadatas},
-    url: siteUrl,
   } = siteConfig;
-  const {
-    title,
-    description,
-    image,
-    keywords,
-    permalink,
-    searchMetadatas,
-  } = props;
+  const {title, description, image, keywords, searchMetadatas} = props;
   const metaTitle = useTitleFormatter(title);
   const metaImage = image || defaultImage;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
@@ -91,11 +110,11 @@ export default function LayoutHead(props: Props): JSX.Element {
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
         )}
-        {permalink && <meta property="og:url" content={siteUrl + permalink} />}
-        {permalink && <link rel="canonical" href={siteUrl + permalink} />}
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
 
+      <CanonicalUrlHeaders />
+
       <AlternateLangHeaders />
 
       <SearchMetadatas

diff --git a/website/src/pages/feedback/index.js b/website/src/pages/feedback/index.js
@@ -25,10 +25,7 @@ function Feedback() {
   }, []);
 
   return (
-    <Layout
-      permalink="/feedback"
-      title="Feedback"
-      description="Docusaurus 2 Feedback page">
+    <Layout title="Feedback" description="Docusaurus 2 Feedback page">
       <main
         className={clsx(
           'container',

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -82,10 +82,7 @@ function Home() {
   const context = useDocusaurusContext();
   const {siteConfig: {customFields = {}, tagline} = {}} = context;
   return (
-    <Layout
-      permalink="/"
-      title={tagline}
-      description={customFields.description}>
+    <Layout title={tagline} description={customFields.description}>
       <main>
         <div className={styles.hero}>
           <div className={styles.heroInner}>

diff --git a/website/src/pages/versions.js b/website/src/pages/versions.js
@@ -26,7 +26,6 @@ function Version() {
   return (
     <Layout
       title="Versions"
-      permalink="/versions"
       description="Docusaurus 2 Versions page listing all documented site versions">
       <main className="container margin-vert--lg">
         <h1>Docusaurus documentation versions</h1>