From 1f0cf083b980ccd5b0614c1862241e62c26e30f2 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 4 Dec 2025 16:06:31 -0700 Subject: [PATCH 1/3] Use blog header images for social sharing instead of generic OG image MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- content-collections.ts | 6 ++++++ src/routes/_libraries/blog.$.tsx | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/content-collections.ts b/content-collections.ts index 577e5172a..a0baa04bc 100644 --- a/content-collections.ts +++ b/content-collections.ts @@ -12,11 +12,17 @@ const posts = defineCollection({ }), transform: ({ content, ...post }) => { const frontMatter = extractFrontMatter(content) + + // Extract header image (first image after frontmatter) + const headerImageMatch = content.match(/!\[([^\]]*)\]\(([^)]+)\)/) + const headerImage = headerImageMatch ? headerImageMatch[2] : undefined + return { ...post, slug: post._meta.path, excerpt: frontMatter.excerpt, description: frontMatter.data.description, + headerImage, content, } }, diff --git a/src/routes/_libraries/blog.$.tsx b/src/routes/_libraries/blog.$.tsx index 82ccac2f3..88d0569ac 100644 --- a/src/routes/_libraries/blog.$.tsx +++ b/src/routes/_libraries/blog.$.tsx @@ -60,6 +60,7 @@ const fetchBlogPost = createServerFn({ method: 'GET' }) published: post.published, content: post.content, authors: post.authors, + headerImage: post.headerImage, filePath, } }) @@ -74,6 +75,9 @@ export const Route = createFileRoute('/_libraries/blog/$')({ ...seo({ title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`, description: loaderData?.description, + image: loaderData?.headerImage + ? `https://tanstack.com${loaderData.headerImage}` + : undefined, }), { name: 'author', From cea28d9fc6e8ca58d7148e2443846cd9287928db Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 4 Dec 2025 17:05:59 -0700 Subject: [PATCH 2/3] Add Netlify Image CDN processing for blog social media images MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/routes/_libraries/blog.$.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/routes/_libraries/blog.$.tsx b/src/routes/_libraries/blog.$.tsx index 88d0569ac..b42f96693 100644 --- a/src/routes/_libraries/blog.$.tsx +++ b/src/routes/_libraries/blog.$.tsx @@ -69,15 +69,22 @@ export const Route = createFileRoute('/_libraries/blog/$')({ staleTime: Infinity, loader: ({ params }) => fetchBlogPost({ data: params._splat }), head: ({ loaderData }) => { + // Generate optimized social media image URL using Netlify Image CDN + const getSocialImageUrl = (headerImage?: string) => { + if (!headerImage) return undefined + + // Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image) + const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent(headerImage)}&w=1200&h=630&fit=cover&fm=jpg&q=80` + return netlifyImageUrl + } + return { meta: loaderData ? [ ...seo({ title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`, description: loaderData?.description, - image: loaderData?.headerImage - ? `https://tanstack.com${loaderData.headerImage}` - : undefined, + image: getSocialImageUrl(loaderData?.headerImage), }), { name: 'author', From ef0622c4b6733351c57a28b6c2e4e5feec13848d Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 4 Dec 2025 17:10:54 -0700 Subject: [PATCH 3/3] Fix prettier formatting --- src/routes/_libraries/blog.$.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/routes/_libraries/blog.$.tsx b/src/routes/_libraries/blog.$.tsx index b42f96693..d1d4b6a04 100644 --- a/src/routes/_libraries/blog.$.tsx +++ b/src/routes/_libraries/blog.$.tsx @@ -74,7 +74,9 @@ export const Route = createFileRoute('/_libraries/blog/$')({ if (!headerImage) return undefined // Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image) - const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent(headerImage)}&w=1200&h=630&fit=cover&fm=jpg&q=80` + const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent( + headerImage + )}&w=1200&h=630&fit=cover&fm=jpg&q=80` return netlifyImageUrl }