From 0378dde328afe7e70f20458b125f74d6d43fe3eb Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 22 Jun 2026 13:46:50 +0200
Subject: [PATCH] feat(og): Standardize OG images across all subpages with logo
 and background

---
 app/[locale]/[slug]/opengraph-image.tsx      | 10 +++++++---
 app/[locale]/blog/[slug]/opengraph-image.tsx | 11 +++++++----
 app/[locale]/blog/opengraph-image.tsx        | 12 ++++++++++--
 app/[locale]/contact/opengraph-image.tsx     | 18 ++++++++++++++----
 app/[locale]/opengraph-image.tsx             | 14 +++++---------
 components/OGImageTemplate.tsx               | 15 +++++++++------
 6 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/app/[locale]/[slug]/opengraph-image.tsx b/app/[locale]/[slug]/opengraph-image.tsx
index 2fe4d8f98..ac7d5580c 100644
--- a/app/[locale]/[slug]/opengraph-image.tsx
+++ b/app/[locale]/[slug]/opengraph-image.tsx
@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -20,12 +20,16 @@ export default async function Image({
   }
 
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={pageData.frontmatter.title}
-      description={pageData.frontmatter.excerpt}
+      title="Die Experten für Kabelnetzbau"
+      description={`${pageData.frontmatter.title}`}
       label="Information"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,
diff --git a/app/[locale]/blog/[slug]/opengraph-image.tsx b/app/[locale]/blog/[slug]/opengraph-image.tsx
index b6d3c6707..c6f64de38 100644
--- a/app/[locale]/blog/[slug]/opengraph-image.tsx
+++ b/app/[locale]/blog/[slug]/opengraph-image.tsx
@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 import { SITE_URL } from '@/lib/schema';
 
 export const size = OG_IMAGE_SIZE;
@@ -52,13 +52,16 @@ export default async function Image({
   if (featuredImage) {
     base64Image = await fetchImageAsBase64(featuredImage);
   }
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={post.frontmatter.title}
-      description={post.frontmatter.excerpt}
+      title="Die Experten für Kabelnetzbau"
+      description={`${post.frontmatter.title}`}
       label={post.frontmatter.category || 'Blog'}
-      image={base64Image || featuredImage}
+      image={base64Image || featuredImage || bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,
diff --git a/app/[locale]/blog/opengraph-image.tsx b/app/[locale]/blog/opengraph-image.tsx
index 3848a8858..4b13d6970 100644
--- a/app/[locale]/blog/opengraph-image.tsx
+++ b/app/[locale]/blog/opengraph-image.tsx
@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,9 +11,17 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
-    <OGImageTemplate title={t('title')} description={t('description')} label="Blog" />,
+    <OGImageTemplate 
+      title="Die Experten für Kabelnetzbau" 
+      description={t('title')} 
+      label="Blog" 
+      image={bg}
+      logo={logo}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
diff --git a/app/[locale]/contact/opengraph-image.tsx b/app/[locale]/contact/opengraph-image.tsx
index bd909b59e..c05fa6d92 100644
--- a/app/[locale]/contact/opengraph-image.tsx
+++ b/app/[locale]/contact/opengraph-image.tsx
@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,12 +11,22 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
-  const title = t('meta.title') || t('title');
-  const description = t('meta.description') || t('subtitle');
+  let title = t('meta.title') || t('title');
+  if (title.startsWith('E-TIB GmbH | ')) {
+    title = title.substring('E-TIB GmbH | '.length);
+  }
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label="Contact" />,
+    <OGImageTemplate 
+      title="Die Experten für Kabelnetzbau" 
+      description={title} 
+      label="Contact" 
+      image={bg}
+      logo={logo}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
diff --git a/app/[locale]/opengraph-image.tsx b/app/[locale]/opengraph-image.tsx
index 790136f76..ae2d52168 100644
--- a/app/[locale]/opengraph-image.tsx
+++ b/app/[locale]/opengraph-image.tsx
@@ -11,13 +11,9 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
   
-  let title = t('title');
-  if (title.startsWith('E-TIB GmbH | ')) {
-    title = title.substring('E-TIB GmbH | '.length);
-  }
-  let description = t('description');
-  if (description.length > 160) {
-    description = description.substring(0, 160) + '...';
+  let pageTitle = t('title');
+  if (pageTitle.startsWith('E-TIB GmbH | ')) {
+    pageTitle = pageTitle.substring('E-TIB GmbH | '.length);
   }
 
   const fonts = await getOgFonts();
@@ -26,8 +22,8 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
 
   return new ImageResponse(
     <OGImageTemplate
-      title={title}
-      description={description}
+      title="Die Experten für Kabelnetzbau"
+      description={pageTitle}
       label="Kabelnetzbau & Infrastruktur"
       image={bg}
       logo={logo}
diff --git a/components/OGImageTemplate.tsx b/components/OGImageTemplate.tsx
index 7d445208f..c3cb69f90 100644
--- a/components/OGImageTemplate.tsx
+++ b/components/OGImageTemplate.tsx
@@ -120,12 +120,12 @@ export function OGImageTemplate({
           {/* Title */}
           <div
             style={{
-              fontSize: title.length > 35 ? '64px' : '76px',
+              fontSize: '72px',
               fontWeight: 700,
               color: 'white',
               lineHeight: '1.1',
               maxWidth: '900px',
-              marginBottom: '32px',
+              marginBottom: '24px',
               display: 'flex',
               letterSpacing: '-0.02em',
             }}
@@ -137,11 +137,14 @@ export function OGImageTemplate({
           {description && (
             <div
               style={{
-                fontSize: '32px',
-                color: 'rgba(255,255,255,0.8)',
+                fontSize: '36px',
+                color: 'rgba(255,255,255,0.85)',
                 maxWidth: '850px',
-                lineHeight: '1.45',
-                display: 'flex',
+                lineHeight: '1.4',
+                display: '-webkit-box',
+                WebkitLineClamp: 3,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
                 fontWeight: 400,
               }}
             >