fix: move og:locale code to classic theme instead of defaults

facebook · Jul 28, 2023 · f4de5a6 · f4de5a6
1 parent 4716be0
commit f4de5a6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
@@ -24,10 +24,18 @@ import SearchMetadata from '@theme/SearchMetadata';
 // See https://github.com/facebook/docusaurus/issues/3317
 function AlternateLangHeaders(): JSX.Element {
   const {
-    i18n: {defaultLocale, localeConfigs},
+    i18n: {currentLocale, defaultLocale, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
 
+  const currentHtmlLang = localeConfigs[currentLocale]?.htmlLang;
+
+  // HTML lang is a BCP 47 tag, but the Open Graph protocol requires
+  // using underscores instead of dashes.
+  // See https://ogp.me/#optional
+  // See https://en.wikipedia.org/wiki/IETF_language_tag)
+  const bcp47ToLocale = (code: string): string => code.replace('-', '_');
+
   // Note: it is fine to use both "x-default" and "en" to target the same url
   // See https://www.searchviu.com/en/multiple-hreflang-tags-one-url/
   return (
@@ -51,6 +59,19 @@ function AlternateLangHeaders(): JSX.Element {
         })}
         hrefLang="x-default"
       />
+
+      {currentHtmlLang && (
+        <meta property="og:locale" content={bcp47ToLocale(currentHtmlLang)} />
+      )}
+      {Object.values(localeConfigs)
+        .filter((config) => currentHtmlLang !== config.htmlLang)
+        .map((config) => (
+          <meta
+            key={`meta-og-${config.htmlLang}`}
+            property="og:locale:alternate"
+            content={bcp47ToLocale(config.htmlLang)}
+          />
+        ))}
     </Head>
   );
 }

diff --git a/packages/docusaurus/src/client/SiteMetadataDefaults.tsx b/packages/docusaurus/src/client/SiteMetadataDefaults.tsx
@@ -28,18 +28,6 @@ export default function SiteMetadataDefaults(): JSX.Element {
       */}
       <html lang={htmlLang} dir={htmlDir} />
       <title>{title}</title>
-      <meta property="og:locale" content={htmlLang.replace('-', '_')} />
-      {Object.values(localeConfigs).map((config) =>
-        htmlLang !== config.htmlLang ? (
-          <meta
-            key={`meta-og-${config.htmlLang}`}
-            property="og:locale:alternate"
-            content={config.htmlLang.replace('-', '_')}
-          />
-        ) : (
-          ''
-        ),
-      )}
       <meta property="og:title" content={title} />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       {noIndex && <meta name="robots" content="noindex, nofollow" />}