fix og image (#258)

aster-void · web-flow · commit 3d414f68a104 · 2025-04-14T18:16:38.000+09:00
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
@@ -18,7 +18,9 @@ const { title, description, focus, image } = Astro.props;
 ---
 
 <html lang="ja" class="bg-gray-50 text-gray-800" data-theme="light">
-  <Meta {title} {description} image={image} />
+  <head>
+    <Meta {title} {description} image={image} />
+  </head>
   <body class="min-h-full w-full">
     <ClientRouter />
     <Header {focus} />
diff --git a/src/layouts/meta.astro b/src/layouts/meta.astro
@@ -1,4 +1,6 @@
 ---
+import { addOrigin } from "+/lib/utils";
+
 interface Props {
   title: string | null;
   description: string | null;
@@ -22,7 +24,10 @@ const url = Astro.url.href;
 <meta property="og:site_name" content="ut.code();" />
 <meta property="og:title" content={title} />
 {description && <meta property="og:description" content={description} />}
-<meta property="og:image" content={image?.src ?? "/utcode-logo/normal.png"} />
+<meta
+  property="og:image"
+  content={addOrigin(image?.src ?? "/utcode-logo/normal.png", Astro.site)}
+/>
 <meta property="og:url" content={url} />
 <meta property="og:locale" content="ja_JP" />
 <meta name="twitter:card" content="summary_large_image" />
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,11 @@
+export function addOrigin(url: string, site: URL | undefined) {
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    return url;
+  }
+  if (url.startsWith("/")) {
+    if (!site) throw new Error("site is undefined");
+    return site.origin + url;
+  }
+  console.warn("WARNING: unknown URL schema:", url);
+  return url;
+}
