diff --git a/apps/ssr/package.json b/apps/ssr/package.json
index 7f642626..6eb248b8 100644
--- a/apps/ssr/package.json
+++ b/apps/ssr/package.json
@@ -11,8 +11,10 @@
     "build": "sh scripts/build.sh",
     "build:jpg": "node scripts/webp-to-jpg.js",
     "build:next": "next build",
+    "deploy": "npm run pages:build && wrangler pages deploy",
     "dev": "next dev",
-    "pages:build": "npx @cloudflare/next-on-pages",
+    "pages:build": "pnpm dlx @cloudflare/next-on-pages",
+    "preview": "npm run pages:build && wrangler pages dev",
     "start": "next start"
   },
   "dependencies": {
diff --git a/apps/ssr/src/app/[photoId]/route.ts b/apps/ssr/src/app/[photoId]/route.ts
index 5f2f9a0b..b187e421 100644
--- a/apps/ssr/src/app/[photoId]/route.ts
+++ b/apps/ssr/src/app/[photoId]/route.ts
@@ -35,7 +35,7 @@ export const GET = async (
   }
 
   // Insert meta open graph tags and twitter meta tags
-  createAndInsertOpenGraphMeta(document, photo)
+  createAndInsertOpenGraphMeta(document, photo, request)
 
   return new Response(document.documentElement.outerHTML, {
     headers: {
@@ -48,11 +48,12 @@ export const GET = async (
 const createAndInsertOpenGraphMeta = (
   document: HTMLDocument,
   photo: PhotoManifest,
+  request: NextRequest,
 ) => {
   const og = {
     name: photo.id,
     description: photo.description,
-    image: photo.originalUrl,
+    image: `${request.nextUrl.origin}/og/${photo.id}`,
   }
 
   for (const [key, value] of Object.entries(og)) {
diff --git a/apps/ssr/wrangler.jsonc b/apps/ssr/wrangler.jsonc
new file mode 100644
index 00000000..743f9db6
--- /dev/null
+++ b/apps/ssr/wrangler.jsonc
@@ -0,0 +1,8 @@
+{
+  "name": "iris-ssr",
+  "compatibility_date": "2024-09-23",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": ".vercel/output/static"
+}
\ No newline at end of file