Skip to content

Conversation

@KyleAMathews
Copy link
Contributor

Summary

  • Updated blog posts to use their specific header images for social media sharing (og:image, twitter:image) instead of the generic TanStack OG image
  • Extracts the header image URL from blog post markdown content (first image after frontmatter)
  • Includes the full URL in SEO meta tags for proper social media preview cards

Test plan

  • Verify that blog post pages now include the correct header image in meta tags
  • Test social media preview with a tool like https://www.opengraph.xyz/
  • Confirm fallback to generic image still works if a post has no header image

🤖 Generated with Claude Code

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]>
@netlify
Copy link

netlify bot commented Dec 4, 2025

Deploy Preview for tanstack ready!

Name Link
🔨 Latest commit ef0622c
🔍 Latest deploy log https://app.netlify.com/projects/tanstack/deploys/693223120628160008dcc067
😎 Deploy Preview https://deploy-preview-564--tanstack.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 14 (🔴 down 5 from production)
Accessibility: 83 (no change from production)
Best Practices: 83 (no change from production)
SEO: 98 (no change from production)
PWA: 70 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

KyleAMathews and others added 2 commits December 4, 2025 17:05
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]>
@tannerlinsley tannerlinsley merged commit 0cce78b into TanStack:main Dec 5, 2025
5 of 6 checks passed
LadyBluenotes pushed a commit to LadyBluenotes/tanstack.com that referenced this pull request Dec 5, 2025
* 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]>
KyleAMathews added a commit to electric-sql/electric that referenced this pull request Dec 9, 2025
Process blog post header images through Netlify Image CDN for optimized
social media previews (og:image and twitter:card). Images are:
- Resized to 1200x630px (standard social media dimensions)
- Converted to JPG format
- Compressed to 80% quality
- Cropped using cover fit mode

This ensures blog posts display properly formatted preview cards on
Twitter, LinkedIn, Facebook, and other social platforms.

Pattern based on TanStack implementation:
TanStack/tanstack.com#564

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants