fix hreflang tags to only include translated locales

Author: pettinarip

src/lib/md/metadata.ts

@@ -1,4 +1,5 @@
 import { getMetadata } from "../utils/metadata"
+import { getTranslatedLocales } from "../utils/translatedLocales"
 
 import { compile } from "./compile"
 import { importMd } from "./import"
@@ -28,13 +29,16 @@ export const getMdMetadata = async ({
   const image = frontmatter.image
   const author = frontmatter.author
 
+  const translatedLocales = await getTranslatedLocales(slug, "md")
+
   const metadata = await getMetadata({
     locale,
     slug: slugArray,
     title: pageTitle,
     description,
     image,
     author,
+    translatedLocales,
   })
   return metadata
 }

src/lib/utils/metadata.ts

@@ -3,6 +3,7 @@ import { getTranslations } from "next-intl/server"
 
 import { DEFAULT_OG_IMAGE, SITE_URL } from "@/lib/constants"
 
+import { getTranslatedLocales } from "./translatedLocales"
 import { isLocaleValidISO639_1 } from "./translations"
 import { getFullUrl } from "./url"
 
@@ -43,6 +44,7 @@ export const getMetadata = async ({
   image,
   author,
   noIndex = false,
+  translatedLocales,
 }: {
   locale: string
   slug: string[]
@@ -52,36 +54,56 @@ export const getMetadata = async ({
   image?: string
   author?: string
   noIndex?: boolean
+  translatedLocales?: string[]
 }): Promise<Metadata> => {
   const slugString = slug.join("/")
   const t = await getTranslations({ locale, namespace: "common" })
 
   const description = descriptionProp || t("site-description")
   const siteTitle = t("site-title")
 
-  // Set canonical URL w/ language path to avoid duplicate content
-  const url = getFullUrl(locale, slugString)
+  // Auto-detect translated locales if not provided
+  const finalTranslatedLocales =
+    translatedLocales ?? (await getTranslatedLocales(slugString, "intl"))
+
+  const isCurrentPageTranslated = finalTranslatedLocales.includes(locale)
+
+  // Set canonical URL
+  // If current locale is NOT translated, set canonical to English version
+  const canonicalLocale = isCurrentPageTranslated
+    ? locale
+    : routing.defaultLocale
+  const url = getFullUrl(canonicalLocale, slugString)
 
   // Set x-default URL for hreflang
   const xDefault = getFullUrl(routing.defaultLocale, slugString)
 
   /* Set fallback ogImage based on path */
   const ogImage = image || getOgImage(slug)
 
+  // Only include hreflang alternates if the current page is translated
+  // Untranslated pages should not have hreflang tags
+  const localesForHreflang = isCurrentPageTranslated
+    ? routing.locales.filter(
+        (loc) =>
+          finalTranslatedLocales.includes(loc) && isLocaleValidISO639_1(loc)
+      )
+    : []
+
   const base: Metadata = {
     title,
     description,
     metadataBase: new URL(SITE_URL),
     alternates: {
       canonical: url,
-      languages: {
-        "x-default": xDefault,
-        ...Object.fromEntries(
-          routing.locales
-            .filter(isLocaleValidISO639_1)
-            .map((locale) => [locale, getFullUrl(locale, slugString)])
-        ),
-      },
+      ...(localesForHreflang.length > 0 && {
+        languages: {
+          "x-default": xDefault,
+          ...Object.fromEntries(
+            localesForHreflang.map((loc) => [loc, getFullUrl(loc, slugString)])
+          ),
+        },
+      }),
     },
     openGraph: {
       title,
@@ -117,5 +139,9 @@ export const getMetadata = async ({
     return { ...base, robots: { index: false } }
   }
 
+  if (!isCurrentPageTranslated) {
+    return { ...base, robots: { index: true, follow: true } }
+  }
+
   return base
 }

src/lib/utils/translatedLocales.ts

@@ -0,0 +1,52 @@
+import { existsSync } from "fs"
+import { join } from "path"
+
+import { CONTENT_DIR, DEFAULT_LOCALE } from "@/lib/constants"
+
+import { routing } from "@/i18n/routing"
+import { isPageTranslated } from "@/lib/i18n/pageTranslation"
+
+/**
+ * Get all locales that have a page translated.
+ *
+ * @param slug - Page slug/path (e.g., "developers/tutorials/intro" or "/wallets/")
+ * @param pageType - Type of page: "md" for markdown pages, "intl" for next-intl pages
+ * @returns Promise resolving to array of locale codes that have this page translated
+ */
+export async function getTranslatedLocales(
+  slug: string,
+  pageType: "md" | "intl"
+): Promise<string[]> {
+  const normalizedSlug =
+    pageType === "md" ? slug.replace(/^\/+|\/+$/g, "") : slug
+
+  const checks = routing.locales.map(async (locale) => {
+    if (locale === DEFAULT_LOCALE) {
+      return { locale, isTranslated: true }
+    }
+
+    let isTranslated = false
+
+    if (pageType === "md") {
+      const translationPath = join(
+        process.cwd(),
+        CONTENT_DIR,
+        "translations",
+        locale,
+        normalizedSlug,
+        "index.md"
+      )
+      isTranslated = existsSync(translationPath)
+    } else {
+      isTranslated = await isPageTranslated(locale, normalizedSlug)
+    }
+
+    return { locale, isTranslated }
+  })
+
+  const results = await Promise.all(checks)
+
+  return results
+    .filter(({ isTranslated }) => isTranslated)
+    .map(({ locale }) => locale)
+}