diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 046105b..b082925 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,11 +1,37 @@
-'use client'
-import PublicLayout from '@/components/public/PublicLayout'
-import BlogListPage from '@/components/public/BlogListPage'
+import type { Metadata } from 'next'
+import BlogPageClient from '@/components/public/BlogPageClient'
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com'
+const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME || 'My Personal Site'
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: `Read the latest articles and posts on ${SITE_NAME}.`,
+  alternates: {
+    canonical: `${SITE_URL}/blog`,
+  },
+  openGraph: {
+    type: 'website',
+    url: `${SITE_URL}/blog`,
+    title: `Blog | ${SITE_NAME}`,
+    description: `Read the latest articles and posts on ${SITE_NAME}.`,
+    images: [
+      {
+        url: '/og-blog.png',
+        width: 1200,
+        height: 630,
+        alt: `Blog | ${SITE_NAME}`,
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: `Blog | ${SITE_NAME}`,
+    description: `Read the latest articles and posts on ${SITE_NAME}.`,
+    images: ['/og-blog.png'],
+  },
+}
 
 export default function BlogPage() {
-  return (
-    <PublicLayout>
-      <BlogListPage />
-    </PublicLayout>
-  )
+  return <BlogPageClient />
 }