diff --git a/.changeset/og-metadata-improvements.md b/.changeset/og-metadata-improvements.md new file mode 100644 index 000000000..7351d5bf9 --- /dev/null +++ b/.changeset/og-metadata-improvements.md @@ -0,0 +1,5 @@ +--- +"docs": patch +--- + +Improve OpenGraph metadata: fix image dimensions to recommended 1200x630, add global Twitter/OG metadata, include width/height/alt on all OG images diff --git a/docs/app/[lang]/(home)/page.tsx b/docs/app/[lang]/(home)/page.tsx index bd1596f0e..aa523e66e 100644 --- a/docs/app/[lang]/(home)/page.tsx +++ b/docs/app/[lang]/(home)/page.tsx @@ -21,7 +21,14 @@ export const metadata: Metadata = { canonical: '/', }, openGraph: { - images: ['/og'], + images: [ + { + url: '/og', + width: 1200, + height: 630, + alt: 'Workflow DevKit - Make any TypeScript Function Durable', + }, + ], }, }; diff --git a/docs/app/[lang]/docs/[[...slug]]/page.tsx b/docs/app/[lang]/docs/[[...slug]]/page.tsx index d2c860aa1..c365677ba 100644 --- a/docs/app/[lang]/docs/[[...slug]]/page.tsx +++ b/docs/app/[lang]/docs/[[...slug]]/page.tsx @@ -99,7 +99,14 @@ export const generateMetadata = async ({ title: page.data.title, description: page.data.description, openGraph: { - images: getPageImage(page).url, + images: [ + { + url: getPageImage(page).url, + width: 1200, + height: 630, + alt: `${page.data.title} - Workflow DevKit`, + }, + ], }, }; diff --git a/docs/app/[lang]/layout.tsx b/docs/app/[lang]/layout.tsx index 98c8e6121..0455fc554 100644 --- a/docs/app/[lang]/layout.tsx +++ b/docs/app/[lang]/layout.tsx @@ -21,6 +21,16 @@ const getMetadataBase = () => { export const metadata: Metadata = { metadataBase: getMetadataBase(), + openGraph: { + type: 'website', + siteName: 'Workflow DevKit', + locale: 'en_US', + }, + twitter: { + card: 'summary_large_image', + site: '@vercel', + creator: '@vercel', + }, }; const Layout = async ({ children, params }: LayoutProps<'/[lang]'>) => { diff --git a/docs/app/[lang]/worlds/[id]/page.tsx b/docs/app/[lang]/worlds/[id]/page.tsx index e73668a46..4f9a821a2 100644 --- a/docs/app/[lang]/worlds/[id]/page.tsx +++ b/docs/app/[lang]/worlds/[id]/page.tsx @@ -46,7 +46,14 @@ export async function generateMetadata({ title: `${data.world.name} World | Workflow DevKit`, description: data.world.description, openGraph: { - images: [`/og/worlds/${id}`], + images: [ + { + url: `/og/worlds/${id}`, + width: 1200, + height: 630, + alt: `${data.world.name} World - Workflow DevKit`, + }, + ], }, }; } diff --git a/docs/app/[lang]/worlds/compare/page.tsx b/docs/app/[lang]/worlds/compare/page.tsx index 52215f47e..100b77c4c 100644 --- a/docs/app/[lang]/worlds/compare/page.tsx +++ b/docs/app/[lang]/worlds/compare/page.tsx @@ -15,6 +15,16 @@ export const metadata: Metadata = { index: false, follow: false, }, + openGraph: { + images: [ + { + url: '/og/worlds', + width: 1200, + height: 630, + alt: 'Compare World Benchmarks - Workflow DevKit', + }, + ], + }, }; export default async function CompareBenchmarksPage() { diff --git a/docs/app/[lang]/worlds/page.tsx b/docs/app/[lang]/worlds/page.tsx index dcaf3f690..f40d55a6f 100644 --- a/docs/app/[lang]/worlds/page.tsx +++ b/docs/app/[lang]/worlds/page.tsx @@ -11,7 +11,14 @@ export const metadata: Metadata = { description: 'The World abstraction allows workflows to run anywhere — locally, on Vercel, or on any cloud. The runtime, queues, and persistence are modular and entirely swappable.', openGraph: { - images: ['/og/worlds'], + images: [ + { + url: '/og/worlds', + width: 1200, + height: 630, + alt: 'Worlds - Workflow DevKit', + }, + ], }, }; diff --git a/docs/lib/og/assets/background.png b/docs/lib/og/assets/background.png index 2539505b9..79f9262ed 100644 Binary files a/docs/lib/og/assets/background.png and b/docs/lib/og/assets/background.png differ diff --git a/docs/lib/og/index.tsx b/docs/lib/og/index.tsx index 4fefd3460..d696d288d 100644 --- a/docs/lib/og/index.tsx +++ b/docs/lib/og/index.tsx @@ -2,8 +2,8 @@ import { readFile } from 'node:fs/promises'; import { join } from 'node:path'; import { ImageResponse } from 'next/og'; -/** Standard OpenGraph image dimensions */ -export const OG_IMAGE_SIZE = { width: 1200, height: 628 }; +/** Standard OpenGraph image dimensions (1200x630 is the recommended size) */ +export const OG_IMAGE_SIZE = { width: 1200, height: 630 }; export type OgImageOptions = { title: string;