feat(seo): create twitter and opengraph configs #1474
Conversation
WalkthroughSeo component now accepts optional Changes
Sequence Diagram(s)sequenceDiagram
participant C as Seo Component
participant L as Logic
participant T as Twitter Meta
participant O as OpenGraph Meta
C->>L: props (title, description, image, canonical, openGraphConfig?, twitterConfig?)
alt twitterConfig present
L->>T: use twitterConfig.title/description/image
else
L->>T: use primary title/description/image
end
alt openGraphConfig present
L->>O: use openGraphConfig.title/description/image
else
L->>O: use primary title/description/image
end
alt openGraphConfig.url exists
L->>O: render og:url = openGraphConfig.url
else if canonical exists
L->>O: render og:url = canonical
else
L->>O: skip og:url
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
Tagging OptionsShould a new tag be published when this PR is merged?
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
website/components/Seo.tsx (1)
43-56: Consider addingurltotwitterConfigfor consistency.Twitter cards support a
twitter:urlmeta tag, buttwitterConfigonly includes title, description, and image fields. While this may be intentional, it creates an asymmetry withopenGraphConfigwhich does include aurlfield.If you'd like to add it, apply this diff:
/** @title Twitter Config */ twitterConfig?: { title?: string; description?: string; image?: ImageWidget; + url?: string; };Then update the Twitter meta tags section to use it:
+{twitterConfig?.url && <meta property="twitter:url" content={twitterConfig.url} />}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/components/Seo.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
website/components/Seo.tsx (1)
admin/widgets.ts (1)
ImageWidget(4-4)
🔇 Additional comments (2)
website/components/Seo.tsx (2)
72-73: LGTM!Props destructuring correctly includes the new configuration objects.
107-109: Excellent solution to the og:url pagination issue!The conditional rendering with priority given to
openGraphConfig?.urlovercanonicaldirectly addresses the pagination problem described in the PR objectives. This prevents query parameters from leaking into social media previews while maintaining backward compatibility.
pedrobernardina
force-pushed
the
feat/og-and-twitter-seo-config
branch
from
af06bbb to
79ef339
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
website/components/Seo.tsx (1)
81-91: Avoid redundant sanitization by reusing sanitized variables.The fallback chains re-sanitize
tanddescwhen config values are absent, but lines 78-79 have already sanitized them intotitleanddescription. Reusing the sanitized variables would be more efficient and follow the DRY principle.Apply this diff to eliminate duplicate sanitization:
- const twitterTitle = stripHTML(twitterConfig?.title ?? t); - const twitterDescription = stripHTML( - twitterConfig?.description ?? desc ?? "", - ); + const twitterTitle = twitterConfig?.title + ? stripHTML(twitterConfig.title) + : title; + const twitterDescription = twitterConfig?.description + ? stripHTML(twitterConfig.description) + : description; const twitterImage = twitterConfig?.image ?? image; - const openGraphTitle = stripHTML(openGraphConfig?.title ?? t); - const openGraphDescription = stripHTML( - openGraphConfig?.description ?? desc ?? "", - ); + const openGraphTitle = openGraphConfig?.title + ? stripHTML(openGraphConfig.title) + : title; + const openGraphDescription = openGraphConfig?.description + ? stripHTML(openGraphConfig.description) + : description; const openGraphImage = openGraphConfig?.image ?? image;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/components/Seo.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
website/components/Seo.tsx (1)
admin/widgets.ts (1)
ImageWidget(4-4)
🔇 Additional comments (3)
website/components/Seo.tsx (3)
43-56: LGTM! Clean interface additions.The new
openGraphConfigandtwitterConfigprops are well-structured and maintain backward compatibility. The inclusion ofurlonly in OpenGraph config aligns with the PR objective of fixingog:urlbehavior for pagination scenarios.
78-91: Past review feedback has been addressed.The sanitization concerns raised in previous reviews have been resolved—
stripHTMLis now correctly applied to bothtwitterConfigandopenGraphConfigvalues before rendering them in meta tags.
120-122: Well-implemented conditionalog:urllogic.The conditional rendering of
og:urlcorrectly prioritizesopenGraphConfig.urlovercanonical, which addresses the core PR objective of preventing pagination parameters from leaking into OpenGraph metadata.
pedrobernardina
force-pushed
the
feat/og-and-twitter-seo-config
branch
from
79ef339 to
d844c64
Compare
2 participants
Motivation
Previously, all OpenGraph (
og:*) and Twitter meta tags implicitly inherited the global SEO values (title,description,image,canonical).This caused two practical issues:
No way to override OG/Twitter metadata per page, which is required for custom PLPs, hybrid routes, and cases where canonical and social URLs differ.
og:urlalways reused the canonical URL, meaning pagination parameters like?pageleaked into OG metadata.Social platforms treat
og:urlas a cache key, which led to:This PR introduces explicit override support for OG and Twitter configurations, restoring full control while remaining fully backward compatible.
✅ What’s Included
Added
openGraphConfigandtwitterConfigoverridesThe following OG fields now support page-level overrides:
titledescriptionimageurlSummary by CodeRabbit