feat: update metadata

HereEast · Feb 18, 2025 · e891218 · e891218
1 parent a09f7e9
commit e891218
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 136 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,7 +11,7 @@ import { Footer } from "~/components/Footer";
 import { GoogleAnalytics } from "~/components/GoogleAnalytics";
 import { CookieBanner } from "~/components/CookieBanner";
 
-import { SEO_DATA } from "~/utils/seo-data";
+import { getMetadata } from "~/utils/getMetadata";
 
 const InnovatorGrotesk = localFont({
   src: [
@@ -48,39 +48,7 @@ const InnovatorGrotesk = localFont({
   ],
 });
 
-// METADATA
-export const metadata: Metadata = {
-  title: SEO_DATA.title,
-  description: SEO_DATA.description,
-  metadataBase: new URL(SEO_DATA.url),
-  openGraph: {
-    title: SEO_DATA.title,
-    description: SEO_DATA.description,
-    url: SEO_DATA.url,
-    siteName: "people-work.net",
-    images: [
-      {
-        url: SEO_DATA.image,
-        width: 1200,
-        height: 630,
-      },
-    ],
-    locale: "en-EN",
-  },
-  twitter: {
-    title: SEO_DATA.title,
-    description: SEO_DATA.description,
-    site: "people-work.net",
-    card: "summary_large_image",
-    images: [
-      {
-        url: SEO_DATA.image,
-        width: 1200,
-        height: 630,
-      },
-    ],
-  },
-};
+export const metadata: Metadata = getMetadata();
 
 interface LayoutProps {
   children: ReactNode;

diff --git a/src/app/people/[slug]/page.tsx b/src/app/people/[slug]/page.tsx
@@ -5,13 +5,34 @@ import { Person, IPerson } from "~/models/Person";
 import { getPeople } from "~/api-client/people";
 
 import { SEO_DATA } from "~/utils/seo-data";
+import { getMetadata } from "~/utils/getMetadata";
 
 interface PersonPageProps {
   params: {
     slug: string;
   };
 }
 
+// METADATA
+export async function generateMetadata({ params }: PersonPageProps) {
+  await connectDB();
+
+  const person: IPerson = await Person.findOne({ slug: params.slug }).exec();
+
+  if (person) {
+    const title = SEO_DATA.person.title(
+      person.name,
+      person.jobTitle,
+      person.company.name,
+    );
+
+    const description = SEO_DATA.person.description(person.name);
+
+    return getMetadata({ title, description });
+  }
+}
+
+// PARAMS
 export async function generateStaticParams() {
   const people = await getPeople();
 
@@ -25,48 +46,3 @@ export async function generateStaticParams() {
 export default async function PersonPage({ params }: PersonPageProps) {
   return <PersonQAPage slug={params.slug} />;
 }
-
-// METADATA
-export async function generateMetadata({ params }: PersonPageProps) {
-  await connectDB();
-
-  const person: IPerson = await Person.findOne({ slug: params.slug }).exec();
-
-  if (person) {
-    const title = `${person.name}, ${person.jobTitle} at ${person.company.name}`;
-    const description = `Discover how ${person.name} approaches work, perspectives, and career growth. Explore unique insights and experiences in a simple Q&A format.`;
-
-    return {
-      title,
-      description: SEO_DATA.description,
-      metadataBase: new URL(SEO_DATA.url),
-      openGraph: {
-        title,
-        description: SEO_DATA.description,
-        url: SEO_DATA.url,
-        siteName: "people-work.net",
-        images: [
-          {
-            url: SEO_DATA.image,
-            width: 1200,
-            height: 630,
-          },
-        ],
-        locale: "en-EN",
-      },
-      twitter: {
-        title,
-        description: SEO_DATA.description,
-        site: "people-work.net",
-        card: "summary_large_image",
-        images: [
-          {
-            url: SEO_DATA.image,
-            width: 1200,
-            height: 630,
-          },
-        ],
-      },
-    };
-  }
-}
diff --git a/src/app/questions/[slug]/page.tsx b/src/app/questions/[slug]/page.tsx
@@ -5,13 +5,29 @@ import { connectDB } from "~/app/lib/connectDB";
 import { IQuestion, Question } from "~/models/Question";
 
 import { SEO_DATA } from "~/utils/seo-data";
+import { getMetadata } from "~/utils/getMetadata";
 
 interface QuestionPageProps {
   params: {
     slug: string;
   };
 }
 
+// METADATA
+export async function generateMetadata({ params }: QuestionPageProps) {
+  await connectDB();
+
+  const question: IQuestion = await Question.findOne({
+    slug: params.slug,
+  }).exec();
+
+  const title = SEO_DATA.question.title(question.body);
+  const description = SEO_DATA.question.description;
+
+  return getMetadata({ title, description });
+}
+
+// PARAMS
 export async function generateStaticParams() {
   const questions = await getQuestions();
 
@@ -25,49 +41,3 @@ export async function generateStaticParams() {
 export default async function QuestionAnswers({ params }: QuestionPageProps) {
   return <QuestionPage slug={params.slug} />;
 }
-
-// METADATA
-export async function generateMetadata({ params }: QuestionPageProps) {
-  await connectDB();
-
-  const question: IQuestion = await Question.findOne({
-    slug: params.slug,
-  }).exec();
-
-  if (question) {
-    const title = `Q: ${question.body}`;
-
-    return {
-      title,
-      description: SEO_DATA.question.description,
-      metadataBase: new URL(SEO_DATA.url),
-      openGraph: {
-        title,
-        description: SEO_DATA.question.description,
-        url: SEO_DATA.url,
-        siteName: "people-work.net",
-        images: [
-          {
-            url: SEO_DATA.image,
-            width: 1200,
-            height: 630,
-          },
-        ],
-        locale: "en-EN",
-      },
-      twitter: {
-        title,
-        description: SEO_DATA.question.description,
-        site: "people-work.net",
-        card: "summary_large_image",
-        images: [
-          {
-            url: SEO_DATA.image,
-            width: 1200,
-            height: 630,
-          },
-        ],
-      },
-    };
-  }
-}
diff --git a/src/utils/getMetadata.ts b/src/utils/getMetadata.ts
@@ -0,0 +1,36 @@
+import { Metadata } from "next";
+
+import { SEO_DATA } from "./seo-data";
+
+interface MetadataInput {
+  title?: string;
+  description?: string;
+  imageUrl?: string;
+}
+
+export function getMetadata(input: MetadataInput = {}): Metadata {
+  const title = input.title || SEO_DATA.index.title;
+  const description = input.description || SEO_DATA.index.description;
+  const imageUrl = input.imageUrl || SEO_DATA.index.imageUrl;
+
+  return {
+    title,
+    description,
+    metadataBase: new URL(SEO_DATA.index.url),
+    openGraph: {
+      title: SEO_DATA.index.title,
+      description: SEO_DATA.index.description,
+      url: SEO_DATA.index.url,
+      siteName: "people-work.net",
+      images: [
+        {
+          url: imageUrl,
+          width: 1200,
+          height: 630,
+        },
+      ],
+      locale: "en-EN",
+      type: "website",
+    },
+  };
+}
diff --git a/src/utils/seo-data.ts b/src/utils/seo-data.ts
@@ -1,21 +1,29 @@
 import { BASE_URL } from "./constants";
 
 export const SEO_DATA = {
-  url: BASE_URL,
-  image: "/opengraph-image.jpg",
-  title: "Job titles decoded. In a simple Q&A format.",
-  description:
-    "A small web hustle on a mission to demystify job titles and show real people behind them.",
-
-  // Person
-  person: {
+  index: {
+    url: BASE_URL,
+    imageUrl: "/opengraph-image.jpg",
+    title: "Job titles decoded. In a simple Q&A format.",
     description:
-      "Explore diverse perspectives on this topic from professionals across industries.",
+      "A small web hustle on a mission to demystify job titles and show real people behind them.",
+  },
+  person: {
+    title(name: string, title: string, company: string) {
+      return `${name}, ${title} at ${company}`;
+    },
+    description(name: string) {
+      return `Discover how ${name} approaches work, perspectives, and career growth. Explore unique insights and experiences in a simple Q&A format.`;
+    },
   },
-
-  // Question
   question: {
+    title(question: string) {
+      return `Q: ${question}`;
+    },
     description:
       "Explore diverse perspectives on this topic from professionals across industries.",
   },
+  backlog: {
+    title: "Backlog | Job titles decoded. In a simple Q&A format.",
+  },
 };