feat: stream discovery and seo improvements

[davedumto]

Overview

StreamFi streams and creator pages are currently not optimised for search engines or social sharing. This issue covers all the SEO/discovery work needed to make the platform findable and shareable.

1. Open Graph metadata for live stream pages

/[username]/watch currently has no OG metadata. When someone shares a live stream link it shows a blank preview.

• Create app/[username]/watch/layout.tsx with generateMetadata
• Use Mux thumbnail (https://image.mux.com/{playbackId}/thumbnail.jpg) as OG image
• Title: {streamTitle} — {username} is live on StreamFi
• Add app/[username]/watch/opengraph-image.tsx for a branded live card (similar to clips pattern in app/[username]/clips/[id]/opengraph-image.tsx)

2. Creator profile OG metadata

/[username] layout already has app/[username]/layout.tsx but the OG image uses a generic template. Improve it:

• Show creator avatar, username, follower count, bio
• If currently live: add "LIVE" badge on the card
• Reference: app/[username]/opengraph-image.tsx

3. Structured data (JSON-LD)

Add JSON-LD to key pages for rich Google results:

Creator profile (/[username]):

{
  "@type": "Person",
  "name": "{username}",
  "description": "{bio}",
  "image": "{avatar}",
  "url": "https://streamfi.xyz/{username}"
}

Live stream (/[username]/watch):

{
  "@type": "VideoObject",
  "name": "{streamTitle}",
  "description": "{bio}",
  "thumbnailUrl": "{muxThumbnail}",
  "uploadDate": "{startedAt}",
  "publication": {
    "@type": "BroadcastEvent",
    "isLiveBroadcast": true
  }
}

Past stream / clip (/[username]/clips/[id]):

{
  "@type": "VideoObject",
  "name": "{title}",
  "thumbnailUrl": "{muxThumbnail}",
  "duration": "PT{duration}S"
}

4. Dynamic sitemap

The current sitemap at /sitemap.xml is static. Replace with a dynamic one:

• All creator profile pages (/[username])
• All public recordings (/[username]/clips/[id])
• Category pages (/browse/category/[title])
• Priority: live streams > recordings > profiles

app/sitemap.ts using Next.js MetadataRoute.Sitemap:

export default async function sitemap(): Promise<MetadataRoute.Sitemap> { ... }

5. Category and browse page SEO

• app/browse/category/[title]/page.tsx — add generateMetadata with category description
• app/explore/ pages — add canonical tags and meta descriptions
• Add <meta name="description"> to browse/live pages

6. robots.txt improvements

Current robots.txt (check if it exists). Should:

• Allow all crawlers on public pages
• Disallow /api/, /dashboard/, /settings/, /admin/, /onboarding/
• Point to sitemap URL

7. Stream tags / categories in HTML

Stream tags exist in the DB (creator.tags). Make them visible in page <meta keywords> and as semantic HTML on the profile page for search indexing.

8. Canonical URLs

Add <link rel="canonical"> to:

• Creator profile: https://streamfi.xyz/{username}
• Live stream: https://streamfi.xyz/{username}/watch
• Clips: https://streamfi.xyz/{username}/clips/{id}

Acceptance criteria

• Live stream pages have full OG metadata + branded image card
• Creator profiles have improved OG image (avatar, follower count, live badge)
• JSON-LD structured data on profile, live, and clip pages
• Dynamic sitemap covers all public creator and clip pages
• Category pages have generateMetadata with descriptions
• robots.txt blocks private routes, links to sitemap
• Canonical tags on all public pages
• Lighthouse SEO score ≥ 90 on profile and stream pages

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave