fix: serve static Open Graph images on Cloudflare

.github/workflows/deploy-cloudflare.yml

@@ -61,7 +61,9 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build OpenNext Worker
-        run: pnpm exec opennextjs-cloudflare build
+        run: |
+          pnpm og:build
+          pnpm exec opennextjs-cloudflare build
 
       - name: Upload preview version
         id: upload

app/layout.tsx

@@ -10,12 +10,14 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { Toaster } from "sonner"
 import {
+  OG_IMAGE_SIZE,
   SITE_AUTHOR,
   SITE_DESCRIPTION,
   SITE_KEYWORDS,
   SITE_NAME,
   SITE_TITLE,
   SITE_URL,
+  docsOgImagePath,
   rootJsonLd,
 } from "@/lib/seo"
 import { cn } from "@/lib/utils"
@@ -66,11 +68,21 @@ export const metadata: Metadata = {
     siteName: SITE_NAME,
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
+    images: [
+      {
+        url: docsOgImagePath(),
+        width: OG_IMAGE_SIZE.width,
+        height: OG_IMAGE_SIZE.height,
+        alt: SITE_TITLE,
+        type: "image/png",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
+    images: [docsOgImagePath()],
   },
   appleWebApp: {
     title: SITE_NAME,

lib/og-paths.mjs

@@ -0,0 +1,16 @@
+import { join } from "node:path"
+
+export const OG_IMAGE_SIZE = { width: 1200, height: 630 }
+
+/** Catch-alls cannot host `opengraph-image`; pages use static `/og/docs/.../image.png`. */
+export function docsOgImageSegments(slug) {
+  return [...(slug ?? []), "image.png"]
+}
+
+export function docsOgImagePath(slug) {
+  return `/og/docs/${docsOgImageSegments(slug).join("/")}`
+}
+
+export function docsOgPublicFile(slug, root = process.cwd()) {
+  return join(root, "public", ...docsOgImagePath(slug).split("/").filter(Boolean))
+}

lib/seo.ts

@@ -52,7 +52,7 @@ export function isComponentPage(slug?: string[]): boolean {
 
 export const OG_IMAGE_SIZE = { width: 1200, height: 630 } as const
 
-/** Catch-alls cannot host `opengraph-image`; pages point at `/og/docs/.../image.png`. */
+/** Catch-alls cannot host `opengraph-image`; pages use static `/og/docs/.../image.png`. */
 export function docsOgImageSegments(slug?: string[]): string[] {
   return [...(slug ?? []), "image.png"]
 }
@@ -85,6 +85,7 @@ export function buildPageMetadata({
     width: OG_IMAGE_SIZE.width,
     height: OG_IMAGE_SIZE.height,
     alt: ogTitle,
+    type: "image/png",
   }
 
   return {

package.json

@@ -6,10 +6,11 @@
   "packageManager": "pnpm@11.20.0",
   "scripts": {
     "dev": "next dev",
-    "build": "pnpm registry:build && next build",
+    "build": "pnpm registry:build && pnpm og:build && next build",
     "start": "next start",
-    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
-    "cf:deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+    "preview": "pnpm og:build && opennextjs-cloudflare build && opennextjs-cloudflare preview",
+    "cf:deploy": "pnpm og:build && opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+    "og:build": "node scripts/build-og-images.mjs",
     "cf:upload": "opennextjs-cloudflare build && opennextjs-cloudflare upload",
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts",
     "lint": "eslint",

scripts/build-og-images.mjs

@@ -0,0 +1,7 @@
+import { buildOgImages } from "./og-lib.mjs"
+
+const files = await buildOgImages()
+console.log(`OG images written (${files.length})`)
+for (const { path } of files) {
+  console.log(`  ${path}`)
+}