I fetched title with some logic

src/app/api/og/route.tsx

@@ -1,4 +1,5 @@
 import { ImageResponse } from "next/og";
+
 // App router includes @vercel/og.
 // No need to install it.
 
@@ -41,13 +42,15 @@ function Circle() {
 
 export async function GET(request: Request) {
   try {
-    const { searchParams } = new URL(request.url);
-
-    // ?title=<title>
-    const hasTitle = searchParams.has("title");
-    const title = hasTitle
-      ? searchParams.get("title")?.slice(0, 100)
-      : "My default title";
+    const urlParams = new URLSearchParams(request.url.split("?")[1]); // Splitting URL to get query params
+    const title = urlParams.get("title");
+    console.log("title01", title);
+    // const { searchParams } = new URL(request.url);
+    // console.log("searchParams", searchParams)
+    // const hasTitle = searchParams.has("title");
+    // const title = hasTitle
+    //   ? searchParams.get("title")?.slice(0, 100)
+    //   : "My default title";
 
     return new ImageResponse(
       (
@@ -97,6 +100,14 @@ export async function GET(request: Request) {
               <Circle />
             </span>
             <span>
+              {/* <img
+                width="40"
+                height="40"
+                src={"https://ik.imagekit.io/echoes/echoes_logo.png"}
+                style={{
+                  borderRadius: 128,
+                }}
+              /> */}
               <GradientSquare />
             </span>
           </div>

src/app/dashboard/[slug]/chat/[chatid]/page.tsx

@@ -23,17 +23,18 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   // read route params
   const id = params.id;
+  const ogurl = new URL("api/og");
+  ogurl.searchParams.set("title", chattitle);
 
+  console.log("chattitle in chat id page ", chattitle);
   return {
     title: "Echoes",
+    description: "echoes slug",
     openGraph: {
-      images: [
-        {
-          url: "api/og", // Must be an absolute URL
-          width: 1200,
-          height: 680,
-        },
-      ],
+      title: "Echoes",
+      description: "Echoes Slug",
+      type: "website",
+      images: ["api/og?title=hello id"],
     },
   };
 }

src/app/dashboard/[slug]/page.tsx

@@ -5,7 +5,7 @@ import { chats, Chat as ChatSchema } from "@/lib/db/schema";
 import { eq, desc, ne, and } from "drizzle-orm";
 import { auth } from "@clerk/nextjs";
 import ChatCardWrapper from "@/components/chatcardwrapper";
-import { Metadata, ResolvingMetadata } from "next";
+import { Metadata } from "next";
 
 // import Uploadzone from "@/components/uploadzone";
 
@@ -18,17 +18,21 @@ type Props = {
 };
 
 let chattitle: any = "";
-export async function generateMetadata(
-  { params, searchParams }: Props,
-  parent: ResolvingMetadata,
-): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+  searchParams,
+}: Props): Promise<Metadata> {
   // read route params
   const id = params.id;
 
   return {
     title: "Echoes",
+    description: "echoes slug",
     openGraph: {
-      images: ["api/og"],
+      title: "Echoes",
+      description: "Echoes Slug",
+      type: "website",
+      images: ["api/og?title=hello slug"],
     },
   };
 }