feat(announcements): add SEO metadata via server layout.tsx#1300
feat(announcements): add SEO metadata via server layout.tsx#1300mvanhorn wants to merge 1 commit intoMODSetter:mainfrom
Conversation
The announcements page is a public, crawlable route but its page.tsx is 'use client', so it can't export metadata itself and falls back to the root app/layout.tsx. Add a server-component layout.tsx under app/(home)/announcements/ that exports route-specific metadata (title, description, canonical, OpenGraph, Twitter) in the same shape as the neighboring /blog, /changelog, /contact, /privacy, /terms routes. page.tsx is unchanged. Canonical URL matches app/layout.tsx's metadataBase (https://surfsense.com). Fixes MODSetter#1244
|
@mvanhorn is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds a server-side layout component to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
surfsense_web/app/(home)/announcements/layout.tsx (2)
23-25: Nit: drop the fragment wrapper.A layout that only renders
childrencan return them directly; the<>…</>wrapper adds no value.♻️ Proposed refactor
-export default function AnnouncementsLayout({ children }: { children: ReactNode }) { - return <>{children}</>; -} +export default function AnnouncementsLayout({ children }: { children: ReactNode }) { + return children; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@surfsense_web/app/`(home)/announcements/layout.tsx around lines 23 - 25, The AnnouncementsLayout function currently returns children wrapped in a React fragment; remove the unnecessary fragment wrapper in the AnnouncementsLayout component and return the children directly (i.e., have AnnouncementsLayout return the children value instead of <>children</>) to simplify the render.
7-15: Consider relative URLs to leveragemetadataBase.The root
app/layout.tsxsetsmetadataBase: new URL("https://surfsense.com"), which allows child routes to use relative paths (e.g./announcements) foralternates.canonicalandopenGraph.url. Next.js will resolve them againstmetadataBaseautomatically, avoiding hardcoded domains in every route and making environment/domain changes a single-file edit.Neighboring routes like
/blogalso currently hardcode absolute URLs, so adopting relative URLs here would improve on the existing pattern.♻️ Proposed refactor
alternates: { - canonical: "https://surfsense.com/announcements", + canonical: "/announcements", }, openGraph: { title: "Announcements | SurfSense", description: "Latest product updates, feature releases, and news from SurfSense.", - url: "https://surfsense.com/announcements", + url: "/announcements", type: "website", },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@surfsense_web/app/`(home)/announcements/layout.tsx around lines 7 - 15, Replace the hardcoded absolute URLs in this announcements route with relative paths so Next.js resolves them against the root metadataBase; specifically change alternates.canonical and openGraph.url in announcements layout.tsx from "https://surfsense.com/announcements" to the relative path "/announcements" (leave title/description/type unchanged) so environment/domain changes are centralized in the root app/layout.tsx metadataBase.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@surfsense_web/app/`(home)/announcements/layout.tsx:
- Around line 23-25: The AnnouncementsLayout function currently returns children
wrapped in a React fragment; remove the unnecessary fragment wrapper in the
AnnouncementsLayout component and return the children directly (i.e., have
AnnouncementsLayout return the children value instead of <>children</>) to
simplify the render.
- Around line 7-15: Replace the hardcoded absolute URLs in this announcements
route with relative paths so Next.js resolves them against the root
metadataBase; specifically change alternates.canonical and openGraph.url in
announcements layout.tsx from "https://surfsense.com/announcements" to the
relative path "/announcements" (leave title/description/type unchanged) so
environment/domain changes are centralized in the root app/layout.tsx
metadataBase.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 287e473b-cc80-4c5b-bce5-169550bf9eef
📒 Files selected for processing (1)
surfsense_web/app/(home)/announcements/layout.tsx
|
@mvanhorn Please raise PR's on |
|
Got it, thanks for the pointer. Reopened against |
2 participants
Fixes #1244
What changed
/announcementsis a public, crawlable route but itspage.tsxis"use client", so it can't exportmetadatadirectly and was falling back to the rootapp/layout.tsx's generic title/description.Adds a server-component
surfsense_web/app/(home)/announcements/layout.tsxthat exports route-specific metadata and passes children through. Same shape as the neighboring/blog,/changelog,/contact,/privacy,/termsroutes.Notes
app/layout.tsx'smetadataBase—https://surfsense.com/announcements(not.netas the issue example used).page.tsxis unchanged.<>{children}</>, so existing behavior (auto-mark-read, layout.tsx in parent(home)group) is preserved.High-level PR Summary
This PR adds SEO metadata to the
/announcementsroute by introducing a server-componentlayout.tsxfile. Since the existingpage.tsxis a client component and cannot export metadata directly, this new layout provides route-specific title, description, canonical URL, OpenGraph tags, and Twitter card metadata while passing through children unchanged. This ensures search engines and social media platforms display proper metadata for the announcements page.⏱️ Estimated Review Time: 5-15 minutes
💡 Review Order Suggestion
surfsense_web/app/(home)/announcements/layout.tsxSummary by CodeRabbit