diff --git a/app/[locale]/[slug]/opengraph-image.tsx b/app/[locale]/[slug]/opengraph-image.tsx index bf7b6cfc..41c93a6d 100644 --- a/app/[locale]/[slug]/opengraph-image.tsx +++ b/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); diff --git a/app/[locale]/api/og/product/route.tsx b/app/[locale]/api/og/product/route.tsx index d8d599a6..8f0de224 100644 --- a/app/[locale]/api/og/product/route.tsx +++ b/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, diff --git a/app/[locale]/blog/[slug]/opengraph-image.tsx b/app/[locale]/blog/[slug]/opengraph-image.tsx index a12d7f26..edfa6814 100644 --- a/app/[locale]/blog/[slug]/opengraph-image.tsx +++ b/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); diff --git a/app/[locale]/blog/opengraph-image.tsx b/app/[locale]/blog/opengraph-image.tsx index 84dc000e..32618134 100644 --- a/app/[locale]/blog/opengraph-image.tsx +++ b/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' }); diff --git a/app/[locale]/contact/opengraph-image.tsx b/app/[locale]/contact/opengraph-image.tsx index d7a7d44f..0db45425 100644 --- a/app/[locale]/contact/opengraph-image.tsx +++ b/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' }); diff --git a/app/[locale]/opengraph-image.tsx b/app/[locale]/opengraph-image.tsx index f67602ee..8a405205 100644 --- a/app/[locale]/opengraph-image.tsx +++ b/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' }); diff --git a/app/[locale]/products/opengraph-image.tsx b/app/[locale]/products/opengraph-image.tsx index 79995d61..8a3648e4 100644 --- a/app/[locale]/products/opengraph-image.tsx +++ b/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'); diff --git a/app/[locale]/team/opengraph-image.tsx b/app/[locale]/team/opengraph-image.tsx index a9decaad..86ebfd07 100644 --- a/app/[locale]/team/opengraph-image.tsx +++ b/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' }); diff --git a/components/OGImageTemplate.tsx b/components/OGImageTemplate.tsx index 3fbeb291..809e612f 100644 --- a/components/OGImageTemplate.tsx +++ b/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({
@@ -57,8 +59,11 @@ export function OGImageTemplate({
@@ -72,8 +77,8 @@ export function OGImageTemplate({ right: '-100px', width: '600px', height: '600px', - borderRadius: '50%', - background: `radial-gradient(circle, ${accentGreen}1a 0%, transparent 70%)`, + borderRadius: '300px', + backgroundColor: `${accentGreen}1a`, display: 'flex', }} /> diff --git a/lib/metadata.ts b/lib/metadata.ts index 38b6b9de..d3f03868 100644 --- a/lib/metadata.ts +++ b/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['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, diff --git a/scripts/test-og-images.ts b/scripts/test-og-images.ts new file mode 100644 index 00000000..5426cc2b --- /dev/null +++ b/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();