og

app/[locale]/api/og/product/route.tsx

@@ -2,18 +2,29 @@ import { ImageResponse } from 'next/og';
 import { getProductBySlug } from '@/lib/mdx';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { NextRequest } from 'next/server';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
+export async function GET(
-  const t = await getTranslations('Products');
+  request: NextRequest,
-  const productSlug = slug[slug.length - 1];
+  { params }: { params: { locale: string } }
+) {
+  const { searchParams } = new URL(request.url);
+  const slug = searchParams.get('slug');
+  const locale = params.locale || 'en';
+
+  if (!slug) {
+    return new Response('Missing slug', { status: 400 });
+  }
+
+  const t = await getTranslations({ locale, namespace: 'Products' });
 
   // Check if it's a category page
   const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
-  if (categories.includes(productSlug)) {
+  if (categories.includes(slug)) {
-    const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryKey = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : productSlug;
+    const categoryTitle = t.has(`categories.${categoryKey}.title`) ? t(`categories.${categoryKey}.title`) : slug;
     const categoryDesc = t.has(`categories.${categoryKey}.description`) ? t(`categories.${categoryKey}.description`) : '';
 
     return new ImageResponse(
@@ -31,7 +42,7 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
     );
   }
 
-  const product = await getProductBySlug(productSlug, locale);
+  const product = await getProductBySlug(slug, locale);
 
   if (!product) {
     return new ImageResponse(

app/[locale]/blog/opengraph-image.tsx

@@ -0,0 +1,25 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+  const t = await getTranslations({ locale, namespace: 'Blog.meta' });
+  const title = t('title');
+  const description = t('description');
+
+  return new ImageResponse(
+    (
+      <OGImageTemplate
+        title={title}
+        description={description}
+        label="Blog"
+      />
+    ),
+    {
+      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',