From 7ea764b1a7cb95e14d8d607154b6066699641c38 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Tue, 23 Dec 2025 16:52:35 -0800
Subject: [PATCH] Implement general admission tags/routes in web SSR

---
 .../web/src/components/meta-tags/MetaTags.tsx |  85 ++++++-
 packages/web/src/ssr/audio/+Page.tsx          |   5 +
 packages/web/src/ssr/audio/+onRenderHtml.tsx  |  41 ++++
 packages/web/src/ssr/audio/+route.ts          |   4 +
 .../web/src/ssr/collection/+onRenderHtml.tsx  |  19 +-
 packages/web/src/ssr/download/+Page.tsx       |   5 +
 .../web/src/ssr/download/+onRenderHtml.tsx    |  41 ++++
 packages/web/src/ssr/download/+route.ts       |   4 +
 packages/web/src/ssr/explore/+Page.tsx        |   5 +
 .../web/src/ssr/explore/+onRenderHtml.tsx     |  56 +++++
 packages/web/src/ssr/explore/+route.ts        |   7 +
 packages/web/src/ssr/metaTags.ts              | 231 ++++++++++++++++++
 .../web/src/ssr/profile/+onRenderHtml.tsx     |   7 +-
 packages/web/src/ssr/remixes/+Page.tsx        |   5 +
 .../web/src/ssr/remixes/+onBeforeRender.tsx   |  59 +++++
 .../web/src/ssr/remixes/+onRenderHtml.tsx     |  63 +++++
 packages/web/src/ssr/remixes/+route.ts        |   4 +
 packages/web/src/ssr/signup/+Page.tsx         |   5 +
 packages/web/src/ssr/signup/+onRenderHtml.tsx |  56 +++++
 packages/web/src/ssr/signup/+route.ts         |   4 +
 .../web/src/ssr/track/+onBeforeRender.tsx     |  48 +++-
 packages/web/src/ssr/track/+onRenderHtml.tsx  |  66 ++++-
 packages/web/src/ssr/upload/+Page.tsx         |   5 +
 packages/web/src/ssr/upload/+onRenderHtml.tsx |  41 ++++
 packages/web/src/ssr/upload/+route.ts         |   4 +
 25 files changed, 853 insertions(+), 17 deletions(-)
 create mode 100644 packages/web/src/ssr/audio/+Page.tsx
 create mode 100644 packages/web/src/ssr/audio/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/audio/+route.ts
 create mode 100644 packages/web/src/ssr/download/+Page.tsx
 create mode 100644 packages/web/src/ssr/download/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/download/+route.ts
 create mode 100644 packages/web/src/ssr/explore/+Page.tsx
 create mode 100644 packages/web/src/ssr/explore/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/explore/+route.ts
 create mode 100644 packages/web/src/ssr/metaTags.ts
 create mode 100644 packages/web/src/ssr/remixes/+Page.tsx
 create mode 100644 packages/web/src/ssr/remixes/+onBeforeRender.tsx
 create mode 100644 packages/web/src/ssr/remixes/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/remixes/+route.ts
 create mode 100644 packages/web/src/ssr/signup/+Page.tsx
 create mode 100644 packages/web/src/ssr/signup/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/signup/+route.ts
 create mode 100644 packages/web/src/ssr/upload/+Page.tsx
 create mode 100644 packages/web/src/ssr/upload/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/upload/+route.ts

diff --git a/packages/web/src/components/meta-tags/MetaTags.tsx b/packages/web/src/components/meta-tags/MetaTags.tsx
index f9404845451..90a3341c67a 100644
--- a/packages/web/src/components/meta-tags/MetaTags.tsx
+++ b/packages/web/src/components/meta-tags/MetaTags.tsx
@@ -30,6 +30,27 @@ export type MetaTagsProps = {
    * Hash ID for OG URL generation (id field from entities)
    */
   hashId?: string
+  /**
+   * Whether to show embed player (for Twitter/Discord)
+   */
+  embed?: boolean
+  /**
+   * URL to the embed player (e.g. /embed/track/xyz?flavor=card&twitter=true)
+   */
+  embedUrl?: string
+  /**
+   * Deep link URL for mobile apps (e.g. audius://track/xyz)
+   */
+  appUrl?: string
+  /**
+   * Web URL for the current page (e.g. https://audius.co/track/xyz)
+   */
+  webUrl?: string
+  /**
+   * Whether the image shows as a small thumbnail version.
+   * Controls twitter:card type (summary vs summary_large_image)
+   */
+  thumbnail?: boolean
 }
 
 /**
@@ -70,7 +91,12 @@ export const MetaTags = (props: MetaTagsProps) => {
     structuredData,
     noIndex = false,
     entityType,
-    hashId
+    hashId,
+    embed = false,
+    embedUrl,
+    appUrl,
+    webUrl,
+    thumbnail = true
   } = props
 
   const formattedTitle = title
@@ -80,6 +106,13 @@ export const MetaTags = (props: MetaTagsProps) => {
   // Generate OG URL if entity type and hash ID are provided
   const ogUrl = generateOgUrl(entityType, hashId)
 
+  // Determine twitter card type based on thumbnail and embed settings
+  const getTwitterCardType = () => {
+    if (thumbnail) return 'summary'
+    if (embed && embedUrl) return 'player'
+    return 'summary_large_image'
+  }
+
   return (
     <>
       {/* noIndex */}
@@ -124,6 +157,12 @@ export const MetaTags = (props: MetaTagsProps) => {
         <Helmet encodeSpecialCharacters={false}>
           <meta property='og:image' content={image} />
           <meta name='twitter:image' content={image} />
+          {thumbnail ? null : (
+            <>
+              <meta property='og:image:width' content='1000' />
+              <meta property='og:image:height' content='1000' />
+            </>
+          )}
         </Helmet>
       ) : null}
 
@@ -134,11 +173,53 @@ export const MetaTags = (props: MetaTagsProps) => {
         </Helmet>
       ) : null}
 
+      {/* OG Type and Twitter Card */}
       <Helmet encodeSpecialCharacters={false}>
         <meta property='og:type' content='website' />
-        <meta name='twitter:card' content='summary' />
+        <meta name='twitter:card' content={getTwitterCardType()} />
       </Helmet>
 
+      {/* Twitter Player (for embeds) */}
+      {embed && embedUrl ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta name='twitter:player' content={embedUrl} />
+          <meta name='twitter:player:width' content='480' />
+          <meta name='twitter:player:height' content='480' />
+        </Helmet>
+      ) : null}
+
+      {/* Twitter App Links */}
+      {appUrl ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta name='twitter:app:name:iphone' content='Audius Music' />
+          <meta name='twitter:app:id:iphone' content='1491270519' />
+          <meta name='twitter:app:url:iphone' content={appUrl} />
+          <meta name='twitter:app:name:ipad' content='Audius Music' />
+          <meta name='twitter:app:id:ipad' content='1491270519' />
+          <meta name='twitter:app:url:ipad' content={appUrl} />
+          <meta name='twitter:app:name:googleplay' content='Audius Music' />
+          <meta name='twitter:app:id:googleplay' content='co.audius.app' />
+          <meta name='twitter:app:url:googleplay' content={appUrl} />
+        </Helmet>
+      ) : null}
+
+      {/* Farcaster Frame */}
+      {webUrl ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta property='fc:frame' content='vNext' />
+          <meta property='fc:frame:image:aspect_ratio' content='1:1' />
+          <meta property='fc:frame:button:1' content='Listen on Audius!' />
+          <meta property='fc:frame:button:1:action' content='link' />
+          <meta property='fc:frame:button:1:target' content={webUrl} />
+        </Helmet>
+      ) : null}
+
+      {webUrl && image ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta property='fc:frame:image' content={image} />
+        </Helmet>
+      ) : null}
+
       {structuredData ? (
         <Helmet encodeSpecialCharacters={false}>
           <script type='application/ld+json'>
diff --git a/packages/web/src/ssr/audio/+Page.tsx b/packages/web/src/ssr/audio/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/audio/+Page.tsx
@@ -0,0 +1,5 @@
+// Empty page, everything is handled in +onRenderHtml
+export default function render() {
+  return null
+}
+
diff --git a/packages/web/src/ssr/audio/+onRenderHtml.tsx b/packages/web/src/ssr/audio/+onRenderHtml.tsx
new file mode 100644
index 00000000000..5bf26d804c4
--- /dev/null
+++ b/packages/web/src/ssr/audio/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// $AUDIO token page SSR - meta tags only
+
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+
+import { MetaTags } from 'components/meta-tags/MetaTags'
+import { getIndexHtml } from 'ssr/getIndexHtml'
+import { getAudioContext } from 'ssr/metaTags'
+
+export function render() {
+  const context = getAudioContext()
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags
+        title={context.title}
+        description={context.description}
+        image={context.image}
+        thumbnail={context.thumbnail}
+      />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
+
diff --git a/packages/web/src/ssr/audio/+route.ts b/packages/web/src/ssr/audio/+route.ts
new file mode 100644
index 00000000000..d1087f2d3ef
--- /dev/null
+++ b/packages/web/src/ssr/audio/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/audio'], 'Audio Token Page')
+
diff --git a/packages/web/src/ssr/collection/+onRenderHtml.tsx b/packages/web/src/ssr/collection/+onRenderHtml.tsx
index 37879203aea..8d63dbe65b6 100644
--- a/packages/web/src/ssr/collection/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/collection/+onRenderHtml.tsx
@@ -11,6 +11,7 @@ import { ServerWebPlayer } from 'app/web-player/ServerWebPlayer'
 import { MetaTags } from 'components/meta-tags/MetaTags'
 import { DesktopServerCollectionPage } from 'pages/collection-page/DesktopServerCollectionPage'
 import { MobileServerCollectionPage } from 'pages/collection-page/MobileServerCollectionPage'
+import { canEmbed, getAppUrl, getEmbedUrl, getWebUrl } from 'ssr/metaTags'
 import { isMobileUserAgent } from 'utils/clientUtil'
 import { getCollectionPageSEOFields } from 'utils/seo'
 
@@ -32,6 +33,9 @@ export default function render(pageContext: CollectionPageContext) {
   const userAgent = headers?.['user-agent'] ?? ''
   const isMobile = isMobileUserAgent(userAgent)
 
+  // Check if this request can show an embed player (Twitter/Discord bots)
+  const shouldEmbed = canEmbed(userAgent)
+
   // Create a fresh cache instance for this SSR request
   // This ensures the theme context is properly connected
   const cache = createCache({ key: 'harmony', prepend: true })
@@ -48,11 +52,24 @@ export default function render(pageContext: CollectionPageContext) {
     hashId: id
   })
 
+  // Generate embed and app URLs
+  const embedType = is_album ? 'album' : 'playlist'
+  const embedUrl = getEmbedUrl(embedType, id)
+  const appUrl = getAppUrl(urlPathname)
+  const webUrl = getWebUrl(urlPathname)
+
   const pageHtml = renderToString(
     <CacheProvider value={cache}>
       <ServerWebPlayer isMobile={isMobile} location={urlPathname}>
         <>
-          <MetaTags {...seoMetadata} />
+          <MetaTags
+            {...seoMetadata}
+            embed={shouldEmbed}
+            embedUrl={embedUrl}
+            appUrl={appUrl}
+            webUrl={webUrl}
+            thumbnail={false}
+          />
           {isMobile ? (
             <MobileServerCollectionPage collection={collection} user={user} />
           ) : (
diff --git a/packages/web/src/ssr/download/+Page.tsx b/packages/web/src/ssr/download/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/download/+Page.tsx
@@ -0,0 +1,5 @@
+// Empty page, everything is handled in +onRenderHtml
+export default function render() {
+  return null
+}
+
diff --git a/packages/web/src/ssr/download/+onRenderHtml.tsx b/packages/web/src/ssr/download/+onRenderHtml.tsx
new file mode 100644
index 00000000000..d7558b7dd4a
--- /dev/null
+++ b/packages/web/src/ssr/download/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Download app page SSR - meta tags only
+
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+
+import { MetaTags } from 'components/meta-tags/MetaTags'
+import { getIndexHtml } from 'ssr/getIndexHtml'
+import { getDownloadAppContext } from 'ssr/metaTags'
+
+export function render() {
+  const context = getDownloadAppContext()
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags
+        title={context.title}
+        description={context.description}
+        image={context.image}
+        thumbnail={context.thumbnail}
+      />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
+
diff --git a/packages/web/src/ssr/download/+route.ts b/packages/web/src/ssr/download/+route.ts
new file mode 100644
index 00000000000..4dd9d44f8ee
--- /dev/null
+++ b/packages/web/src/ssr/download/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/download'], 'Download Page')
+
diff --git a/packages/web/src/ssr/explore/+Page.tsx b/packages/web/src/ssr/explore/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/explore/+Page.tsx
@@ -0,0 +1,5 @@
+// Empty page, everything is handled in +onRenderHtml
+export default function render() {
+  return null
+}
+
diff --git a/packages/web/src/ssr/explore/+onRenderHtml.tsx b/packages/web/src/ssr/explore/+onRenderHtml.tsx
new file mode 100644
index 00000000000..ef48100cf1c
--- /dev/null
+++ b/packages/web/src/ssr/explore/+onRenderHtml.tsx
@@ -0,0 +1,56 @@
+// Explore page SSR - meta tags only
+
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+import type { PageContextServer } from 'vike/types'
+
+import { MetaTags } from 'components/meta-tags/MetaTags'
+import { getIndexHtml } from 'ssr/getIndexHtml'
+import { getExploreInfo } from 'ssr/metaTags'
+
+type ExplorePageContext = PageContextServer & {
+  routeParams: {
+    type?: string
+  }
+}
+
+export function render(pageContext: ExplorePageContext) {
+  const { routeParams, urlPathname } = pageContext
+
+  // Handle /trending/playlists as a special case
+  let type = routeParams.type
+  if (urlPathname === '/trending/playlists') {
+    type = 'trending-playlists'
+  }
+
+  const context = getExploreInfo(type)
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags
+        title={context.title}
+        description={context.description}
+        image={context.image}
+        thumbnail
+      />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
+
diff --git a/packages/web/src/ssr/explore/+route.ts b/packages/web/src/ssr/explore/+route.ts
new file mode 100644
index 00000000000..a991d2f41e7
--- /dev/null
+++ b/packages/web/src/ssr/explore/+route.ts
@@ -0,0 +1,7 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(
+  ['/explore', '/explore/@type', '/trending/playlists'],
+  'Explore Page'
+)
+
diff --git a/packages/web/src/ssr/metaTags.ts b/packages/web/src/ssr/metaTags.ts
new file mode 100644
index 00000000000..95f3f0023a2
--- /dev/null
+++ b/packages/web/src/ssr/metaTags.ts
@@ -0,0 +1,231 @@
+/**
+ * SSR Meta Tags Utilities
+ * Duplicated logic from general-admission for SSR meta tag generation
+ */
+
+// Image URLs
+export const DEFAULT_IMAGE_URL =
+  'https://download.audius.co/static-resources/preview-image.jpg'
+export const AUDIO_REWARDS_IMAGE_URL =
+  'https://download.audius.co/static-resources/audio-rewards.png'
+export const SIGNUP_REF_IMAGE_URL =
+  'https://download.audius.co/static-resources/signup_referral.png'
+
+// Explore page image URLs
+const HEAVY_ROTATION_URL =
+  'https://download.audius.co/static-resources/heavy-rotation.png'
+const LET_THEM_DJ_URL =
+  'https://download.audius.co/static-resources/let-them-dj.png'
+const BEST_NEW_RELEASES_URL =
+  'https://download.audius.co/static-resources/best-new-releases.png'
+const UNDER_THE_RADAR_URL =
+  'https://download.audius.co/static-resources/under-the-radar.png'
+const TOP_ALBUMS_URL =
+  'https://download.audius.co/static-resources/top-albums.png'
+const TOP_PLAYLISTS_URL =
+  'https://download.audius.co/static-resources/top-playlists.png'
+const MOST_LOVED_URL =
+  'https://download.audius.co/static-resources/most-loved.png'
+const FEELING_LUCKY_URL =
+  'https://download.audius.co/static-resources/feeling-lucky.png'
+const REMIXABLES_URL =
+  'https://download.audius.co/static-resources/remixables.jpeg'
+const UNDERGROUND_TRENDING_URL =
+  'https://download.audius.co/static-resources/underground-trending.png'
+const PREMIUM_TRACKS_URL =
+  'https://download.audius.co/static-resources/premium-tracks.png'
+
+// Regex to detect Twitter/Discord bots that can embed players
+const CAN_EMBED_USER_AGENT_REGEX = /(twitter|discord)/i
+
+export type PlayableType = 'track' | 'playlist' | 'album'
+
+export interface ExploreInfo {
+  title: string
+  description: string
+  image: string
+}
+
+// Get base public URL based on environment
+const getPublicUrl = (): string => {
+  const env = process.env.VITE_ENVIRONMENT || 'development'
+  switch (env) {
+    case 'production':
+      return 'https://audius.co'
+    case 'staging':
+      return 'https://staging.audius.co'
+    default:
+      return 'http://localhost:3000'
+  }
+}
+
+/**
+ * Generate embed player URL for Twitter/Discord
+ */
+export const getEmbedUrl = (type: PlayableType, hashId: string): string => {
+  const publicUrl = getPublicUrl()
+  return `${publicUrl}/embed/${type}/${hashId}?flavor=card&twitter=true`
+}
+
+/**
+ * Check if User-Agent can show embed player (Twitter/Discord bots)
+ */
+export const canEmbed = (userAgent: string): boolean => {
+  return CAN_EMBED_USER_AGENT_REGEX.test(userAgent)
+}
+
+/**
+ * Generate deep link URL for mobile apps
+ */
+export const getAppUrl = (path: string): string => {
+  return `audius:/${path}`
+}
+
+/**
+ * Generate web URL for the page
+ */
+export const getWebUrl = (path: string): string => {
+  const publicUrl = getPublicUrl()
+  return `${publicUrl}${path}`
+}
+
+/**
+ * Explore type to metadata mapping
+ */
+export const exploreMap: Record<string, ExploreInfo> = {
+  'heavy-rotation': {
+    title: 'Heavy Rotation',
+    description: 'Your top tracks, in one place',
+    image: HEAVY_ROTATION_URL
+  },
+  'let-them-dj': {
+    title: 'Let Them DJ',
+    description: 'Playlists created by the people you follow',
+    image: LET_THEM_DJ_URL
+  },
+  'best-new-releases': {
+    title: 'Best New Releases',
+    description: 'From the artists you follow',
+    image: BEST_NEW_RELEASES_URL
+  },
+  'under-the-radar': {
+    title: 'Under The Radar',
+    description: 'Tracks you might have missed from the artists you follow',
+    image: UNDER_THE_RADAR_URL
+  },
+  'top-albums': {
+    title: 'Top Albums',
+    description: 'The top albums from all of Audius',
+    image: TOP_ALBUMS_URL
+  },
+  'top-playlists': {
+    title: 'Top Playlists',
+    description: 'The top playlists on Audius right now',
+    image: TOP_PLAYLISTS_URL
+  },
+  'trending-playlists': {
+    title: 'Trending Playlists',
+    description: 'The trending playlists on Audius right now',
+    image: TOP_PLAYLISTS_URL
+  },
+  playlists: {
+    title: 'Trending Playlists',
+    description: 'The trending playlists on Audius right now',
+    image: TOP_PLAYLISTS_URL
+  },
+  underground: {
+    title: 'Underground Trending',
+    description:
+      'Some of the best up-and-coming music on Audius all in one place',
+    image: UNDERGROUND_TRENDING_URL
+  },
+  'most-loved': {
+    title: 'Most Loved',
+    description: 'Tracks favorited by the people you follow',
+    image: MOST_LOVED_URL
+  },
+  'feeling-lucky': {
+    title: 'Feeling Lucky',
+    description: 'A purely random collection of tracks from Audius',
+    image: FEELING_LUCKY_URL
+  },
+  remixables: {
+    title: 'Remixables',
+    description:
+      'Popular tracks with remixes & stems you can use in your own tracks',
+    image: REMIXABLES_URL
+  },
+  'premium-tracks': {
+    title: 'Premium Tracks',
+    description: 'Explore premium music available to purchase.',
+    image: PREMIUM_TRACKS_URL
+  }
+}
+
+/**
+ * Get explore info for a given type
+ */
+export const getExploreInfo = (type?: string): ExploreInfo => {
+  if (!type || !exploreMap[type]) {
+    return {
+      title: 'Just For You',
+      description: `Content curated for you based on your likes, reposts, and follows. Refreshes often so if you like a track, favorite it.`,
+      image: DEFAULT_IMAGE_URL
+    }
+  }
+  return exploreMap[type]
+}
+
+/**
+ * Default meta tag context
+ */
+export const getDefaultContext = () => ({
+  title: 'Audius',
+  description:
+    'Audius is a music streaming and sharing platform that puts power back into the hands of content creators',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Upload page meta tag context
+ */
+export const getUploadContext = () => ({
+  title: 'Audius Upload',
+  description: 'Upload your tracks to Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * $AUDIO token page meta tag context
+ */
+export const getAudioContext = () => ({
+  title: '$AUDIO & Rewards',
+  description: 'Earn $AUDIO tokens while using the app!',
+  image: AUDIO_REWARDS_IMAGE_URL,
+  thumbnail: false
+})
+
+/**
+ * Signup referral page meta tag context
+ */
+export const getSignupRefContext = (handle?: string) => ({
+  title: handle
+    ? `Invite to join Audius from @${handle}!`
+    : 'Invite to join Audius',
+  description: 'Sign up for Audius to earn $AUDIO tokens while using the app!',
+  image: SIGNUP_REF_IMAGE_URL,
+  thumbnail: false
+})
+
+/**
+ * Download app page meta tag context
+ */
+export const getDownloadAppContext = () => ({
+  title: 'Audius Download',
+  description: 'Artists Deserve More.',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: false
+})
+
diff --git a/packages/web/src/ssr/profile/+onRenderHtml.tsx b/packages/web/src/ssr/profile/+onRenderHtml.tsx
index b1b52a2fcfc..3de1ad8486d 100644
--- a/packages/web/src/ssr/profile/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/profile/+onRenderHtml.tsx
@@ -11,6 +11,7 @@ import { ServerWebPlayer } from 'app/web-player/ServerWebPlayer'
 import { MetaTags } from 'components/meta-tags/MetaTags'
 import { DesktopServerProfilePage } from 'pages/profile-page/DesktopServerProfilePage'
 import { MobileServerProfilePage } from 'pages/profile-page/MobileServerProfilePage'
+import { getAppUrl, getWebUrl } from 'ssr/metaTags'
 import { isMobileUserAgent } from 'utils/clientUtil'
 import { getUserPageSEOFields } from 'utils/seo'
 
@@ -44,11 +45,15 @@ export default function render(pageContext: TrackPageContext) {
     hashId: id
   })
 
+  // Generate app and web URLs for deep linking and Farcaster
+  const appUrl = getAppUrl(urlPathname)
+  const webUrl = getWebUrl(urlPathname)
+
   const pageHtml = renderToString(
     <CacheProvider value={cache}>
       <ServerWebPlayer isMobile={isMobile} location={urlPathname}>
         <>
-          <MetaTags {...seoMetadata} />
+          <MetaTags {...seoMetadata} appUrl={appUrl} webUrl={webUrl} />
           {user ? (
             isMobile ? (
               <MobileServerProfilePage user={user} />
diff --git a/packages/web/src/ssr/remixes/+Page.tsx b/packages/web/src/ssr/remixes/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/remixes/+Page.tsx
@@ -0,0 +1,5 @@
+// Empty page, everything is handled in +onRenderHtml
+export default function render() {
+  return null
+}
+
diff --git a/packages/web/src/ssr/remixes/+onBeforeRender.tsx b/packages/web/src/ssr/remixes/+onBeforeRender.tsx
new file mode 100644
index 00000000000..428880da094
--- /dev/null
+++ b/packages/web/src/ssr/remixes/+onBeforeRender.tsx
@@ -0,0 +1,59 @@
+import type { PageContextServer } from 'vike/types'
+
+// Simple helper to get API URL without importing services/env which pulls in SDK dependencies
+const getApiUrl = () => {
+  const env = process.env.VITE_ENVIRONMENT || 'development'
+  switch (env) {
+    case 'production':
+      return 'https://api.audius.co'
+    case 'staging':
+      return 'https://api.staging.audius.co'
+    case 'development':
+    default:
+      return process.env.VITE_API_URL || 'http://audius-api'
+  }
+}
+
+export async function onBeforeRender(pageContext: PageContextServer) {
+  const { handle, slug } = pageContext.routeParams
+
+  try {
+    const requestPath = `v1/full/tracks?permalink=${handle}/${slug}`
+    const requestUrl = `${getApiUrl()}/${requestPath}`
+
+    const res = await fetch(requestUrl)
+    if (res.status !== 200) {
+      throw new Error(requestUrl)
+    }
+
+    const json = await res.json()
+    if (!json.data || json.data.length === 0) {
+      throw new Error(`No track found for permalink: ${handle}/${slug}`)
+    }
+    const apiTrack = json.data[0]
+
+    const { user, ...track } = apiTrack
+
+    return {
+      pageContext: {
+        pageProps: { track, user }
+      }
+    }
+  } catch (e) {
+    console.error(
+      'Error fetching track for remixes page SSR',
+      'handle',
+      handle,
+      'slug',
+      slug,
+      'error',
+      e
+    )
+    return {
+      pageContext: {
+        pageProps: {}
+      }
+    }
+  }
+}
+
diff --git a/packages/web/src/ssr/remixes/+onRenderHtml.tsx b/packages/web/src/ssr/remixes/+onRenderHtml.tsx
new file mode 100644
index 00000000000..6a175e770d7
--- /dev/null
+++ b/packages/web/src/ssr/remixes/+onRenderHtml.tsx
@@ -0,0 +1,63 @@
+// Remixes page SSR - meta tags only
+
+import type { Track, User } from '@audius/common/models'
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+import type { PageContextServer } from 'vike/types'
+
+import { MetaTags } from 'components/meta-tags/MetaTags'
+import { getIndexHtml } from 'ssr/getIndexHtml'
+import { DEFAULT_IMAGE_URL, getAppUrl, getWebUrl } from 'ssr/metaTags'
+
+type RemixesPageContext = PageContextServer & {
+  pageProps: {
+    track?: Track & { id: string; artwork?: { '1000x1000'?: string } }
+    user?: User
+  }
+}
+
+export function render(pageContext: RemixesPageContext) {
+  const { pageProps, urlPathname } = pageContext
+  const { track, user } = pageProps
+
+  // Build remixes-specific meta tags
+  const title = track?.title && user?.name
+    ? `Remixes of ${track.title} • ${user.name}`
+    : 'Remixes'
+  const description = track?.description ?? ''
+  const image = track?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+
+  const appUrl = getAppUrl(urlPathname)
+  const webUrl = getWebUrl(urlPathname)
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags
+        title={title}
+        description={description}
+        image={image}
+        thumbnail={false}
+        appUrl={appUrl}
+        webUrl={webUrl}
+      />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
+
diff --git a/packages/web/src/ssr/remixes/+route.ts b/packages/web/src/ssr/remixes/+route.ts
new file mode 100644
index 00000000000..cc96e322397
--- /dev/null
+++ b/packages/web/src/ssr/remixes/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/@handle/@slug/remixes'], 'Remixes Page')
+
diff --git a/packages/web/src/ssr/signup/+Page.tsx b/packages/web/src/ssr/signup/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/signup/+Page.tsx
@@ -0,0 +1,5 @@
+// Empty page, everything is handled in +onRenderHtml
+export default function render() {
+  return null
+}
+
diff --git a/packages/web/src/ssr/signup/+onRenderHtml.tsx b/packages/web/src/ssr/signup/+onRenderHtml.tsx
new file mode 100644
index 00000000000..2c6d4db08b8
--- /dev/null
+++ b/packages/web/src/ssr/signup/+onRenderHtml.tsx
@@ -0,0 +1,56 @@
+// Signup page SSR - meta tags only
+// Supports referral links via ?ref= or ?rf= query params
+
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+import type { PageContextServer } from 'vike/types'
+
+import { MetaTags } from 'components/meta-tags/MetaTags'
+import { getIndexHtml } from 'ssr/getIndexHtml'
+import { getDefaultContext, getSignupRefContext } from 'ssr/metaTags'
+
+type SignupPageContext = PageContextServer & {
+  urlParsed: {
+    search: Record<string, string>
+  }
+}
+
+export function render(pageContext: SignupPageContext) {
+  const { urlParsed } = pageContext
+  const { ref, rf } = urlParsed.search ?? {}
+
+  // If there's a referral param, use the signup ref context
+  const hasReferral = ref ?? rf
+  const context = hasReferral
+    ? getSignupRefContext(ref ?? rf)
+    : getDefaultContext()
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags
+        title={context.title}
+        description={context.description}
+        image={context.image}
+        thumbnail={context.thumbnail}
+      />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
+
diff --git a/packages/web/src/ssr/signup/+route.ts b/packages/web/src/ssr/signup/+route.ts
new file mode 100644
index 00000000000..d835ed82e84
--- /dev/null
+++ b/packages/web/src/ssr/signup/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/signup'], 'Signup Page')
+
diff --git a/packages/web/src/ssr/track/+onBeforeRender.tsx b/packages/web/src/ssr/track/+onBeforeRender.tsx
index 2f51ffae073..764e983da72 100644
--- a/packages/web/src/ssr/track/+onBeforeRender.tsx
+++ b/packages/web/src/ssr/track/+onBeforeRender.tsx
@@ -14,8 +14,41 @@ const getApiUrl = () => {
   }
 }
 
-export async function onBeforeRender(pageContext: PageContextServer) {
+type TrackPageContextServer = PageContextServer & {
+  urlParsed: {
+    search: Record<string, string>
+  }
+}
+
+// Fetch comment data if commentId is provided
+async function fetchCommentData(commentId: string) {
+  try {
+    const url = `${getApiUrl()}/v1/full/comments/${commentId}`
+    const res = await fetch(url)
+    if (res.status !== 200) {
+      return null
+    }
+    const { data, related } = await res.json()
+    const comment = Array.isArray(data) ? data[0] : data
+
+    if (!comment) return null
+
+    const track = related.tracks.find(
+      (t: { id: string }) => t.id === comment.entity_id
+    )
+    const commenter = related.users.find(
+      (u: { id: string }) => u.id === comment.user_id
+    )
+
+    return { comment, track, commenter }
+  } catch {
+    return null
+  }
+}
+
+export async function onBeforeRender(pageContext: TrackPageContextServer) {
   const { handle, slug } = pageContext.routeParams
+  const { commentId } = pageContext.urlParsed.search ?? {}
 
   try {
     const requestPath = `v1/full/tracks?permalink=${handle}/${slug}`
@@ -34,9 +67,20 @@ export async function onBeforeRender(pageContext: PageContextServer) {
 
     const { user, ...track } = apiTrack
 
+    // Fetch comment data if commentId is provided
+    let commentData = null
+    if (commentId) {
+      commentData = await fetchCommentData(commentId)
+      // Verify the comment is for this track
+      if (commentData && commentData.track?.id !== track.id) {
+        console.info('Comment track does not match URL track, ignoring comment')
+        commentData = null
+      }
+    }
+
     return {
       pageContext: {
-        pageProps: { track, user }
+        pageProps: { track, user, commentData }
       }
     }
   } catch (e) {
diff --git a/packages/web/src/ssr/track/+onRenderHtml.tsx b/packages/web/src/ssr/track/+onRenderHtml.tsx
index 4f48cf8e4db..5923fc91782 100644
--- a/packages/web/src/ssr/track/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/track/+onRenderHtml.tsx
@@ -11,46 +11,90 @@ import { ServerWebPlayer } from 'app/web-player/ServerWebPlayer'
 import { MetaTags } from 'components/meta-tags/MetaTags'
 import { DesktopServerTrackPage } from 'pages/track-page/DesktopServerTrackPage'
 import { MobileServerTrackPage } from 'pages/track-page/MobileServerTrackPage'
+import {
+  canEmbed,
+  DEFAULT_IMAGE_URL,
+  getAppUrl,
+  getEmbedUrl,
+  getWebUrl
+} from 'ssr/metaTags'
 import { isMobileUserAgent } from 'utils/clientUtil'
 import { getTrackPageSEOFields } from 'utils/seo'
 
 import { getIndexHtml } from '../getIndexHtml'
 
+type CommentData = {
+  comment: { entity_id: string; user_id: string }
+  track: { id: string; title: string; user: { name: string } }
+  commenter: { name: string }
+}
+
 type TrackPageContext = PageContextServer & {
   pageProps: {
-    track: Track & { id: string }
+    track: Track & { id: string; is_stream_gated?: boolean }
     user: User
+    commentData?: CommentData | null
   }
 }
 
 export default function render(pageContext: TrackPageContext) {
   const { pageProps, headers, urlPathname } = pageContext
-  const { track, user } = pageProps
-  const { id, title, permalink, release_date, created_at } = track
+  const { track, user, commentData } = pageProps
+  const { id, title, permalink, release_date, created_at, is_stream_gated } =
+    track
   const { name: userName } = user
 
   const userAgent = headers?.['user-agent'] ?? ''
   const isMobile = isMobileUserAgent(userAgent)
 
+  // Check if this request can show an embed player (Twitter/Discord bots)
+  // Don't show embed for comment pages
+  const shouldEmbed = canEmbed(userAgent) && !is_stream_gated && !commentData
+
   // Create a fresh cache instance for this SSR request
   // This ensures the theme context is properly connected
   const cache = createCache({ key: 'harmony', prepend: true })
   const { extractCriticalToChunks, constructStyleTagsFromChunks } =
     createEmotionServer(cache)
 
-  const seoMetadata = getTrackPageSEOFields({
-    title,
-    permalink,
-    userName,
-    releaseDate: release_date || created_at,
-    hashId: id
-  })
+  // Build meta tags - use comment-specific if we have comment data
+  let seoMetadata
+  if (commentData) {
+    const trackName = commentData.track.title
+    const artistName = commentData.track.user.name
+    const commenterName = commentData.commenter.name
+    seoMetadata = {
+      title: `${commenterName}'s comment on ${trackName} | Audius Music`,
+      description: `Join the conversation around ${trackName} by ${artistName} — streaming on Audius`,
+      image: DEFAULT_IMAGE_URL
+    }
+  } else {
+    seoMetadata = getTrackPageSEOFields({
+      title,
+      permalink,
+      userName,
+      releaseDate: release_date || created_at,
+      hashId: id
+    })
+  }
+
+  // Generate embed and app URLs
+  const embedUrl = getEmbedUrl('track', id)
+  const appUrl = getAppUrl(urlPathname)
+  const webUrl = getWebUrl(urlPathname)
 
   const pageHtml = renderToString(
     <CacheProvider value={cache}>
       <ServerWebPlayer isMobile={isMobile} location={urlPathname}>
         <>
-          <MetaTags {...seoMetadata} />
+          <MetaTags
+            {...seoMetadata}
+            embed={shouldEmbed}
+            embedUrl={embedUrl}
+            appUrl={appUrl}
+            webUrl={webUrl}
+            thumbnail={false}
+          />
           {isMobile ? (
             <MobileServerTrackPage track={track} user={user} />
           ) : (
diff --git a/packages/web/src/ssr/upload/+Page.tsx b/packages/web/src/ssr/upload/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/upload/+Page.tsx
@@ -0,0 +1,5 @@
+// Empty page, everything is handled in +onRenderHtml
+export default function render() {
+  return null
+}
+
diff --git a/packages/web/src/ssr/upload/+onRenderHtml.tsx b/packages/web/src/ssr/upload/+onRenderHtml.tsx
new file mode 100644
index 00000000000..c0a37655103
--- /dev/null
+++ b/packages/web/src/ssr/upload/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Upload page SSR - meta tags only
+
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+
+import { MetaTags } from 'components/meta-tags/MetaTags'
+import { getIndexHtml } from 'ssr/getIndexHtml'
+import { getUploadContext } from 'ssr/metaTags'
+
+export function render() {
+  const context = getUploadContext()
+
+  const pageHtml = renderToString(
+    <>
+      <MetaTags
+        title={context.title}
+        description={context.description}
+        image={context.image}
+        thumbnail={context.thumbnail}
+      />
+      <div />
+    </>
+  )
+
+  const helmet = Helmet.renderStatic()
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
+
diff --git a/packages/web/src/ssr/upload/+route.ts b/packages/web/src/ssr/upload/+route.ts
new file mode 100644
index 00000000000..09a7522ab20
--- /dev/null
+++ b/packages/web/src/ssr/upload/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/upload', '/upload/@type'], 'Upload Page')
+