fix: meta tags and jsonld

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

@@ -16,6 +16,7 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
   let updatedAt = "";
   let imgUrl = "";
   let createdByName = "";
+  let canonicalUrl = "";
 
   const slug = (await params).slug;
   const blog = await fetchBlogDetail(slug);
@@ -39,6 +40,9 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
       imgUrl = page.heroImg?.url;
       publishedAt = page.createdAt;
       updatedAt = page.updatedAt;
+      if (!!page.meta?.cannonical_url) {
+        canonicalUrl = page.meta.cannonical_url;
+      }
 
       if (!!page?.createdBy && typeof page.createdBy !== "number") {
         createdByName = page?.createdBy?.name ?? "";
@@ -55,6 +59,9 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     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/app/(main)/page.tsx

@@ -1,30 +1,18 @@
 import Parallax from "./home-bg-video/page";
 import Homepage from "@/components/Homepage";
 import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
+import { Metadata, Viewport } from "next";
+import { getDefaultMetadata } from "@/utils/metadata";
 
-export const metadata = {
+export async function generateMetadata(): Promise<Metadata> {
-  title: "HomePage - Cochise Oncology",
+  const defaultMetadata = await getDefaultMetadata();
-  description: "Cochise Oncology",
+  defaultMetadata.title = `Homepage - ${defaultMetadata.openGraph?.siteName}`;
-  keywords: "Cochise Oncology, Oncology, Healthcare, Medical Services, Cancer Treatment",
+  defaultMetadata.description =
-  author: "Cochise Oncology",
+    "Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We are the largest full-service cancer treatment center between Albuquerque, New Mexico and Tucson, Arizona.";
-  robots: "index, follow",
+  return defaultMetadata;
-  og: {
+}
-    title: "HomePage - Cochise Oncology",
-    description: "Cochise Oncology",
-    type: "website",
-    url: "https://www.cochiseoncology.com",
-    image: "https://www.cochiseoncology.com/og-image.jpg",
-  },
-  twitter: {
-    card: "summary_large_image",
-    site: "@CochiseOncology",
-    title: "HomePage - Cochise Oncology",
-    description: "Cochise Oncology",
-    image: "https://www.cochiseoncology.com/twitter-image.jpg",
-  },
-};
 
-export const viewport = {
+export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
 };

src/components/Blogs/BlogDetail.tsx

@@ -13,6 +13,7 @@ export interface BlogDetailProps {
 export default async function BlogDetail({ slug }: BlogDetailProps) {
   const data = await fetchBlogDetail(slug);
   const headersList = await headers();
+  const mainUrl = headersList.get("x-main-url");
   const fullUrl = headersList.get("x-full-url");
 
   const shareUrl = {
@@ -25,8 +26,74 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
     notFound();
   }
 
+  let author = {};
+  console.log("data?.data?.createdBy", data?.data?.createdBy);
+  if (!!data?.data?.createdBy && typeof data?.data?.createdBy !== "number") {
+    author = {
+      author: {
+        name: data?.data?.createdBy?.name,
+        "@id": `${mainUrl}/#/schema/person/${data?.data?.createdBy?.id}`,
+      },
+    };
+  }
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "Article",
+        "@id": `${fullUrl}#article`,
+        isPartOf: {
+          "@id": fullUrl,
+        },
+        ...author,
+        headline: data?.data?.title ?? "",
+        datePublished: data?.createdAt,
+        dateModified: data?.updatedAt,
+        mainEntityOfPage: {
+          "@id": fullUrl,
+        },
+        publisher: { "@id": `${mainUrl}/#organization` },
+        image: {
+          "@id": `${fullUrl}#primaryimage`,
+        },
+        thumbnailUrl: data?.imgUrl ?? "",
+        inLanguage: "en-US",
+      },
+      {
+        "@type": "WebPage",
+        "@id": fullUrl,
+        url: fullUrl,
+        name: `${data?.data?.title ?? ""} - Cochise Oncology`,
+        isPartOf: { "@id": `${mainUrl}/#website` },
+        primaryImageOfPage: {
+          "@id": `${fullUrl}#primaryimage`,
+        },
+        image: {
+          "@id": `${fullUrl}#primaryimage`,
+        },
+        thumbnailUrl: data?.imgUrl ?? "",
+        datePublished: data?.createdAt,
+        dateModified: data?.updatedAt,
+        description: data?.data?.meta?.description,
+        breadcrumb: {
+          "@id": `${fullUrl}#breadcrumb`,
+        },
+        inLanguage: "en-US",
+        potentialAction: [
+          {
+            "@type": "ReadAction",
+            target: [fullUrl],
+          },
+        ],
+      },
+    ],
+  };
+
   return (
     <>
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+
       <HeroOther title={data.data.title} createdAt={data?.createdAt} shareUrl={shareUrl} />
 
       {/* Section */}

src/middleware.ts

@@ -7,12 +7,14 @@ export function middleware(request: NextRequest) {
   const protocol = request.headers.get("x-forwarded-proto") || "http"; // Default to 'http' if not provided
   const host = request.headers.get("x-forwarded-host") || request.nextUrl.hostname;
   const path = request.nextUrl.pathname + request.nextUrl.search;
+  const siteName = "Cochise Oncology";
+
   // Construct the full URL
   const mainUrl = `${protocol}://${host}`;
   const fullUrl = `${mainUrl}${path}`;
-
   request.headers.set("x-main-url", mainUrl);
   request.headers.set("x-full-url", fullUrl);
+  request.headers.set("x-site-name", siteName);
 
   return NextResponse.next({
     request: {

src/services/payload/blog.ts

@@ -47,11 +47,13 @@ export async function fetchBlogDetail(slug: string | undefined) {
 
   const data = blogDataQuery?.docs?.[0];
   const createdAt = formatDate(data.createdAt);
+  const updatedAt = formatDate(data.updatedAt);
   const imgUrl = typeof data.img !== "number" ? (data?.img?.url ?? "") : "";
 
   return {
     data,
     createdAt,
+    updatedAt,
     imgUrl,
   };
 }

src/utils/metadata.ts

@@ -5,14 +5,28 @@ export async function getDefaultMetadata(): Promise<Metadata> {
   const headersList = await headers();
   const mainUrl = headersList.get("x-main-url") ?? "";
   const fullUrl = headersList.get("x-full-url") ?? "";
+  const siteName = headersList.get("x-site-name") ?? "";
 
   return {
     metadataBase: new URL(mainUrl),
+    title: siteName,
+    robots: {
+      index: true,
+      follow: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
+    keywords: "Cochise Oncology, Oncology, Healthcare, Medical Services, Cancer Treatment",
     openGraph: {
+      title: siteName,
       type: "website",
       locale: "en_US",
       url: fullUrl,
-      siteName: "Cochise Oncology",
+      siteName,
+    },
+    twitter: {
+      card: "summary_large_image",
     },
     alternates: {
       canonical: "./",