feat: the SvelteKit web backup has no Open Graph / Twitter Card meta tags — shared card links show blank previews on all social platforms and messaging apps

[divyanshim27]

🚀 Problem Statement

DevCard's web backup (apps/web/) is a SvelteKit app that renders a user's card publicly at a URL like https://dev-card-web.vercel.app/card/[username]. This URL is what QR codes resolve to for receivers without the mobile app.

When a user shares this URL on Twitter/X, LinkedIn, WhatsApp, Telegram, or Slack, the link unfurl shows:

• No preview image (just a generic GitHub/Vercel placeholder)
• No description ("Connect with me on every platform")
• Generic title (just the page URL or domain name)

This is a missed opportunity — a beautiful developer card that shows GitHub stats, platform links, and a profile photo should unfurl beautifully when shared, reinforcing the product's value proposition.

Proposed Fix

In the SvelteKit card page (apps/web/src/routes/card/[username]/+page.svelte or +page.server.ts), add dynamic OG meta tags based on the card's content:

// apps/web/src/routes/card/[username]/+page.server.ts

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const card = await fetch(`/api/cards/${params.username}`).then(r => r.json());
  return { card };
};

<!-- apps/web/src/routes/card/[username]/+page.svelte -->
<script>
  export let data;
  const { card } = data;
  const title = `${card.ownerName}'s DevCard`;
  const description = `Connect with ${card.ownerName} on ${card.links.map(l => l.platform).join(', ')} — all from one link.`;
  const imageUrl = card.avatarUrl ?? 'https://dev-card-web.vercel.app/og-default.png';
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="description" content={description} />

  <!-- Open Graph -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={imageUrl} />
  <meta property="og:type" content="profile" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={imageUrl} />
</svelte:head>

Files to Modify

File	Change
apps/web/src/routes/card/[username]/+page.svelte	Add <svelte:head> with dynamic OG + Twitter Card meta tags
apps/web/src/routes/card/[username]/+page.server.ts	Load card data server-side for SSR meta tags
apps/web/static/	Add og-default.png fallback OG image

Suggested labels: enhancement, frontend, UX, level: beginner

I would like to work on this. Could you please assign it to me?

[github-actions]

Hi @divyanshim27,

Thanks for opening this issue.

Please reply with one of the following areas so the issue can be routed to the appropriate team member:

- /backend
- /web
- /mobile
- /devops

Once an area is selected, the corresponding label will be added automatically.

[divyanshim27]

Hey @maintainers,
Please assign it to me under GSSoC 2026.
/claim /assign /claim-assignment