src/app/(main)/staff_member/[slug]/page.tsx

@@ -12,28 +12,37 @@ import { Suspense } from "react";
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const defaultMetadata = await getDefaultMetadata();
   const name = defaultMetadata.openGraph?.siteName ?? "";
-  let title = "Page";
+  let title = defaultMetadata.title as string;
+  let description = defaultMetadata.description as string;
   let imgUrl = "";
+  let canonicalUrl = "";
 
   const slug = (await params).slug;
   const team = await fetchTeamDetail(decodeURIComponent(slug));
 
   // check for blog data
   if (!!team) {
-    title = `${team.data.name} - ${name}`;
+    title = !!team.data.meta?.title ? team.data.meta?.title : `${team.data.name} - ${name}`;
+    description = !!team.data.meta?.description ? team.data.meta?.description : description;
     imgUrl = team.imgUrl;
+    if (!!team?.data?.meta?.canonical_url) {
+      canonicalUrl = team.data.meta.canonical_url;
+    }
   }
 
   defaultMetadata.title = title;
-  defaultMetadata.description = undefined;
+  defaultMetadata.description = description;
 
   if (!!defaultMetadata.openGraph) {
     // @ts-ignore
     defaultMetadata.openGraph.type = "article";
     defaultMetadata.openGraph.title = title;
-    defaultMetadata.openGraph.description = undefined;
+    defaultMetadata.openGraph.description = description;
     defaultMetadata.openGraph.images = !!imgUrl ? [imgUrl] : undefined;
   }
+  if (!!defaultMetadata.alternates && !!canonicalUrl) {
+    defaultMetadata.alternates.canonical = canonicalUrl;
+  }
   defaultMetadata.twitter = {
     card: "summary_large_image",
     title: title,

src/collections/Teams.ts

@@ -34,6 +34,28 @@ export const Teams: CollectionConfig = {
       type: "richText",
       editor: lexicalEditor({}),
     },
+    {
+      name: "meta",
+      label: "Page Meta",
+      type: "group",
+      fields: [
+        {
+          name: "title",
+          label: "Title",
+          type: "text",
+        },
+        {
+          name: "description",
+          label: "Description",
+          type: "textarea",
+        },
+        {
+          name: "canonical_url",
+          label: "Canonical Url",
+          type: "text",
+        },
+      ],
+    },
   ],
   admin: {
     hideAPIURL: true,

src/payload-types.ts

@@ -392,6 +392,11 @@ export interface Team {
     };
     [k: string]: unknown;
   } | null;
+  meta?: {
+    title?: string | null;
+    description?: string | null;
+    canonical_url?: string | null;
+  };
   updatedAt: string;
   createdAt: string;
 }
@@ -822,6 +827,13 @@ export interface TeamsSelect<T extends boolean = true> {
   role?: T;
   img?: T;
   biography?: T;
+  meta?:
+    | T
+    | {
+        title?: T;
+        description?: T;
+        canonical_url?: T;
+      };
   updatedAt?: T;
   createdAt?: T;
 }