diff --git a/components/AppsComponent/ProductData/page.jsx b/components/AppsComponent/ProductData/page.jsx
index 15323f4..e337c3f 100644
--- a/components/AppsComponent/ProductData/page.jsx
+++ b/components/AppsComponent/ProductData/page.jsx
@@ -9,7 +9,7 @@ import Image from "next/image";
 import PersianNumber from "plugins/PersianNumber";
 import logo from "../../../public/images/logo.png";
 
-const ProductData = ({ params }) => {
+const ProductData = ({ params, data }) => {
   const [product, setProduct] = useState([]);
   const [specificationsHeader, setSpecificationsHeader] = useState([]);
   const [productBarDetail, setProductBarDetail] = useState(0);
@@ -65,14 +65,16 @@ const ProductData = ({ params }) => {
       <div className=" py-10">
         <div className="grid xs:grid-cols-1 lg:grid-cols-8  rtl gap-6 lg:px-20">
           <div className="lg:col-span-3 ">
-            <GalleryBox file={product.files} />
+            <GalleryBox file={data?.product?.files} />
           </div>
 
           <div className="lg:col-span-3 xs:px-5 lg:px-0 ">
             <div className="text-right mt-7">
-              <h1 className="text-lg font-medium ">{product.persianName} </h1>
+              <h1 className="text-lg font-medium ">
+                {data.product?.persianName}{" "}
+              </h1>
               <p className="mb-0 text-sm text-gray-400">
-                {product?.englishName}{" "}
+                {data?.product?.englishName}{" "}
               </p>
             </div>
 
@@ -81,13 +83,13 @@ const ProductData = ({ params }) => {
                 <p className="mb-0 text-sm text-white ">اصالت کالای </p>
               </div>
 
-              {product?.hasDiscount && (
+              {data?.product?.hasDiscount && (
                 <div className="bg-danger-100 rounded-full py-1 px-3 ml-2">
                   <p className="mb-0 text-sm text-white ">بمب امروز </p>
                 </div>
               )}
 
-              {!product?.warranty == "" && (
+              {!data?.product?.warranty == "" && (
                 <div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
                   <p className="mb-0 text-sm text-white ">
                     {product?.warranty}
@@ -109,7 +111,7 @@ const ProductData = ({ params }) => {
             <div>
               <div className="text-right  mt-3 flex justify-between">
                 <h2 className="mb-0 text-gray-400  text-sm">
-                  {product?.summery}
+                  {data?.product?.summery}
                 </h2>
               </div>
             </div>
@@ -132,7 +134,7 @@ const ProductData = ({ params }) => {
             <div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
               <div className="flex justify-center">
                 <div className="w-[130px]">
-                  {product.files?.length > 0 ? (
+                  {data?.product?.files?.length > 0 ? (
                     <Image
                       src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
                         product.files && product.files[0].fileLocation
@@ -156,7 +158,7 @@ const ProductData = ({ params }) => {
               </div>
               <div className="text-center">
                 <p className="mb-0 text-sm text-gray-500">
-                  {product.persianName}{" "}
+                  {data?.product?.persianName}{" "}
                 </p>
               </div>
               <div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>
@@ -199,7 +201,7 @@ const ProductData = ({ params }) => {
                     <div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl">
                       <del>
                         <PersianNumber
-                          number={(product?.cost / 10).toLocaleString()}
+                          number={(data?.product?.cost / 10).toLocaleString()}
                           style={"text-[13px] opacity-40 "}
                         />
                       </del>
@@ -209,7 +211,7 @@ const ProductData = ({ params }) => {
                       <p className="mb-0 font-bold">
                         <PersianNumber
                           number={(
-                            product?.costWithDiscount / 10
+                            data?.product?.costWithDiscount / 10
                           ).toLocaleString()}
                         />
                       </p>
@@ -227,7 +229,7 @@ const ProductData = ({ params }) => {
                     <small className="mr-1 mt-[6px]">تومان</small>
                   </div>
                 )}
-                <AddToCart data={product} theme={2} />
+                <AddToCart data={data?.product} theme={2} />
               </div>
             </div>
           </div>
@@ -361,7 +363,7 @@ const ProductData = ({ params }) => {
                       <p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600">
                         <del>
                           <PersianNumber
-                            number={(product?.cost / 10).toLocaleString()}
+                            number={(data?.product?.cost / 10).toLocaleString()}
                             style="!text-[11px]"
                           />
                         </del>
@@ -371,7 +373,7 @@ const ProductData = ({ params }) => {
                         <p className="mb-0 font-bold">
                           <PersianNumber
                             number={(
-                              product?.costWithDiscount / 10
+                              data?.product?.costWithDiscount / 10
                             ).toLocaleString()}
                           />
                         </p>
@@ -383,13 +385,13 @@ const ProductData = ({ params }) => {
                       {" "}
                       <p className="mb-0 font-bold text-lg">
                         <PersianNumber
-                          number={(product?.cost / 10).toLocaleString()}
+                          number={(data?.product?.cost / 10).toLocaleString()}
                         />
                       </p>
                       <small className="mr-1 mt-[6px]">تومان</small>
                     </div>
                   )}
-                  <AddToCart data={product} theme={2} />
+                  <AddToCart data={data?.product} theme={2} />
                 </div>
               </div>
             </div>
diff --git a/src/app/products/[...id]/page.jsx b/src/app/products/[...id]/page.jsx
index e91f682..cb82758 100644
--- a/src/app/products/[...id]/page.jsx
+++ b/src/app/products/[...id]/page.jsx
@@ -1,14 +1,25 @@
 import ProductData from "@comp/AppsComponent/ProductData/page";
 
+async function getData(id) {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
+  const post = await res.json();
+  return post;
+}
+
 export async function generateMetadata({ params }) {
+  const data = await getData(params.id[0]);
+
   const decodedName = decodeURIComponent(params.id[1]);
 
+  console.log("dddddd", data?.product);
+
   return {
     title: decodedName,
     description: `  خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
     metadataBase: new URL(
       `https://www.vesmeh.com/categories/${params.id[0]}/${decodedName}`
     ),
+    product_id_meta: data?.product?.id,
     keywords: [
       "آرایشی",
       "بهداشت خانگی",
@@ -21,6 +32,19 @@ export async function generateMetadata({ params }) {
       description: `  خرید ${decodedName}| برندهای متنوع با پایین ترین قیمت | فروشگاه اینترنتی وسمه`,
       url: `https://www.vesmeh.com/categories/${params.id[0]}/${decodedName}`,
       type: "website",
+
+      images: [
+        {
+          url: JSON.stringify(
+            process.env.NEXT_PUBLIC_STORAGE_URL + "/" + data?.product?.files &&
+              data?.product?.files[0].fileLocation
+          ), // Dynamic og route
+          width: 800,
+          height: 600,
+        },
+      ],
+      locale: "en_US",
+      type: "website",
     },
     twitter: {
       site: "@vesmehstore",
@@ -28,12 +52,23 @@ export async function generateMetadata({ params }) {
       title: decodedName,
       creator: "@vesmehstore",
     },
+    other: {
+      product_id: data?.product?.id,
+      product_name: data?.product?.persianName,
+      product_price: data?.product?.costWithDiscount,
+      product_old_price: data?.product?.cost,
+      availability: data?.product?.stock > 0 ? "instock" : "outofstock",
+      guarantee: "guarantee_sample",
+    },
   };
 }
-const Page = ({ params }) => {
+
+const Page = async ({ params }) => {
+  const data = await getData(params.id[0]);
+
   return (
     <>
-      <ProductData params={params} />
+      <ProductData params={params} data={data} />
     </>
   );
 };