Skip to content

Commit 4f90468

Browse files
KyleAMathewsclaude
authored andcommitted
Use blog header images for social sharing (TanStack#564)
* Use blog header images for social sharing instead of generic OG image Updated blog posts to use their specific header images when shared on social media platforms (Twitter, Facebook, LinkedIn, etc.) instead of the generic TanStack OG image. This provides better visual context and engagement when blog posts are shared. Changes: - Extract header image URL from blog post markdown content - Pass header image through blog post loader - Include header image in SEO meta tags with full URL 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * Add Netlify Image CDN processing for blog social media images Process blog header images through Netlify Image CDN to optimize them for social media sharing. Images are automatically resized to 1200x630px (the standard og:image dimensions), converted to JPG format, and quality-optimized to ensure fast loading and proper display across all social platforms. Benefits: - Consistent 1200x630 dimensions for all platforms (Facebook, Twitter, LinkedIn) - Optimized file size with 80% quality JPG output - Proper aspect ratio with cover fit mode - Faster page preview generation on social media 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * Fix prettier formatting --------- Co-authored-by: Claude <[email protected]>
1 parent 0d5e18a commit 4f90468

File tree

2 files changed

+19
-0
lines changed

2 files changed

+19
-0
lines changed

content-collections.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,17 @@ const posts = defineCollection({
1212
}),
1313
transform: ({ content, ...post }) => {
1414
const frontMatter = extractFrontMatter(content)
15+
16+
// Extract header image (first image after frontmatter)
17+
const headerImageMatch = content.match(/!\[([^\]]*)\]\(([^)]+)\)/)
18+
const headerImage = headerImageMatch ? headerImageMatch[2] : undefined
19+
1520
return {
1621
...post,
1722
slug: post._meta.path,
1823
excerpt: frontMatter.excerpt,
1924
description: frontMatter.data.description,
25+
headerImage,
2026
content,
2127
}
2228
},

src/routes/_libraries/blog.$.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const fetchBlogPost = createServerFn({ method: 'GET' })
6060
published: post.published,
6161
content: post.content,
6262
authors: post.authors,
63+
headerImage: post.headerImage,
6364
filePath,
6465
}
6566
})
@@ -68,12 +69,24 @@ export const Route = createFileRoute('/_libraries/blog/$')({
6869
staleTime: Infinity,
6970
loader: ({ params }) => fetchBlogPost({ data: params._splat }),
7071
head: ({ loaderData }) => {
72+
// Generate optimized social media image URL using Netlify Image CDN
73+
const getSocialImageUrl = (headerImage?: string) => {
74+
if (!headerImage) return undefined
75+
76+
// Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image)
77+
const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent(
78+
headerImage
79+
)}&w=1200&h=630&fit=cover&fm=jpg&q=80`
80+
return netlifyImageUrl
81+
}
82+
7183
return {
7284
meta: loaderData
7385
? [
7486
...seo({
7587
title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`,
7688
description: loaderData?.description,
89+
image: getSocialImageUrl(loaderData?.headerImage),
7790
}),
7891
{
7992
name: 'author',

0 commit comments

Comments
 (0)