Invoice Public Page Open Graph and SEO Metadata

[Kingsman-99]

Description

Sharing a public invoice status link on social media or in a messaging app generates a blank preview because the page lacks Open Graph meta tags. Proper OG and Twitter card metadata generated server-side from the invoice record must be added to the public invoice route.

Technical Context

src/app/invoice/[id]/public/page.tsx (or the existing public page route) uses Next.js App Router's generateMetadata async export to fetch the invoice and return { openGraph: { title, description, images } }. The OG image is a dynamic Next.js Image Response from src/app/og/route.tsx (new) using the @vercel/og package, rendering the invoice title, total, and status in a branded card layout. generateMetadata sets a robots: 'noindex' directive for draft invoices.

Acceptance Criteria

• Pasting a public invoice URL into Slack or Twitter generates a preview card with the invoice title and amount
• The <title> tag reads "Invoice #<id> — StellarSplit" or similar
• The OG image is generated server-side and includes the invoice title, status, and total amount
• Draft invoice pages include <meta name="robots" content="noindex"> to prevent indexing
• generateMetadata does not block render; it runs in parallel with the page data fetch
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[Tobi-8]

Please maintainer assign me to this issue
I have the knowledge and skill to complete this task

[Malcolm-Wander]

@Malcolm-Wander has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer,I’d love to work on this issue please,I promise to do a good and swift job..thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Malcolm-Wander to this issue.

[Kaizer4show]

@Kaizer4show has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, I would like to work on this issue please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kaizer4show to this issue.

[Peaostrel]

@Peaostrel has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

i can handle this quickly

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Peaostrel to this issue.

[Elvinique]

@Elvinique has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainers,

I’d like to take on this issue to implement Open Graph and SEO metadata for public invoice pages.

My execution plan:

Dynamic Metadata (generateMetadata): Implement Next.js generateMetadata in src/app/invoice/[id]/public/page.tsx to set the title format (Invoice # — StellarSplit), description, and Open Graph / Twitter card parameters without blocking page render.

Dynamic OG Image Endpoint: Create src/app/og/route.tsx using @vercel/og (ImageResponse) to generate a branded social card displaying the invoice title, status, and total amount.

Draft Privacy Control: Ensure robots: 'noindex' is conditionally added to the metadata response whenever the invoice status is draft.

Testing & Quality Assurance: Verify that parallel data fetching works efficiently, pass all CI checks (npm test, npm run build, ESLint, and TypeScript), and ensure zero merge conflicts.

I have extensive experience with Next.js App Router, TypeScript, dynamic metadata generation, and @vercel/og image rendering.

Ready to start immediately—please assign this to me!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Elvinique to this issue.

[aliyuHabibu]

@aliyuHabibu has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer please assign this issue to me. Thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @aliyuHabibu to this issue.

[enochakinbode]

@enochakinbode has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I can add server-side metadata and OG image generation for the public invoice route.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @enochakinbode to this issue.

[favourawaku]

@favourawaku has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @favourawaku to this issue.

[drips-wave]

Congratulations, @favourawaku! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @favourawaku: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊