og

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

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og';
 import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
   const pageData = await getPageBySlug(slug, locale);

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

@@ -4,7 +4,7 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { NextRequest } from 'next/server';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export async function GET(
   request: NextRequest,

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

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
   const post = await getPostBySlug(slug, locale);

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

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });

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

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Contact' });

app/[locale]/opengraph-image.tsx

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Index.meta' });

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

@@ -3,7 +3,7 @@ import { getProductBySlug } from '@/lib/mdx';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug?: string[] } }) {
   const t = await getTranslations('Products');

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

@@ -2,7 +2,7 @@ import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 
-export const runtime = 'nodejs';
+export const runtime = 'edge';
 
 export default async function Image({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale, namespace: 'Team' });

components/OGImageTemplate.tsx

@@ -29,7 +29,6 @@ export function OGImageTemplate({
     backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
     padding: '80px',
     position: 'relative',
-    fontFamily: 'Inter, sans-serif',
   };
 
   return (
@@ -39,7 +38,10 @@ export function OGImageTemplate({
         <div
           style={{
             position: 'absolute',
-            inset: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
             display: 'flex',
           }}
         >
@@ -57,8 +59,11 @@ export function OGImageTemplate({
           <div
             style={{
               position: 'absolute',
-              inset: 0,
+              top: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.9) 0%, rgba(0,26,77,0.4) 100%)',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'linear-gradient(to right, rgba(0,26,77,0.9), rgba(0,26,77,0.4))',
             }}
           />
         </div>
@@ -72,8 +77,8 @@ export function OGImageTemplate({
           right: '-100px',
           width: '600px',
           height: '600px',
-          borderRadius: '50%',
+          borderRadius: '300px',
-          background: `radial-gradient(circle, ${accentGreen}1a 0%, transparent 70%)`,
+          backgroundColor: `${accentGreen}1a`,
           display: 'flex',
         }}
       />

lib/metadata.ts

@@ -2,9 +2,10 @@ import { Metadata } from 'next';
 import { SITE_URL } from './schema';
 
 export function getOGImageMetadata(path: string, title: string, locale: string): NonNullable<Metadata['openGraph']>['images'] {
+  const cleanPath = path ? (path.startsWith('/') ? path : `/${path}`) : '';
   return [
     {
-      url: `${SITE_URL}/${locale}/${path}/opengraph-image`,
+      url: `${SITE_URL}/${locale}${cleanPath}/opengraph-image`,
       width: 1200,
       height: 630,
       alt: title,

scripts/test-og-images.ts

@@ -0,0 +1,46 @@
+import * as http from 'http';
+
+const baseUrl = 'http://localhost:3010';
+const paths = [
+  '/en/opengraph-image',
+  '/de/opengraph-image',
+  '/en/blog/opengraph-image',
+  '/en/contact/opengraph-image',
+  '/en/products/opengraph-image',
+  '/en/team/opengraph-image',
+];
+
+async function testUrl(path: string) {
+  return new Promise((resolve) => {
+    const url = `${baseUrl}${path}`;
+    console.log(`Testing ${url}...`);
+    const req = http.get(url, (res) => {
+      console.log(`  Status: ${res.statusCode}`);
+      console.log(`  Content-Type: ${res.headers['content-type']}`);
+      resolve(res.statusCode === 200);
+    });
+    req.on('error', (e) => {
+      console.error(`  Error: ${e.message}`);
+      resolve(false);
+    });
+    req.end();
+  });
+}
+
+async function run() {
+  let allPassed = true;
+  for (const path of paths) {
+    const passed = await testUrl(path);
+    if (!passed) allPassed = false;
+  }
+  
+  if (allPassed) {
+    console.log('\n✅ All OG images are working!');
+    process.exit(0);
+  } else {
+    console.log('\n❌ Some OG images failed.');
+    process.exit(1);
+  }
+}
+
+run();