feat(web): dynamic metadata and JSON-LD structured data for vault detail pages (#229)

[osaigbovotestimony7-sys]

Overview

Implements dynamic Open Graph and Twitter Card metadata generation (generateMetadata()) and Schema.org structured data (JSON-LD) for vault detail pages (/vault/[id]), while extending the SEO component to support dynamic tags and structured data.

Related Issue

Closes #229

Changes

Web SEO & Dynamic Metadata

• [MODIFY] web/components/SEO.tsx
  • Added jsonLd, customOg, ogType, and twitterCard props to SeoProps.
  • Render <script type="application/ld+json"> for structured data and dynamic Open Graph tags.
• [ADD] web/lib/vault-metadata.ts
  • buildVaultMetadata: Generates dynamic Next.js Metadata with Open Graph tags containing vault name, balance, and APY.
  • buildVaultJsonLd: Generates Schema.org FinancialProduct structured data.
  • buildVaultOgTags: Generates custom OG dictionary for vault metrics.
  • fetchVaultData: Fetches or resolves vault data with fallback support.
• [ADD] web/app/vault/[id]/page.tsx
  • Implemented generateMetadata() for App Router dynamic vault detail route.
  • Server Component rendering vault details and JSON-LD structured data script.
• [ADD] web/app/vaults/[id]/page.tsx
  • Re-exports vault detail page for pluralized route.
• [ADD] web/pages/vault/[id].tsx
  • Pages Router vault detail page using enhanced SEO component with JSON-LD and custom OG tags.
• [ADD] web/__tests__/vault-metadata.test.cjs
  • Unit test suite verifying dynamic metadata, JSON-LD generation, OG tags, and SEO component compatibility.

Verification Results

$ npm test
TAP version 13
# tests 70
# suites 6
# pass 70
# fail 0
# cancelled 0
# skipped 0
# todo 0
# duration_ms 83.814417

Acceptance Criteria	Status
Implement generateMetadata() for dynamic vault pages	✅ Implemented in web/app/vault/[id]/page.tsx with dynamic params resolution
Include vault name, balance, and APY in OG tags	✅ Added to openGraph.title, openGraph.description, twitter, and custom vault:* OG tags
Add structured data (JSON-LD) for search engine indexing	✅ Generated Schema.org FinancialProduct JSON-LD rendered in script tags

[drips-wave]

@osaigbovotestimony7-sys Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits