diff --git a/src/components/common/SEOHead.tsx b/src/components/common/SEOHead.tsx
new file mode 100644
index 00000000..de74ea31
--- /dev/null
+++ b/src/components/common/SEOHead.tsx
@@ -0,0 +1,25 @@
+import Head from "next/head"
+
+export const SEOHead: React.FC<{
+  title: string
+  description?: string | null
+  image?: string | null
+}> = ({ title, description, image }) => {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="og:title" content={title} />
+      <meta name="twitter:title" content={title} />
+      <meta name="description" content={description || ""} />
+      <meta name="og:description" content={description || ""} />
+      <meta name="twitter:description" content={description || ""} />
+      <meta name="twitter:card" content="summary" />
+      {image && (
+        <>
+          <meta name="og:image" content={image} />
+          <meta name="twitter:image" content={image} />
+        </>
+      )}
+    </Head>
+  )
+}
diff --git a/src/components/site/SiteHome.tsx b/src/components/site/SiteHome.tsx
index 33657de9..0bae7e3d 100644
--- a/src/components/site/SiteHome.tsx
+++ b/src/components/site/SiteHome.tsx
@@ -3,8 +3,9 @@ import { formatDate } from "~/lib/date"
 import { Paginated, type PostOnSiteHome } from "~/lib/types"
 
 export const SiteHome: React.FC<{
-  posts: Paginated<PostOnSiteHome>
+  posts?: Paginated<PostOnSiteHome>
 }> = ({ posts }) => {
+  if (!posts) return null
   return (
     <div className="space-y-14">
       {posts.nodes.map((post) => {
diff --git a/src/components/site/SiteLayout.tsx b/src/components/site/SiteLayout.tsx
index 4ff7347c..0d8bca47 100644
--- a/src/components/site/SiteLayout.tsx
+++ b/src/components/site/SiteLayout.tsx
@@ -11,7 +11,7 @@ import { UniLink } from "../ui/UniLink"
 import { IS_PROD } from "~/lib/constants"
 import { OUR_DOMAIN } from "~/lib/env"
 import { useRouter } from "next/router"
-import Head from "next/head"
+import { SEOHead } from "../common/SEOHead"
 
 type MenuLink = {
   text: string
@@ -162,11 +162,15 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
     },
   ].filter(truthy)
 
+  const docTitle = title ? `${title} - ${site.name}` : site.name
+
   return (
     <>
-      <Head>
-        <title>{title ? `${title} - ${site.name}` : site.name}</title>
-      </Head>
+      <SEOHead
+        title={docTitle}
+        description={site.description}
+        image={getUserContentsUrl(site.icon)}
+      />
       <div>
         <Header
           links={links}
diff --git a/src/components/site/SitePage.tsx b/src/components/site/SitePage.tsx
index bbca6c82..288ed7b4 100644
--- a/src/components/site/SitePage.tsx
+++ b/src/components/site/SitePage.tsx
@@ -1,5 +1,6 @@
 import type { PageType } from "@prisma/client"
 import { formatDate } from "~/lib/date"
+import { SEOHead } from "../common/SEOHead"
 
 export const SitePage: React.FC<{
   page: {
diff --git a/src/pages/_site/[site]/index.tsx b/src/pages/_site/[site]/index.tsx
index 68dd346b..0e0159c9 100644
--- a/src/pages/_site/[site]/index.tsx
+++ b/src/pages/_site/[site]/index.tsx
@@ -34,6 +34,7 @@ function SiteIndexPage({
   domainOrSubdomain: string
 }) {
   const siteResult = trpc.useQuery(["site", { site: domainOrSubdomain }], {})
+
   const subscriptionResult = trpc.useQuery([
     "site.subscription",
     { site: domainOrSubdomain },
@@ -44,10 +45,12 @@ function SiteIndexPage({
   const subscription = subscriptionResult.data
   const posts = postsResult.data
 
-  if (!site || !posts) return null
-
   return (
-    <SiteLayout site={site} isLoggedIn={isLoggedIn} subscription={subscription}>
+    <SiteLayout
+      site={site!}
+      isLoggedIn={isLoggedIn}
+      subscription={subscription}
+    >
       <SiteHome posts={posts} />
     </SiteLayout>
   )
