2.2.30-rc.8

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}
+      title="Die Experten für Kabelnetzbau"
-      description={pageData.frontmatter.excerpt}
+      description={`${pageData.frontmatter.title}`}
       label="Information"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

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}
+      title="Die Experten für Kabelnetzbau"
-      description={post.frontmatter.excerpt}
+      description={`${post.frontmatter.title}`}
       label={post.frontmatter.category || 'Blog'}
-      image={base64Image || featuredImage}
+      image={base64Image || featuredImage || bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

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,

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');
+  let title = t('meta.title') || t('title');
-  const description = t('meta.description') || t('subtitle');
+  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,

app/[locale]/opengraph-image.tsx

@@ -10,14 +10,20 @@ export const runtime = 'nodejs';
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
+  
+  let pageTitle = t('title');
+  if (pageTitle.startsWith('E-TIB GmbH | ')) {
+    pageTitle = pageTitle.substring('E-TIB GmbH | '.length);
+  }
+
   const fonts = await getOgFonts();
   const bg = getOgBackground();
   const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={t('title')}
+      title="Die Experten für Kabelnetzbau"
-      description={t('description')}
+      description={pageTitle}
       label="Kabelnetzbau & Infrastruktur"
       image={bg}
       logo={logo}

components/OGImageTemplate.tsx

@@ -86,7 +86,20 @@ export function OGImageTemplate({
         }}
       />
 
-      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
+      {/* Main Content Wrapper */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          height: '100%',
+          width: '100%',
+          position: 'relative',
+          zIndex: 10,
+        }}
+      >
+        {/* Top: Text Content */}
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
           {/* Label / Category */}
           {label && (
             <div
@@ -95,8 +108,8 @@ export function OGImageTemplate({
                 fontWeight: 700,
                 color: primaryGreen,
                 textTransform: 'uppercase',
-              letterSpacing: '0.3em',
+                letterSpacing: '0.25em',
-              marginBottom: '32px',
+                marginBottom: '24px',
                 display: 'flex',
               }}
             >
@@ -107,12 +120,12 @@ export function OGImageTemplate({
           {/* Title */}
           <div
             style={{
-            fontSize: title.length > 40 ? '64px' : '82px',
+              fontSize: '72px',
               fontWeight: 700,
               color: 'white',
-            lineHeight: '1.05',
+              lineHeight: '1.1',
-            maxWidth: '950px',
+              maxWidth: '900px',
-            marginBottom: '40px',
+              marginBottom: '24px',
               display: 'flex',
               letterSpacing: '-0.02em',
             }}
@@ -124,25 +137,25 @@ export function OGImageTemplate({
           {description && (
             <div
               style={{
-              fontSize: '32px',
+                fontSize: '36px',
-              color: 'rgba(255,255,255,0.7)',
+                color: 'rgba(255,255,255,0.85)',
                 maxWidth: '850px',
                 lineHeight: '1.4',
-              display: 'flex',
+                display: '-webkit-box',
+                WebkitLineClamp: 3,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
                 fontWeight: 400,
               }}
             >
-            {description.length > 160 ? description.substring(0, 157) + '...' : description}
+              {description}
             </div>
           )}
         </div>
 
-      {/* Brand Footer */}
+        {/* Bottom: Brand Footer */}
         <div
           style={{
-          position: 'absolute',
-          bottom: '80px',
-          left: '80px',
             display: 'flex',
             alignItems: 'center',
           }}
@@ -152,7 +165,7 @@ export function OGImageTemplate({
             <img
               src={logo}
               alt="E-TIB GmbH"
-            height="48"
+              height="56"
               style={{ marginRight: '24px', objectFit: 'contain' }}
             />
           ) : (
@@ -181,6 +194,7 @@ export function OGImageTemplate({
             </div>
           )}
         </div>
+      </div>
 
       {/* Primary Green Brand Strip */}
       <div

package.json

@@ -138,7 +138,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.30-rc.3",
+  "version": "2.2.30-rc.8",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",