feat(blog): wire per-post OG/Twitter image into the blog route - #114
Conversation
The blog post route set no openGraph.images and read no image field, so social
shares had no card image. Now:
- lib/blog.ts: BlogPostMeta gains `ogImage`. resolveOgImage() takes an explicit
`og_image`/`ogImage` frontmatter override, else the per-post asset convention
public/blog/<slug>/og.{webp,png}. Returns a root-relative path or null.
- blog/[slug]/page.tsx: generateMetadata sets openGraph.images + a twitter
summary_large_image card ONLY when an OG image resolves; otherwise behavior is
unchanged (no regression for posts without an asset).
Convention-driven, so posts auto-pick up their og.webp with no frontmatter and
no publish-draft.mjs change. tsc --noEmit clean.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FkVj9JkUhTpetCHUM52hsX
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 51 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
What
The blog post route (
app/blog/[slug]/page.tsx) set noopenGraph.imagesand read no image field, so blog shares rendered a card with no image. This wires per-post OG + Twitter images.How
lib/blog.ts—BlogPostMetagainsogImage: string | null.resolveOgImage(slug, data)takes an explicitog_image/ogImagefrontmatter override, else the per-post asset conventionpublic/blog/<slug>/og.{webp,png}. Root-relative path or null.blog/[slug]/page.tsx—generateMetadataaddsopenGraph.images+ atwittersummary_large_imagecard only when an OG image resolves. No asset → unchanged (card stayssummary, no image) — zero regression for existing posts.Why convention-driven
Posts auto-pick up their
og.webpwith no frontmatter and nopublish-draft.mjschange. The how-to-do-meeting-minutes post (PR #113) already shipspublic/blog/how-to-do-meeting-minutes/og.webp, so it gets a real card the moment both merge.Verification
npx tsc --noEmit— 0 errors. Additive + conditional; dormant for every post that has no OG asset.Security
Build-time only.
fs.existsSyncon an author-controlled slug (trusted content, not runtime user input), read-only existence check. No runtime attack surface.🤖 Generated with Claude Code