게시물 OG 이미지 설정 추가

pages/post/[slug].vue

@@ -22,6 +22,24 @@ const pageUrl = computed(() => `${siteUrl.value}/post/${post.value.slug}`)
 const seoTitle = computed(() => post.value.seoTitle || post.value.title)
 const seoDescription = computed(() => post.value.seoDescription || post.value.excerpt || 'sori.studio 개인 블로그')
 const canonicalUrl = computed(() => post.value.canonicalUrl || pageUrl.value)
+const ogImage = computed(() => post.value.ogImage || post.value.featuredImage || '')
+
+/**
+ * 절대 URL 생성
+ * @param {string} value - 원본 URL
+ * @returns {string} 절대 URL
+ */
+const toAbsoluteUrl = (value) => {
+  if (!value) {
+    return ''
+  }
+
+  if (/^https?:\/\//i.test(value)) {
+    return value
+  }
+
+  return `${siteUrl.value}${value.startsWith('/') ? value : `/${value}`}`
+}
 
 useHead(() => ({
   title: seoTitle.value,
@@ -51,7 +69,19 @@ useHead(() => ({
     {
       property: 'og:url',
       content: pageUrl.value
-    }
+    },
+    ...(ogImage.value
+      ? [
+          {
+            property: 'og:image',
+            content: toAbsoluteUrl(ogImage.value)
+          },
+          {
+            name: 'twitter:card',
+            content: 'summary_large_image'
+          }
+        ]
+      : [])
   ]
 }))
 </script>