add opengraph image and dynamic metadata

Author: edwnl

frontend/src/app/jobs/[id]/page.tsx

@@ -4,11 +4,48 @@ import { getJobById } from "@/app/jobs/actions";
 import { notFound } from "next/navigation";
 import { Job } from "@/types/job";
 import JobDetailsWrapper from "@/components/jobs/job-details-wrapper";
+import { Metadata } from "next";
+import OgImage from "@/assets/OgImage.png";
 
-export const metadata = {
-  title: "Job Details",
+type Props = {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  // Fetch the job
+  const { id } = await params;
+  const job: Job | null = await getJobById(id);
+
+  // Fallback to parent metadata if job not found
+  if (!job) {
+    return {
+      title: "Job Not Found",
+      description: "The requested job could not be found.",
+    };
+  }
+
+  // Create dynamic title and description
+  const title = `${job.title} at ${job.company.name}`;
+  const description =
+    job.one_liner || `${job.title} position at ${job.company.name}`;
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      images: [
+        {
+          url: OgImage.src,
+          alt: title,
+        },
+      ],
+    },
+  };
+}
+
 type PageProps = {
   params: Promise<{ id: string }>;
 };

frontend/src/app/layout.tsx

@@ -21,12 +21,23 @@ import { Metadata } from "next";
 import FeedbackButton from "@/components/ui/feedback-button";
 import { Notifications } from "@mantine/notifications";
 
+import OgImage from "../assets/OgImage.png";
+
 export const metadata: Metadata = {
   title: {
     template: "%s | MAC Jobs Board",
     default: "MAC Jobs Board",
   },
-  description: "This is MACs Official Jobs Dashboard.",
+  openGraph: {
+    title: "MAC Jobs Board",
+    description: "Stay ahead with the job board that never sleeps.",
+    images: [
+      {
+        url: OgImage.src,
+        alt: "MAC Jobs Board",
+      },
+    ],
+  },
 };
 
 const poppins = Poppins({