ページごとに異なるOGP画像を自動設定するインテグレーションを追加

- src/plugins/og-image.ts: ビルド後のHTMLにページ別og:imageを注入
- 各ページのスラッグから /og/{slug}.png 形式でOGP画像URLを生成
- 例: /whisper-to-ai-moji-okoshi/ → /og/whisper-to-ai-moji-okoshi.png

1 files changed, 40 insertions, 0 deletions

diff --git a/src/plugins/og-image.ts b/src/plugins/og-image.ts
new file mode 100644
index 0000000..0cfcbc2
--- /dev/null
+++ b/src/plugins/og-image.ts
@@ -0,0 +1,40 @@
+import type { AstroIntegration } from "astro";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Post-process built HTML files to set per-page og:image.
+ * Replaces the default og:image with a page-specific one based on URL path.
+ */
+export default function ogImageIntegration(): AstroIntegration {
+  return {
+    name: "og-image-per-page",
+    hooks: {
+      "astro:build:done": async ({ dir, pages }) => {
+        const distDir = typeof dir === "string" ? dir : fileURLToPath(dir);
+
+        for (const page of pages) {
+          const htmlPath = path.join(distDir, page.pathname, "index.html");
+
+          if (!fs.existsSync(htmlPath)) continue;
+
+          let html = fs.readFileSync(htmlPath, "utf-8");
+
+          // Derive slug from pathname: e.g., "/whisper-to-ai-moji-okoshi/" → "whisper-to-ai-moji-okoshi"
+          let slug = page.pathname.replace(/^\/|\/$/g, "") || "index";
+
+          const ogImageUrl = `https://yasutakeyohei.com/og/${slug}.png`;
+
+          // Replace existing og:image with page-specific one
+          html = html.replace(
+            /<meta property="og:image" content="[^"]*"/g,
+            `<meta property="og:image" content="${ogImageUrl}"`
+          );
+
+          fs.writeFileSync(htmlPath, html, "utf-8");
+        }
+      },
+    },
+  };
+}