og

app/[locale]/products/[...slug]/opengraph-image.tsx

@@ -1,62 +0,0 @@
-import { ImageResponse } from 'next/og';
-import { getProductBySlug } from '@/lib/mdx';
-import { getTranslations } from 'next-intl/server';
-import { OGImageTemplate } from '@/components/OGImageTemplate';
-
-export const runtime = 'nodejs';
-
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
-  const t = await getTranslations('Products');
-  const productSlug = slug[slug.length - 1];
-
-  // Check if it's a category page
-  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-  if (categories.includes(productSlug)) {
-    const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
-    const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
-
-    return new ImageResponse(
-      (
-        <OGImageTemplate
-          title={categoryTitle}
-          description={categoryDesc}
-          label="Product Category"
-        />
-      ),
-      {
-        width: 1200,
-        height: 630,
-      }
-    );
-  }
-
-  const product = await getProductBySlug(productSlug, locale);
-
-  if (!product) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
-  }
-
-  const featuredImage = product.frontmatter.images?.[0]
-    ? (product.frontmatter.images[0].startsWith('http')
-        ? product.frontmatter.images[0]
-        : `https://klz-cables.com${product.frontmatter.images[0]}`)
-    : undefined;
-
-  return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={product.frontmatter.title}
-        description={product.frontmatter.description}
-        label={product.frontmatter.categories?.[0] || 'Product'}
-        image={featuredImage}
-      />
-    ),
-    {
-      width: 1200,
-      height: 630,
-    }
-  );
-}

app/[locale]/products/[...slug]/page.tsx

@@ -51,6 +51,14 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
         title: `${categoryTitle} | KLZ Cables`,
         description: categoryDesc,
         url: `https://klz-cables.com/${locale}/products/${productSlug}`,
+        images: [
+          {
+            url: `/api/og/product?slug=${fileSlug}`,
+            width: 1200,
+            height: 630,
+            alt: categoryTitle,
+          },
+        ],
       },
       twitter: {
         card: 'summary_large_image',
@@ -79,6 +87,14 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       description: product.frontmatter.description,
       type: 'website',
       url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
+      images: [
+        {
+          url: `/api/og/product?slug=${productSlug}`,
+          width: 1200,
+          height: 630,
+          alt: product.frontmatter.title,
+        },
+      ],
     },
     twitter: {
       card: 'summary_large_image',