リンクカードのOGP画像なし時にダミー画像でフォールバック

astro.config.mjs

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
@@ -9,9 +11,18 @@ import remarkLinkCard from 'remark-link-card-plus';
 import remarkBreaks from 'remark-breaks';
 import { remarkMermaidInjector } from './src/plugins/remark/remark-mermaid-injector.mjs';
 
+const SITE_URL = 'https://www.rowicy.com';
+// data URIはURL.canParse()を通り、かつdev/build/prodのどの環境・ポートでも
+// そのまま表示できるため、ホスト名に依存する絶対URLより確実(svgは537byteと小さい)。
+const LINK_CARD_FALLBACK_IMAGE_URL = `data:image/svg+xml;base64,${readFileSync(
+  fileURLToPath(
+    new URL('./public/images/link-card-fallback.svg', import.meta.url)
+  )
+).toString('base64')}`;
+
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://www.rowicy.com',
+  site: SITE_URL,
   prefetch: {
     prefetchAll: true,
   },
@@ -35,7 +46,15 @@ export default defineConfig({
       remarkBreaks,
       [
         remarkLinkCard,
-        { cache: false, shortenUrl: true, thumbnailPosition: 'left' },
+        {
+          cache: false,
+          shortenUrl: true,
+          thumbnailPosition: 'left',
+          ogTransformer: og => {
+            if (og.imageUrl && URL.canParse(og.imageUrl)) return og;
+            return { ...og, imageUrl: LINK_CARD_FALLBACK_IMAGE_URL };
+          },
+        },
       ],
     ],
   },