Merge pull request #12259 from ethereum/hreflang

SEO: add hreflangs

Author: nhsz

src/components/PageMetadata.tsx

@@ -1,12 +1,11 @@
-import { join } from "path"
-
 import Head from "next/head"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
+import { filterRealLocales } from "@/lib/utils/translations"
+import { getFullUrl } from "@/lib/utils/url"
 import { getOgImage } from "@/lib/utils/metadata"
-
-import { DEFAULT_LOCALE, SITE_URL } from "@/lib/constants"
+import { SITE_URL } from "@/lib/constants"
 
 type NameMeta = {
   name: string
@@ -35,9 +34,11 @@ const PageMetadata = ({
   canonicalUrl,
   author,
 }: PageMetadataProps) => {
-  const { locale, asPath } = useRouter()
+  const { locale, locales: rawLocales, asPath } = useRouter()
   const { t } = useTranslation()
 
+  const locales = filterRealLocales(rawLocales)
+
   const desc = description || t("site-description")
   const siteTitle = t("site-title")
   const fullTitle = `${title} | ${siteTitle}`
@@ -47,7 +48,7 @@ const PageMetadata = ({
   const slug = path.split("/")
 
   // Set canonical URL w/ language path to avoid duplicate content
-  const url = new URL(join(locale!, path), SITE_URL).href
+  const url = getFullUrl(locale, path)
   const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */
@@ -83,6 +84,14 @@ const PageMetadata = ({
         />
       ))}
       <link rel="canonical" key={canonical} href={canonical} />
+      {locales.map((loc) => (
+        <link
+          key={loc}
+          rel="alternate"
+          hrefLang={loc}
+          href={getFullUrl(loc, path)}
+        />
+      ))}
     </Head>
   )
 }

src/lib/utils/url.ts

@@ -1,6 +1,11 @@
-import path from "path"
+import { join } from "path"
 
-import { DISCORD_PATH, MAIN_CONTENT_ID } from "@/lib/constants"
+import {
+  DEFAULT_LOCALE,
+  DISCORD_PATH,
+  MAIN_CONTENT_ID,
+  SITE_URL,
+} from "@/lib/constants"
 
 export const isDiscordInvite = (href: string): boolean =>
   href.includes(DISCORD_PATH) && !href.includes("http")
@@ -31,7 +36,10 @@ export const isHrefActive = (
 
 export const isHash = (href: string): boolean => href.startsWith("#")
 
+export const getFullUrl = (locale: string | undefined, path: string) =>
+  addSlashes(new URL(join(locale || DEFAULT_LOCALE, path), SITE_URL).href)
+
 export const addSlashes = (href: string): string => {
   if (isExternal(href)) return href
-  return path.join("/", href, "/")
+  return join("/", href, "/")
 }