Summary

Product doc section 5.13 specifies every DevCard user gets a permanent URL like devcard.dev/username. The public profile route exists at apps/backend/src/routes/public.ts and the web route at apps/web/src/routes/u/[username]. Make this page SEO-ready with proper Open Graph meta tags, Twitter Card metadata, and a server-side rendered preview.

Context

This is critical for organic growth — every shared DevCard link should render a rich preview in Slack, Twitter, Discord, and WhatsApp showing the user's name, avatar, and platform count.

Tasks

• in apps/web/src/routes/u/[username]/+page.server.ts, ensure the loader fetches displayName, bio, avatarUrl, and platform link count from the backend.
• update apps/web/src/routes/u/[username]/+page.svelte to use Svelte <svelte:head> to inject:
  • <title>{displayName} | DevCard</title>.
  • <meta name="description"> with bio and platform summary.
  • <meta property="og:title">, og:description, og:image (use avatarUrl), og:url.
  • <meta name="twitter:card" content="summary"> and related Twitter Card tags.
• add a backend endpoint GET /api/public/:username/og-image that returns a dynamically generated PNG preview card using @vercel/og or satori + resvg-js (server-side).
• the OG image should show: avatar, display name, bio, platform icons list.
• add canonical URL tag.
• test OG metadata renders correctly using the OpenGraph debugger after deployment or via unit assertions on the loader output.

Acceptance Criteria

• sharing a DevCard URL in Slack/Twitter/Discord shows a rich preview with name, bio, and avatar image.
• OG image is generated server-side and cached.
• page has correct canonical URL.
• all meta tags pass OpenGraph.xyz validation.

Difficulty

advanced — requires server-side image generation, SSR meta injection, and understanding of OG/Twitter card specifications.