diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index e3bef148..f2640d5c 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -9,8 +9,43 @@ export async function generateMetadata({params: {locale}}: {params: {locale: str
const t = await getTranslations({locale, namespace: 'Index.meta'});
return {
- title: t('title'),
- description: t('description')
+ title: {
+ default: t('title'),
+ template: `%s | ${t('title')}`
+ },
+ description: t('description'),
+ metadataBase: new URL('https://klz-cables.com'),
+ alternates: {
+ canonical: `/${locale}`,
+ languages: {
+ 'de-DE': '/de',
+ 'en-US': '/en',
+ },
+ },
+ openGraph: {
+ type: 'website',
+ locale: locale === 'de' ? 'de_DE' : 'en_US',
+ url: `https://klz-cables.com/${locale}`,
+ siteName: 'KLZ Cables',
+ title: t('title'),
+ description: t('description'),
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: t('title'),
+ description: t('description'),
+ },
+ robots: {
+ index: true,
+ follow: true,
+ googleBot: {
+ index: true,
+ follow: true,
+ 'max-video-preview': -1,
+ 'max-image-preview': 'large',
+ 'max-snippet': -1,
+ },
+ },
};
}
diff --git a/app/[locale]/opengraph-image.tsx b/app/[locale]/opengraph-image.tsx
new file mode 100644
index 00000000..5cd03e7f
--- /dev/null
+++ b/app/[locale]/opengraph-image.tsx
@@ -0,0 +1,92 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+
+export const runtime = 'edge';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+ const t = await getTranslations({ locale, namespace: 'Index.meta' });
+
+ return new ImageResponse(
+ (
+
+ {/* Background Pattern / Scribble placeholder */}
+
+
+
+
+ KLZ Cables
+
+
+ {t('title')}
+
+
+ {t('description')}
+
+
+
+ {/* Bottom Accent Line */}
+
+
+ ),
+ {
+ width: 1200,
+ height: 630,
+ }
+ );
+}
diff --git a/app/[locale]/products/[...slug]/opengraph-image.tsx b/app/[locale]/products/[...slug]/opengraph-image.tsx
new file mode 100644
index 00000000..ede719ca
--- /dev/null
+++ b/app/[locale]/products/[...slug]/opengraph-image.tsx
@@ -0,0 +1,135 @@
+import { ImageResponse } from 'next/og';
+import { getProductBySlug } from '@/lib/mdx';
+
+export const runtime = 'edge';
+
+export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
+ const productSlug = slug[slug.length - 1];
+ const product = await getProductBySlug(productSlug, locale);
+
+ if (!product) {
+ return new ImageResponse(
+
+ );
+ }
+
+ return new ImageResponse(
+ (
+
+ {/* Left Side: Content */}
+
+
+ KLZ Cables | {product.frontmatter.categories[0]}
+
+
+ {product.frontmatter.title}
+
+
+ {product.frontmatter.description}
+
+
+ {/* Accent Line */}
+
+
+
+ {/* Right Side: Product Image */}
+
+ {product.frontmatter.images?.[0] && (
+
)
+ )}
+ {/* Subtle shadow under product */}
+
+
+
+ {/* Branding Corner */}
+
+
+ ),
+ {
+ width: 1200,
+ height: 630,
+ }
+ );
+}
diff --git a/app/[locale]/products/[...slug]/page.tsx b/app/[locale]/products/[...slug]/page.tsx
index 7312de04..401ffe9f 100644
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -10,6 +10,7 @@ import Image from 'next/image';
import { getTranslations } from 'next-intl/server';
import { Section, Container, Heading, Badge, Button } from '@/components/ui';
import Scribble from '@/components/Scribble';
+import { Metadata } from 'next';
interface ProductPageProps {
params: {
@@ -18,6 +19,49 @@ interface ProductPageProps {
};
}
+export async function generateMetadata({ params }: ProductPageProps): Promise
{
+ const { locale, slug } = params;
+ const productSlug = slug[slug.length - 1];
+ const t = await getTranslations('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)) {
+ const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+ const categoryTitle = t(`categories.${categoryKey}.title`);
+ const categoryDesc = t(`categories.${categoryKey}.description`);
+
+ return {
+ title: categoryTitle,
+ description: categoryDesc,
+ openGraph: {
+ title: categoryTitle,
+ description: categoryDesc,
+ url: `https://klz-cables.com/${locale}/products/${productSlug}`,
+ }
+ };
+ }
+
+ const product = await getProductBySlug(productSlug, locale);
+ if (!product) return {};
+
+ return {
+ title: product.frontmatter.title,
+ description: product.frontmatter.description,
+ openGraph: {
+ title: product.frontmatter.title,
+ description: product.frontmatter.description,
+ type: 'website',
+ url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: product.frontmatter.title,
+ description: product.frontmatter.description,
+ },
+ };
+}
+
const components = {
ProductTechnicalData,
ProductTabs,
@@ -223,6 +267,31 @@ export default async function ProductPage({ params }: ProductPageProps) {
+
+ {/* Structured Data */}
+
{/* Related Products */}