fix(og): enable automatic OG image discovery and refine Traefik whitelist

- Removed manual 'images' metadata overrides. - This allows Next.js to use built-in automatic discovery. - Ensures metadata uses the dynamic metadataBase from the environment. - Refined Traefik public router regex for sub-routes. - Restored and verified imports in modified page.tsx files.
2026-02-13 01:38:26 +01:00
parent d9a7cf6a77
commit 3d498f3df8
14 changed files with 576 additions and 22 deletions
--- a/app/[locale]/[slug]/page.tsx
+++ b/app/[locale]/[slug]/page.tsx
@@ -5,7 +5,6 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getPageBySlug, getAllPages } from '@/lib/pages';
 import { mdxComponents } from '@/components/blog/MDXComponents';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { SITE_URL } from '@/lib/schema';

 interface PageProps {
@@ -50,7 +49,6 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
      title: `${pageData.frontmatter.title} | KLZ Cables`,
      description: pageData.frontmatter.excerpt || '',
      url: `${SITE_URL}/${locale}/${slug}`,
-      images: getOGImageMetadata(slug, pageData.frontmatter.title, locale),
    },
    twitter: {
      card: 'summary_large_image',
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -10,7 +10,6 @@ import PowerCTA from '@/components/blog/PowerCTA';
 import TableOfContents from '@/components/blog/TableOfContents';
 import { mdxComponents } from '@/components/blog/MDXComponents';
 import { Heading } from '@/components/ui';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { setRequestLocale } from 'next-intl/server';

 interface BlogPostProps {
@@ -45,7 +44,6 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
      publishedTime: post.frontmatter.date,
      authors: ['KLZ Cables'],
      url: `${SITE_URL}/${locale}/blog/${slug}`,
-      images: getOGImageMetadata(`blog/${slug}`, post.frontmatter.title, locale),
    },
    twitter: {
      card: 'summary_large_image',
--- a/app/[locale]/blog/page.tsx
+++ b/app/[locale]/blog/page.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
 import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
+import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { SITE_URL } from '@/lib/schema';

 interface BlogIndexProps {
@@ -31,7 +31,6 @@ export async function generateMetadata({ params }: BlogIndexProps) {
      title: `${t('title')} | KLZ Cables`,
      description: t('description'),
      url: `${SITE_URL}/${locale}/blog`,
-      images: getOGImageMetadata('blog', t('title'), locale),
    },
    twitter: {
      card: 'summary_large_image',
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -35,7 +35,6 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
      description,
      url: `${SITE_URL}/${locale}/contact`,
      siteName: 'KLZ Cables',
-      images: getOGImageMetadata('contact', title, locale),
      locale: `${locale.toUpperCase()}_DE`,
      type: 'website',
    },
@@ -43,7 +42,6 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
      card: 'summary_large_image',
      title: `${title} | KLZ Cables`,
      description,
-      images: [`${SITE_URL}/${locale}/contact/opengraph-image`],
    },
    robots: {
      index: true,
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -4,6 +4,8 @@ import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
 import { FeedbackOverlay } from '@mintel/next-feedback';
+import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
+import { RecordModeOverlay } from '@/components/record-mode/RecordModeOverlay';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
@@ -98,16 +100,19 @@ export default async function LocaleLayout({
    <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
      <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
        <NextIntlClientProvider messages={messages} locale={safeLocale}>
-          <JsonLd />
-          <Header />
-          <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
-          <Footer />
-          <CMSConnectivityNotice />
+          <RecordModeProvider>
+            <JsonLd />
+            <Header />
+            <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
+            <Footer />
+            <CMSConnectivityNotice />

-          <Suspense fallback={null}>
-            <AnalyticsProvider />
-          </Suspense>
-          {config.feedbackEnabled && <FeedbackOverlay />}
+            <Suspense fallback={null}>
+              <AnalyticsProvider />
+            </Suspense>
+            {config.feedbackEnabled && <FeedbackOverlay />}
+            <RecordModeOverlay />
+          </RecordModeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -6,7 +6,6 @@ import { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { SITE_URL } from '@/lib/schema';

 interface ProductsPageProps {
@@ -35,7 +34,6 @@ export async function generateMetadata({ params }: ProductsPageProps): Promise<M
      title: `${title} | KLZ Cables`,
      description,
      url: `${SITE_URL}/${locale}/products`,
-      images: getOGImageMetadata('products', title, locale),
    },
    twitter: {
      card: 'summary_large_image',
--- a/app/[locale]/team/page.tsx
+++ b/app/[locale]/team/page.tsx
@@ -3,7 +3,6 @@ import { Metadata } from 'next';
 import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import { Section, Container, Heading, Badge, Button } from '@/components/ui';
-import { getOGImageMetadata } from '@/lib/metadata';
 import Image from 'next/image';
 import Reveal from '@/components/Reveal';
 import Gallery from '@/components/team/Gallery';
@@ -34,7 +33,6 @@ export async function generateMetadata({ params }: TeamPageProps): Promise<Metad
      title: `${title} | KLZ Cables`,
      description,
      url: `${SITE_URL}/${locale}/team`,
-      images: getOGImageMetadata('team', title, locale),
    },
    twitter: {
      card: 'summary_large_image',