Update for SEO

app/[lang]/layout.tsx

@@ -38,8 +38,7 @@ export async function generateMetadata({
     },
     alternates: {
       languages: await getAlternateLanguages(
-        (dictionary) =>
-          new URL(dictionary.urls.home, dictionary.meta.baseUrl).href,
+        (dictionary) => dictionary.urls.home,
       ),
     },
   };
@@ -75,9 +74,9 @@ export default async function RootLayout({
                     src={avatar}
                     alt="Nooc Avatar"
                   />
-                  <h1 className="font-bold opacity-80 sm:inline">
+                  <div className="font-bold opacity-80 sm:inline">
                     {dictionary.meta.websiteName}
-                  </h1>
+                  </div>
                 </Link>
                 <nav className="font-light">
                   <ul className="flex gap-4">

app/[lang]/page.tsx

@@ -19,9 +19,9 @@ function Title({
   children: ReactNode;
 }) {
   return (
-    <h1 className={twMerge("text-base font-bold sm:text-lg", className)}>
+    <h2 className={twMerge("text-base font-bold sm:text-lg", className)}>
       {children}
-    </h1>
+    </h2>
   );
 }
 
@@ -33,9 +33,9 @@ function Subtitle({
   children: ReactNode;
 }) {
   return (
-    <h2 className={twMerge("text-sm opacity-60 sm:text-base", className)}>
+    <h3 className={twMerge("text-sm opacity-60 sm:text-base", className)}>
       {children}
-    </h2>
+    </h3>
   );
 }
 
@@ -118,7 +118,7 @@ export default async function Home({
                 className="rounded-3xl p-4 sm:px-8 border bg-white/50 dark:bg-indigo-100/5 flex flex-col gap-2"
               >
                 <Link className="underline" href={post.permalink}>
-                  <h1 className="text-xl font-serif">{post.title}</h1>
+                  <h2 className="text-xl font-serif">{post.title}</h2>
                 </Link>
                 <p className="opacity-70">{post.description}</p>
                 <div className="opacity-50 flex items-center gap-4">

app/[lang]/posts/[postSlug]/page.tsx

@@ -3,12 +3,7 @@ import { CalendarDaysIcon, LanguageIcon } from "@heroicons/react/24/solid";
 import { displayDate } from "@/lib/date";
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import {
-  dictionaryKeys,
-  getDictionary,
-  Language,
-  languageLabels,
-} from "@/dictionaries";
+import { getDictionary, Language, languageLabels } from "@/dictionaries";
 import { SiX } from "@icons-pack/react-simple-icons";
 import { Metadata } from "next";
 import classNames from "classnames";
@@ -33,6 +28,8 @@ export async function generateMetadata({
     notFound();
   }
 
+  const allLanguages = posts.filter((post) => post.slug === postSlug);
+
   return {
     metadataBase: new URL(dictionary.meta.baseUrl),
     title: post.title,
@@ -54,8 +51,8 @@ export async function generateMetadata({
       images: post.cover?.src ?? "/static/banner.png",
     },
     alternates: {
-      languages: await getAlternateLanguages(
-        (dictionary) => new URL(post.permalink, dictionary.meta.baseUrl).href,
+      languages: Object.fromEntries(
+        allLanguages.map((post) => [post.lang, post.permalink]),
       ),
     },
   };

app/[lang]/posts/categories/[categorySlug]/page.tsx

@@ -45,9 +45,7 @@ export async function generateMetadata({
     },
     alternates: {
       languages: await getAlternateLanguages(
-        (dictionary) =>
-          new URL(category.permalink[params.lang], dictionary.meta.baseUrl)
-            .href,
+        (dictionary, lang) => category.permalink[lang],
       ),
     },
   };

app/[lang]/posts/page.tsx

@@ -36,8 +36,7 @@ export async function generateMetadata({
     },
     alternates: {
       languages: await getAlternateLanguages(
-        (dictionary) =>
-          new URL(dictionary.urls.posts, dictionary.meta.baseUrl).href,
+        (dictionary) => dictionary.urls.posts,
       ),
     },
   };

app/[lang]/works/page.tsx

@@ -35,8 +35,7 @@ export async function generateMetadata({
     },
     alternates: {
       languages: await getAlternateLanguages(
-        (dictionary) =>
-          new URL(dictionary.urls.works, dictionary.meta.baseUrl).href,
+        (dictionary) => dictionary.urls.works,
       ),
     },
   };
@@ -78,9 +77,9 @@ export default async function WorksPage({
               </div>
             )}
             <div>
-              <h1 className={`text-${work.color}-500 text-bold sm:text-lg`}>
+              <h2 className={`text-${work.color}-500 text-bold sm:text-lg`}>
                 {work.name}
-              </h1>
+              </h2>
               <p className="opacity-60">{work.summary}</p>
             </div>
           </Card>

dictionaries/index.ts

@@ -17,7 +17,7 @@ export type Dictionary = Awaited<
 export type Language = keyof typeof languageLabels;
 
 export const defaultLanguage: Language = "en";
-export const dictionaryKeys = Object.keys(dictionaries);
+export const dictionaryKeys = Object.keys(dictionaries) as Language[];
 
 export async function getDictionary(locale: string = defaultLanguage) {
   if (!(locale in dictionaries)) {

lib/metadata.ts

@@ -3,17 +3,18 @@ import {
   Dictionary,
   dictionaryKeys,
   getDictionary,
+  Language,
 } from "@/dictionaries";
 import { AlternateURLs } from "next/dist/lib/metadata/types/alternative-urls-types";
 
 export async function getAlternateLanguages(
-  handler: (dict: Dictionary) => string,
+  handler: (dict: Dictionary, lang: Language) => string,
 ): Promise<AlternateURLs["languages"]> {
   const langEntries = await Promise.all(
     dictionaryKeys.map(async (lang) => {
       const dictionary = await getDictionary(lang);
 
-      return [lang, handler(dictionary)];
+      return [lang, handler(dictionary, lang)];
     }),
   );