From 2c7ef8f9006718f30cce4d5f4f9fea28f91bb310 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

---
 .../trending-challenge-rewards/src/main.ts    |   2 +-
 .../web/src/components/meta-tags/MetaTags.tsx |  87 +++++-
 packages/web/src/ssr/audio/+Page.tsx          |   5 +
 .../web/src/ssr/audio/+onRenderClient.tsx     |  28 ++
 packages/web/src/ssr/audio/+onRenderHtml.tsx  |  40 +++
 packages/web/src/ssr/audio/+route.ts          |   4 +
 packages/web/src/ssr/cash/+onRenderClient.tsx |  28 ++
 packages/web/src/ssr/cash/+onRenderHtml.tsx   |   2 +-
 .../web/src/ssr/coins/+onRenderClient.tsx     |  28 ++
 packages/web/src/ssr/coins/+onRenderHtml.tsx  |   2 +-
 .../web/src/ssr/collection/+onRenderHtml.tsx  |  19 +-
 packages/web/src/ssr/dashboard/+Page.tsx      |   5 +
 .../web/src/ssr/dashboard/+onRenderClient.tsx |  28 ++
 .../web/src/ssr/dashboard/+onRenderHtml.tsx   |  41 +++
 packages/web/src/ssr/dashboard/+route.ts      |   4 +
 packages/web/src/ssr/download/+Page.tsx       |   5 +
 .../web/src/ssr/download/+onRenderClient.tsx  |  28 ++
 .../web/src/ssr/download/+onRenderHtml.tsx    |  40 +++
 packages/web/src/ssr/download/+route.ts       |   4 +
 packages/web/src/ssr/explore/+Page.tsx        |   5 +
 .../web/src/ssr/explore/+onRenderClient.tsx   |  28 ++
 .../web/src/ssr/explore/+onRenderHtml.tsx     |  56 ++++
 packages/web/src/ssr/explore/+route.ts        |   7 +
 packages/web/src/ssr/feed/+Page.tsx           |   5 +
 packages/web/src/ssr/feed/+onRenderClient.tsx |  28 ++
 packages/web/src/ssr/feed/+onRenderHtml.tsx   |  41 +++
 packages/web/src/ssr/feed/+route.ts           |   4 +
 packages/web/src/ssr/history/+Page.tsx        |   5 +
 .../web/src/ssr/history/+onRenderClient.tsx   |  28 ++
 .../web/src/ssr/history/+onRenderHtml.tsx     |  41 +++
 packages/web/src/ssr/history/+route.ts        |   4 +
 .../web/src/ssr/index/+onRenderClient.tsx     |   2 +-
 packages/web/src/ssr/index/+onRenderHtml.tsx  |   2 +-
 packages/web/src/ssr/library/+Page.tsx        |   5 +
 .../web/src/ssr/library/+onRenderClient.tsx   |  28 ++
 .../web/src/ssr/library/+onRenderHtml.tsx     |  41 +++
 packages/web/src/ssr/library/+route.ts        |   4 +
 packages/web/src/ssr/messages/+Page.tsx       |   5 +
 .../web/src/ssr/messages/+onRenderClient.tsx  |  28 ++
 .../web/src/ssr/messages/+onRenderHtml.tsx    |  41 +++
 packages/web/src/ssr/messages/+route.ts       |   4 +
 packages/web/src/ssr/metaTags.ts              | 266 ++++++++++++++++++
 packages/web/src/ssr/notifications/+Page.tsx  |   5 +
 .../src/ssr/notifications/+onRenderClient.tsx |  28 ++
 .../src/ssr/notifications/+onRenderHtml.tsx   |  41 +++
 packages/web/src/ssr/notifications/+route.ts  |   4 +
 .../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/rewards/+Page.tsx        |   5 +
 .../web/src/ssr/rewards/+onRenderClient.tsx   |  27 ++
 .../web/src/ssr/rewards/+onRenderHtml.tsx     |  41 +++
 packages/web/src/ssr/rewards/+route.ts        |   4 +
 packages/web/src/ssr/search/+Page.tsx         |   5 +
 .../web/src/ssr/search/+onRenderClient.tsx    |  28 ++
 packages/web/src/ssr/search/+onRenderHtml.tsx |  41 +++
 packages/web/src/ssr/search/+route.ts         |   7 +
 packages/web/src/ssr/settings/+Page.tsx       |   5 +
 .../web/src/ssr/settings/+onRenderClient.tsx  |  28 ++
 .../web/src/ssr/settings/+onRenderHtml.tsx    |  41 +++
 packages/web/src/ssr/settings/+route.ts       |   4 +
 packages/web/src/ssr/signup/+Page.tsx         |   5 +
 .../web/src/ssr/signup/+onRenderClient.tsx    |  28 ++
 packages/web/src/ssr/signup/+onRenderHtml.tsx |  55 ++++
 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/trending/+Page.tsx       |   5 +
 .../web/src/ssr/trending/+onRenderClient.tsx  |  28 ++
 .../web/src/ssr/trending/+onRenderHtml.tsx    |  41 +++
 packages/web/src/ssr/trending/+route.ts       |   4 +
 packages/web/src/ssr/upload/+Page.tsx         |   5 +
 .../web/src/ssr/upload/+onRenderClient.tsx    |  28 ++
 packages/web/src/ssr/upload/+onRenderHtml.tsx |  40 +++
 packages/web/src/ssr/upload/+route.ts         |   4 +
 packages/web/src/ssr/util.ts                  |  73 ++---
 .../web/src/ssr/wallet/+onRenderClient.tsx    |  28 ++
 packages/web/src/ssr/wallet/+onRenderHtml.tsx |   2 +-
 80 files changed, 1937 insertions(+), 57 deletions(-)
 create mode 100644 packages/web/src/ssr/audio/+Page.tsx
 create mode 100644 packages/web/src/ssr/audio/+onRenderClient.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/cash/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/coins/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/dashboard/+Page.tsx
 create mode 100644 packages/web/src/ssr/dashboard/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/dashboard/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/dashboard/+route.ts
 create mode 100644 packages/web/src/ssr/download/+Page.tsx
 create mode 100644 packages/web/src/ssr/download/+onRenderClient.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/+onRenderClient.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/feed/+Page.tsx
 create mode 100644 packages/web/src/ssr/feed/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/feed/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/feed/+route.ts
 create mode 100644 packages/web/src/ssr/history/+Page.tsx
 create mode 100644 packages/web/src/ssr/history/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/history/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/history/+route.ts
 create mode 100644 packages/web/src/ssr/library/+Page.tsx
 create mode 100644 packages/web/src/ssr/library/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/library/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/library/+route.ts
 create mode 100644 packages/web/src/ssr/messages/+Page.tsx
 create mode 100644 packages/web/src/ssr/messages/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/messages/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/messages/+route.ts
 create mode 100644 packages/web/src/ssr/metaTags.ts
 create mode 100644 packages/web/src/ssr/notifications/+Page.tsx
 create mode 100644 packages/web/src/ssr/notifications/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/notifications/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/notifications/+route.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/rewards/+Page.tsx
 create mode 100644 packages/web/src/ssr/rewards/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/rewards/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/rewards/+route.ts
 create mode 100644 packages/web/src/ssr/search/+Page.tsx
 create mode 100644 packages/web/src/ssr/search/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/search/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/search/+route.ts
 create mode 100644 packages/web/src/ssr/settings/+Page.tsx
 create mode 100644 packages/web/src/ssr/settings/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/settings/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/settings/+route.ts
 create mode 100644 packages/web/src/ssr/signup/+Page.tsx
 create mode 100644 packages/web/src/ssr/signup/+onRenderClient.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/trending/+Page.tsx
 create mode 100644 packages/web/src/ssr/trending/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/trending/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/trending/+route.ts
 create mode 100644 packages/web/src/ssr/upload/+Page.tsx
 create mode 100644 packages/web/src/ssr/upload/+onRenderClient.tsx
 create mode 100644 packages/web/src/ssr/upload/+onRenderHtml.tsx
 create mode 100644 packages/web/src/ssr/upload/+route.ts
 create mode 100644 packages/web/src/ssr/wallet/+onRenderClient.tsx

diff --git a/packages/discovery-provider/plugins/pedalboard/apps/trending-challenge-rewards/src/main.ts b/packages/discovery-provider/plugins/pedalboard/apps/trending-challenge-rewards/src/main.ts
index bdd1f3f0083..c29667e3369 100644
--- a/packages/discovery-provider/plugins/pedalboard/apps/trending-challenge-rewards/src/main.ts
+++ b/packages/discovery-provider/plugins/pedalboard/apps/trending-challenge-rewards/src/main.ts
@@ -10,7 +10,7 @@ const onDemandRun = async (app: App<SharedData>) => {
   const { runNow } = app.viewAppData()
   if (runNow) {
     // Uncomment to also announce to slack
-    // await announceTopFiveTrending(app)
+    await announceTopFiveTrending(app)
     await disburseTrendingRewards(app)
   }
 }
diff --git a/packages/web/src/components/meta-tags/MetaTags.tsx b/packages/web/src/components/meta-tags/MetaTags.tsx
index f9404845451..b59e115cb57 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 */}
@@ -127,6 +160,14 @@ export const MetaTags = (props: MetaTagsProps) => {
         </Helmet>
       ) : null}
 
+      {/* Image dimensions for non-thumbnail images */}
+      {image && !thumbnail ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta property='og:image:width' content='1000' />
+          <meta property='og:image:height' content='1000' />
+        </Helmet>
+      ) : null}
+
       {imageAlt ? (
         <Helmet encodeSpecialCharacters={false}>
           <meta name='twitter:image:alt' content={imageAlt} />
@@ -134,11 +175,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/+onRenderClient.tsx b/packages/web/src/ssr/audio/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/audio/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/audio/+onRenderHtml.tsx b/packages/web/src/ssr/audio/+onRenderHtml.tsx
new file mode 100644
index 00000000000..471a661a1fb
--- /dev/null
+++ b/packages/web/src/ssr/audio/+onRenderHtml.tsx
@@ -0,0 +1,40 @@
+// $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 default 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/cash/+onRenderClient.tsx b/packages/web/src/ssr/cash/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/cash/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/cash/+onRenderHtml.tsx b/packages/web/src/ssr/cash/+onRenderHtml.tsx
index 28a20679dce..135f650beeb 100644
--- a/packages/web/src/ssr/cash/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/cash/+onRenderHtml.tsx
@@ -9,7 +9,7 @@ import { MetaTags } from 'components/meta-tags/MetaTags'
 import { getIndexHtml } from 'ssr/getIndexHtml'
 import { getCashPageSEOFields } from 'utils/seo'
 
-export function render() {
+export default function render() {
   const seoMetadata = getCashPageSEOFields()
 
   const pageHtml = renderToString(
diff --git a/packages/web/src/ssr/coins/+onRenderClient.tsx b/packages/web/src/ssr/coins/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/coins/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/coins/+onRenderHtml.tsx b/packages/web/src/ssr/coins/+onRenderHtml.tsx
index 4f354b4a66c..462acf0e493 100644
--- a/packages/web/src/ssr/coins/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/coins/+onRenderHtml.tsx
@@ -9,7 +9,7 @@ import { MetaTags } from 'components/meta-tags/MetaTags'
 import { getIndexHtml } from 'ssr/getIndexHtml'
 import { getCoinsPageSEOFields } from 'utils/seo'
 
-export function render() {
+export default function render() {
   const seoMetadata = getCoinsPageSEOFields()
 
   const pageHtml = renderToString(
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/dashboard/+Page.tsx b/packages/web/src/ssr/dashboard/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/dashboard/+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/dashboard/+onRenderClient.tsx b/packages/web/src/ssr/dashboard/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/dashboard/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/dashboard/+onRenderHtml.tsx b/packages/web/src/ssr/dashboard/+onRenderHtml.tsx
new file mode 100644
index 00000000000..86999395816
--- /dev/null
+++ b/packages/web/src/ssr/dashboard/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Dashboard 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 { getDashboardContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getDashboardContext()
+
+  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/dashboard/+route.ts b/packages/web/src/ssr/dashboard/+route.ts
new file mode 100644
index 00000000000..6beef9f3ccf
--- /dev/null
+++ b/packages/web/src/ssr/dashboard/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/dashboard'], 'Dashboard Page')
+
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/+onRenderClient.tsx b/packages/web/src/ssr/download/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/download/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/download/+onRenderHtml.tsx b/packages/web/src/ssr/download/+onRenderHtml.tsx
new file mode 100644
index 00000000000..49326ce23b5
--- /dev/null
+++ b/packages/web/src/ssr/download/+onRenderHtml.tsx
@@ -0,0 +1,40 @@
+// 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 default 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/+onRenderClient.tsx b/packages/web/src/ssr/explore/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/explore/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/explore/+onRenderHtml.tsx b/packages/web/src/ssr/explore/+onRenderHtml.tsx
new file mode 100644
index 00000000000..6481cb661ae
--- /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 default 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/feed/+Page.tsx b/packages/web/src/ssr/feed/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/feed/+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/feed/+onRenderClient.tsx b/packages/web/src/ssr/feed/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/feed/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/feed/+onRenderHtml.tsx b/packages/web/src/ssr/feed/+onRenderHtml.tsx
new file mode 100644
index 00000000000..16db2eb3325
--- /dev/null
+++ b/packages/web/src/ssr/feed/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Feed 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 { getFeedContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getFeedContext()
+
+  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/feed/+route.ts b/packages/web/src/ssr/feed/+route.ts
new file mode 100644
index 00000000000..2d8dc94ea5a
--- /dev/null
+++ b/packages/web/src/ssr/feed/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/feed'], 'Feed Page')
+
diff --git a/packages/web/src/ssr/history/+Page.tsx b/packages/web/src/ssr/history/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/history/+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/history/+onRenderClient.tsx b/packages/web/src/ssr/history/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/history/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/history/+onRenderHtml.tsx b/packages/web/src/ssr/history/+onRenderHtml.tsx
new file mode 100644
index 00000000000..0cba2bbd14e
--- /dev/null
+++ b/packages/web/src/ssr/history/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// History 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 { getHistoryContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getHistoryContext()
+
+  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/history/+route.ts b/packages/web/src/ssr/history/+route.ts
new file mode 100644
index 00000000000..b3c166c9c56
--- /dev/null
+++ b/packages/web/src/ssr/history/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/history'], 'History Page')
+
diff --git a/packages/web/src/ssr/index/+onRenderClient.tsx b/packages/web/src/ssr/index/+onRenderClient.tsx
index 5b8e09ff94b..ddc77fb08d5 100644
--- a/packages/web/src/ssr/index/+onRenderClient.tsx
+++ b/packages/web/src/ssr/index/+onRenderClient.tsx
@@ -17,7 +17,7 @@ window.global ||= window
 window.Buffer = Buffer
 window.process = { ...processBrowser, env: process.env }
 
-export function render() {
+export default function render() {
   const container = document.getElementById('root')
   if (container) {
     const root = createRoot(container)
diff --git a/packages/web/src/ssr/index/+onRenderHtml.tsx b/packages/web/src/ssr/index/+onRenderHtml.tsx
index 7af4cc29c7f..8853a45708f 100644
--- a/packages/web/src/ssr/index/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/index/+onRenderHtml.tsx
@@ -9,7 +9,7 @@ import { MetaTags } from 'components/meta-tags/MetaTags'
 import { getIndexHtml } from 'ssr/getIndexHtml'
 import { getDefaultSEOFields } from 'utils/seo'
 
-export function render() {
+export default function render() {
   const seoMetadata = getDefaultSEOFields()
 
   const pageHtml = renderToString(
diff --git a/packages/web/src/ssr/library/+Page.tsx b/packages/web/src/ssr/library/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/library/+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/library/+onRenderClient.tsx b/packages/web/src/ssr/library/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/library/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/library/+onRenderHtml.tsx b/packages/web/src/ssr/library/+onRenderHtml.tsx
new file mode 100644
index 00000000000..0c49ef8aab0
--- /dev/null
+++ b/packages/web/src/ssr/library/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Library 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 { getLibraryContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getLibraryContext()
+
+  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/library/+route.ts b/packages/web/src/ssr/library/+route.ts
new file mode 100644
index 00000000000..7e892cfee70
--- /dev/null
+++ b/packages/web/src/ssr/library/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/library'], 'Library Page')
+
diff --git a/packages/web/src/ssr/messages/+Page.tsx b/packages/web/src/ssr/messages/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/messages/+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/messages/+onRenderClient.tsx b/packages/web/src/ssr/messages/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/messages/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/messages/+onRenderHtml.tsx b/packages/web/src/ssr/messages/+onRenderHtml.tsx
new file mode 100644
index 00000000000..4c3d586eea6
--- /dev/null
+++ b/packages/web/src/ssr/messages/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Messages 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 { getMessagesContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getMessagesContext()
+
+  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/messages/+route.ts b/packages/web/src/ssr/messages/+route.ts
new file mode 100644
index 00000000000..865efcca9fe
--- /dev/null
+++ b/packages/web/src/ssr/messages/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/messages'], 'Messages Page')
+
diff --git a/packages/web/src/ssr/metaTags.ts b/packages/web/src/ssr/metaTags.ts
new file mode 100644
index 00000000000..ca555cb71a0
--- /dev/null
+++ b/packages/web/src/ssr/metaTags.ts
@@ -0,0 +1,266 @@
+/**
+ * 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 TOP_PLAYLISTS_URL =
+  'https://download.audius.co/static-resources/top-playlists.png'
+const UNDERGROUND_TRENDING_URL =
+  'https://download.audius.co/static-resources/underground-trending.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> = {
+  'trending-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
+  }
+}
+
+/**
+ * Get explore info for a given type
+ */
+export const getExploreInfo = (type?: string): ExploreInfo => {
+  if (!type || !exploreMap[type]) {
+    return {
+      title: 'Explore',
+      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: '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
+})
+
+/**
+ * Rewards page meta tag context
+ */
+export const getRewardsContext = () => ({
+  title: '$AUDIO & Rewards',
+  description: 'Earn $AUDIO tokens while using the app!',
+  image: AUDIO_REWARDS_IMAGE_URL,
+  thumbnail: false
+})
+
+/**
+ * Signup page meta tag context
+ */
+export const getSignupContext = () => ({
+  title: 'Signup',
+  description: 'Sign up for Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * 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: 'Download',
+  description: 'Artists Deserve More.',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: false
+})
+
+/**
+ * Trending page meta tag context
+ */
+export const getTrendingContext = () => ({
+  title: 'Trending',
+  description: 'Listen to trending tracks on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Feed page meta tag context
+ */
+export const getFeedContext = () => ({
+  title: 'Feed',
+  description: 'Your personalized feed on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Library page meta tag context
+ */
+export const getLibraryContext = () => ({
+  title: 'Library',
+  description: 'Your music library on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * History page meta tag context
+ */
+export const getHistoryContext = () => ({
+  title: 'History',
+  description: 'Your listening history on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Dashboard page meta tag context
+ */
+export const getDashboardContext = () => ({
+  title: 'Dashboard',
+  description: 'Your artist dashboard on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Settings page meta tag context
+ */
+export const getSettingsContext = () => ({
+  title: 'Settings',
+  description: 'Manage your Audius account settings',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Notifications page meta tag context
+ */
+export const getNotificationsContext = () => ({
+  title: 'Notifications',
+  description: 'Your notifications on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Messages page meta tag context
+ */
+export const getMessagesContext = () => ({
+  title: 'Messages',
+  description: 'Your messages on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
+
+/**
+ * Search page meta tag context
+ */
+export const getSearchContext = () => ({
+  title: 'Search',
+  description: 'Search for tracks, artists, and playlists on Audius',
+  image: DEFAULT_IMAGE_URL,
+  thumbnail: true
+})
diff --git a/packages/web/src/ssr/notifications/+Page.tsx b/packages/web/src/ssr/notifications/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/notifications/+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/notifications/+onRenderClient.tsx b/packages/web/src/ssr/notifications/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/notifications/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/notifications/+onRenderHtml.tsx b/packages/web/src/ssr/notifications/+onRenderHtml.tsx
new file mode 100644
index 00000000000..7e5e3502136
--- /dev/null
+++ b/packages/web/src/ssr/notifications/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Notifications 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 { getNotificationsContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getNotificationsContext()
+
+  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/notifications/+route.ts b/packages/web/src/ssr/notifications/+route.ts
new file mode 100644
index 00000000000..74fa86c0512
--- /dev/null
+++ b/packages/web/src/ssr/notifications/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/notifications'], 'Notifications Page')
+
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..f4b211df343
--- /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 default 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/rewards/+Page.tsx b/packages/web/src/ssr/rewards/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/rewards/+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/rewards/+onRenderClient.tsx b/packages/web/src/ssr/rewards/+onRenderClient.tsx
new file mode 100644
index 00000000000..2df5d681deb
--- /dev/null
+++ b/packages/web/src/ssr/rewards/+onRenderClient.tsx
@@ -0,0 +1,27 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
diff --git a/packages/web/src/ssr/rewards/+onRenderHtml.tsx b/packages/web/src/ssr/rewards/+onRenderHtml.tsx
new file mode 100644
index 00000000000..01a41d76828
--- /dev/null
+++ b/packages/web/src/ssr/rewards/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Rewards 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 { getRewardsContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getRewardsContext()
+
+  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/rewards/+route.ts b/packages/web/src/ssr/rewards/+route.ts
new file mode 100644
index 00000000000..9611a6c7518
--- /dev/null
+++ b/packages/web/src/ssr/rewards/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/rewards'], 'Rewards Page')
+
diff --git a/packages/web/src/ssr/search/+Page.tsx b/packages/web/src/ssr/search/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/search/+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/search/+onRenderClient.tsx b/packages/web/src/ssr/search/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/search/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/search/+onRenderHtml.tsx b/packages/web/src/ssr/search/+onRenderHtml.tsx
new file mode 100644
index 00000000000..634f0300ff3
--- /dev/null
+++ b/packages/web/src/ssr/search/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Search 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 { getSearchContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getSearchContext()
+
+  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/search/+route.ts b/packages/web/src/ssr/search/+route.ts
new file mode 100644
index 00000000000..3994c9938aa
--- /dev/null
+++ b/packages/web/src/ssr/search/+route.ts
@@ -0,0 +1,7 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(
+  ['/search', '/search/@category'],
+  'Search Page'
+)
+
diff --git a/packages/web/src/ssr/settings/+Page.tsx b/packages/web/src/ssr/settings/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/settings/+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/settings/+onRenderClient.tsx b/packages/web/src/ssr/settings/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/settings/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/settings/+onRenderHtml.tsx b/packages/web/src/ssr/settings/+onRenderHtml.tsx
new file mode 100644
index 00000000000..159db87e858
--- /dev/null
+++ b/packages/web/src/ssr/settings/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Settings 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 { getSettingsContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getSettingsContext()
+
+  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/settings/+route.ts b/packages/web/src/ssr/settings/+route.ts
new file mode 100644
index 00000000000..63005888be4
--- /dev/null
+++ b/packages/web/src/ssr/settings/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/settings'], 'Settings 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/+onRenderClient.tsx b/packages/web/src/ssr/signup/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/signup/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/signup/+onRenderHtml.tsx b/packages/web/src/ssr/signup/+onRenderHtml.tsx
new file mode 100644
index 00000000000..850450a8f98
--- /dev/null
+++ b/packages/web/src/ssr/signup/+onRenderHtml.tsx
@@ -0,0 +1,55 @@
+// 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 { getSignupContext, getSignupRefContext } from 'ssr/metaTags'
+
+type SignupPageContext = PageContextServer & {
+  urlParsed: {
+    search: Record<string, string>
+  }
+}
+
+export default 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)
+    : getSignupContext()
+
+  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/trending/+Page.tsx b/packages/web/src/ssr/trending/+Page.tsx
new file mode 100644
index 00000000000..c565080ae2e
--- /dev/null
+++ b/packages/web/src/ssr/trending/+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/trending/+onRenderClient.tsx b/packages/web/src/ssr/trending/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/trending/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/trending/+onRenderHtml.tsx b/packages/web/src/ssr/trending/+onRenderHtml.tsx
new file mode 100644
index 00000000000..4a5b4c74572
--- /dev/null
+++ b/packages/web/src/ssr/trending/+onRenderHtml.tsx
@@ -0,0 +1,41 @@
+// Trending 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 { getTrendingContext } from 'ssr/metaTags'
+
+export default function render() {
+  const context = getTrendingContext()
+
+  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/trending/+route.ts b/packages/web/src/ssr/trending/+route.ts
new file mode 100644
index 00000000000..6a8857392aa
--- /dev/null
+++ b/packages/web/src/ssr/trending/+route.ts
@@ -0,0 +1,4 @@
+import { makePageRoute } from 'ssr/util'
+
+export default makePageRoute(['/trending'], 'Trending Page')
+
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/+onRenderClient.tsx b/packages/web/src/ssr/upload/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/upload/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/upload/+onRenderHtml.tsx b/packages/web/src/ssr/upload/+onRenderHtml.tsx
new file mode 100644
index 00000000000..51c2743cc03
--- /dev/null
+++ b/packages/web/src/ssr/upload/+onRenderHtml.tsx
@@ -0,0 +1,40 @@
+// 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 default 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')
+
diff --git a/packages/web/src/ssr/util.ts b/packages/web/src/ssr/util.ts
index 38a31c5d2c8..0217a9fb7a8 100644
--- a/packages/web/src/ssr/util.ts
+++ b/packages/web/src/ssr/util.ts
@@ -2,50 +2,46 @@ import { resolveRoute } from 'vike/routing'
 import type { PageContextServer } from 'vike/types'
 
 // Route constants - defined locally to avoid importing route.ts which pulls in dayjs
-const SEARCH_BASE_ROUTE = '/search'
-const SEARCH_PAGE = '/search/:category?'
 const CHANGE_EMAIL_SETTINGS_PAGE = '/settings/change-email'
 const CHANGE_PASSWORD_SETTINGS_PAGE = '/settings/change-password'
-const CHATS_PAGE = '/messages'
 const CHAT_PAGE = '/messages/:id?'
-const DOWNLOAD_LINK = '/download'
 
 const assetPaths = new Set(['src', 'assets', 'scripts', 'fonts', 'favicons'])
 
 const invalidPaths = new Set(['undefined'])
 
-const staticRoutes = new Set([
-  '/',
-  '/trending',
-  '/feed',
-  '/explore',
-  '/explore/playlists',
-  '/explore/underground',
-  '/library',
-  '/history',
-  '/dashboard',
-  '/audio',
-  '/rewards',
-  '/upload',
-  '/settings',
-  '/notifications',
-  '/messages',
-  SEARCH_BASE_ROUTE,
-  '/search/all',
-  '/search/profiles',
-  '/search/tracks',
-  '/search/albums',
-  '/search/playlists'
+// Reserved paths that have their own SSR handlers and should NOT match /@handle patterns
+// This prevents /upload from being matched as a profile with handle="upload"
+const reservedPaths = new Set([
+  'upload',
+  'explore',
+  'audio',
+  'signup',
+  'download',
+  'trending',
+  'feed',
+  'library',
+  'history',
+  'dashboard',
+  'rewards',
+  'settings',
+  'notifications',
+  'messages',
+  'search',
+  'coins',
+  'cash',
+  'wallet',
+  'error'
 ])
 
+// Static routes that should skip SSR (only the root now, all others have SSR handlers)
+const staticRoutes = new Set(['/'])
+
+// Paths that should not use SSR even if they match a route
 const nonSsrPaths = [
-  SEARCH_BASE_ROUTE,
-  SEARCH_PAGE,
   CHANGE_EMAIL_SETTINGS_PAGE,
   CHANGE_PASSWORD_SETTINGS_PAGE,
-  CHATS_PAGE,
-  CHAT_PAGE,
-  DOWNLOAD_LINK,
+  CHAT_PAGE, // Individual chat pages, not the main messages page
   '/react-query',
   '/react-query-cache-prime',
   '/react-query-redux-cache-sync',
@@ -55,18 +51,27 @@ const nonSsrPaths = [
 export const makePageRoute =
   (routes: string[], pageName?: string) =>
   ({ urlPathname }: PageContextServer) => {
+    const firstSegment = urlPathname.split('/')[1]
+
     for (let i = 0; i < routes.length; i++) {
       const route = routes[i]
 
-      // Don't render page if the route matches any of the asset, invalid, or static  routes
+      // Don't render page if the route matches any of the asset, invalid, or static routes
       if (
-        assetPaths.has(urlPathname.split('/')[1]) ||
-        invalidPaths.has(urlPathname.split('/')[1]) ||
+        assetPaths.has(firstSegment) ||
+        invalidPaths.has(firstSegment) ||
         staticRoutes.has(urlPathname)
       ) {
         continue
       }
 
+      // If the route starts with /@handle pattern (e.g. /@handle, /@handle/tracks),
+      // don't match if the first URL segment is a reserved path
+      // This prevents /upload from matching as handle="upload"
+      if (route.startsWith('/@') && reservedPaths.has(firstSegment)) {
+        continue
+      }
+
       if (
         urlPathname.split('/')[route.split('/').length - 1] === 'index.css.map'
       ) {
diff --git a/packages/web/src/ssr/wallet/+onRenderClient.tsx b/packages/web/src/ssr/wallet/+onRenderClient.tsx
new file mode 100644
index 00000000000..51bc603cf45
--- /dev/null
+++ b/packages/web/src/ssr/wallet/+onRenderClient.tsx
@@ -0,0 +1,28 @@
+// Simple SSR pages use createRoot instead of hydrateRoot
+// to avoid hydration mismatches since we only render meta tags during SSR
+
+import 'setimmediate'
+import { Buffer } from 'buffer'
+
+import processBrowser from 'process/browser'
+import { createRoot } from 'react-dom/client'
+
+import '../../index.css'
+import RootWithProviders from 'ssr/RootWithProviders'
+import { isMobile as getIsMobile } from 'utils/clientUtil'
+
+// @ts-ignore
+window.global ||= window
+// @ts-ignore
+window.Buffer = Buffer
+window.process = { ...processBrowser, env: process.env }
+
+export default function render() {
+  const container = document.getElementById('root')
+  if (container) {
+    const isMobile = getIsMobile()
+    const root = createRoot(container)
+    root.render(<RootWithProviders isServerSide={false} isMobile={isMobile} />)
+  }
+}
+
diff --git a/packages/web/src/ssr/wallet/+onRenderHtml.tsx b/packages/web/src/ssr/wallet/+onRenderHtml.tsx
index 19b85bb172b..760bc58b7ed 100644
--- a/packages/web/src/ssr/wallet/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/wallet/+onRenderHtml.tsx
@@ -9,7 +9,7 @@ import { MetaTags } from 'components/meta-tags/MetaTags'
 import { getIndexHtml } from 'ssr/getIndexHtml'
 import { getWalletPageSEOFields } from 'utils/seo'
 
-export function render() {
+export default function render() {
   const seoMetadata = getWalletPageSEOFields()
 
   const pageHtml = renderToString(