diff --git a/content-collections.ts b/content-collections.ts
index 27d4b8eba..4b0335aee 100644
--- a/content-collections.ts
+++ b/content-collections.ts
@@ -37,6 +37,7 @@ const posts = defineCollection({
       contributors: z.string().array().optional(),
       library: libraryListSchema.optional(),
       headerImage: z.string().optional(),
+      socialImage: z.string().optional(),
       headerVideo: z.string().optional(),
       headerVideoCaptions: z.string().optional(),
       content: z.string(),
diff --git a/public/blog-assets/introducing-tanstack-redact/banner.jpg b/public/blog-assets/introducing-tanstack-redact/banner.jpg
new file mode 100644
index 000000000..c9ab47f47
Binary files /dev/null and b/public/blog-assets/introducing-tanstack-redact/banner.jpg differ
diff --git a/src/blog/introducing-tanstack-redact.md b/src/blog/introducing-tanstack-redact.md
index fce673def..930bf0c59 100644
--- a/src/blog/introducing-tanstack-redact.md
+++ b/src/blog/introducing-tanstack-redact.md
@@ -6,9 +6,10 @@ draft: false
 authors:
   - Tanner Linsley
 library: redact
+socialImage: /blog-assets/introducing-tanstack-redact/header.jpg
 ---
 
-![TanStack Redact. Your React app. Less JavaScript.](/blog-assets/introducing-tanstack-redact/header.jpg)
+![TanStack Redact](/blog-assets/introducing-tanstack-redact/banner.jpg)
 
 When I wrote [Projecting React](https://tannerlinsley.com/posts/projecting-react), I was pretty explicit about how far I wanted to take Redact. I wanted to see if a smaller implementation of the React APIs we used could work on my personal site and tanstack.com, and I was willing to keep it very specific to those two sites.
 
diff --git a/src/components/markdown/MarkdownContent.tsx b/src/components/markdown/MarkdownContent.tsx
index ea6a82009..0dad7f927 100644
--- a/src/components/markdown/MarkdownContent.tsx
+++ b/src/components/markdown/MarkdownContent.tsx
@@ -145,9 +145,13 @@ export function MarkdownContent({
           </div>
         </div>
       ) : null}
-      <div className="h-4" />
-      <div className="h-px bg-gray-500 opacity-20" />
-      <div className="h-4" />
+      {title ? (
+        <>
+          <div className="h-4" />
+          <div className="h-px bg-gray-500 opacity-20" />
+          <div className="h-4" />
+        </>
+      ) : null}
       <div
         ref={containerRef}
         className={twMerge(
diff --git a/src/routes/blog.$.tsx b/src/routes/blog.$.tsx
index 35aa0b64c..f3cf09da1 100644
--- a/src/routes/blog.$.tsx
+++ b/src/routes/blog.$.tsx
@@ -31,7 +31,9 @@ export const Route = createFileRoute('/blog/$')({
     return fetchBlogPost({ data: blogPath })
   },
   head: ({ loaderData }) => {
-    const socialImage = getBlogSocialImageUrl(loaderData?.headerImage)
+    const socialImage = getBlogSocialImageUrl(
+      loaderData?.socialImage ?? loaderData?.headerImage,
+    )
 
     return getBlogPostHead(
       loaderData ? { ...loaderData, socialImage } : undefined,
diff --git a/src/utils/blog.functions.ts b/src/utils/blog.functions.ts
index cb859c323..3482e7ded 100644
--- a/src/utils/blog.functions.ts
+++ b/src/utils/blog.functions.ts
@@ -129,6 +129,7 @@ export const fetchBlogPost = createServerFn({ method: 'GET' })
       description: post.excerpt,
       filePath: `src/blog/${data}.md`,
       headerImage: post.headerImage,
+      socialImage: post.socialImage,
       isUnpublished,
       headerVideo: post.headerVideo,
       headerVideoCaptions: post.headerVideoCaptions,