From 9c06af12c94188e31883f72838d25e909264e3d8 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Mon, 30 Mar 2026 10:46:19 -0700
Subject: [PATCH 1/2] Fix discord unfurl

---
 .../web/src/ssr/collection/+onRenderHtml.tsx  | 14 ++++++++++-
 packages/web/src/ssr/metaTags.ts              | 12 ++++++++++
 .../web/src/ssr/profile/+onRenderHtml.tsx     | 24 +++++++++++++++++--
 packages/web/src/ssr/track/+onRenderHtml.tsx  | 13 +++++++++-
 4 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/ssr/collection/+onRenderHtml.tsx b/packages/web/src/ssr/collection/+onRenderHtml.tsx
index 8c32b7d8fb6..eb4e0cbfc5b 100644
--- a/packages/web/src/ssr/collection/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/collection/+onRenderHtml.tsx
@@ -13,10 +13,12 @@ import { DesktopServerCollectionPage } from 'pages/collection-page/DesktopServer
 import { MobileServerCollectionPage } from 'pages/collection-page/MobileServerCollectionPage'
 import {
   canEmbed,
+  DEFAULT_IMAGE_URL,
   getAppUrl,
   getCollectionPageContext,
   getEmbedUrl,
-  getWebUrl
+  getWebUrl,
+  isDiscord
 } from 'ssr/metaTags'
 import { isMobileUserAgent } from 'utils/clientUtil'
 
@@ -63,12 +65,22 @@ export default function render(pageContext: CollectionPageContext) {
   const appUrl = getAppUrl(urlPathname)
   const webUrl = getWebUrl(urlPathname)
 
+  // Discord uses a weird aspect ratio for OG unfurls, so serve artwork
+  // directly instead of the custom OG image
+  const discordBot = isDiscord(userAgent)
+  const discordImageOverride = discordBot
+    ? collection?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+    : undefined
+
   const pageHtml = renderToString(
     <CacheProvider value={cache}>
       <ServerWebPlayer isMobile={isMobile} location={urlPathname}>
         <>
           <MetaTags
             {...seoMetadata}
+            {...(discordImageOverride
+              ? { image: discordImageOverride, entityType: undefined, hashId: undefined }
+              : {})}
             embed={shouldEmbed}
             embedUrl={embedUrl}
             appUrl={appUrl}
diff --git a/packages/web/src/ssr/metaTags.ts b/packages/web/src/ssr/metaTags.ts
index 3a760efe46b..6196d11b5fe 100644
--- a/packages/web/src/ssr/metaTags.ts
+++ b/packages/web/src/ssr/metaTags.ts
@@ -15,6 +15,9 @@ export const SIGNUP_REF_IMAGE_URL =
 // Regex to detect Twitter/Discord bots that can embed players
 const CAN_EMBED_USER_AGENT_REGEX = /(twitter|discord)/i
 
+// Regex to detect Discord bot specifically
+const DISCORD_USER_AGENT_REGEX = /discord/i
+
 export type PlayableType = 'track' | 'playlist' | 'album'
 
 export interface ExploreInfo {
@@ -62,6 +65,15 @@ export const canEmbed = (userAgent: string): boolean => {
   return CAN_EMBED_USER_AGENT_REGEX.test(userAgent)
 }
 
+/**
+ * Check if User-Agent is Discord bot
+ * Discord uses a weird aspect ratio for OG unfurls, so we serve artwork
+ * directly instead of the custom OG image.
+ */
+export const isDiscord = (userAgent: string): boolean => {
+  return DISCORD_USER_AGENT_REGEX.test(userAgent)
+}
+
 /**
  * Generate deep link URL for mobile apps
  */
diff --git a/packages/web/src/ssr/profile/+onRenderHtml.tsx b/packages/web/src/ssr/profile/+onRenderHtml.tsx
index be6125171d2..b79e910def0 100644
--- a/packages/web/src/ssr/profile/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/profile/+onRenderHtml.tsx
@@ -11,7 +11,13 @@ 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, getUserPageContext, getWebUrl } from 'ssr/metaTags'
+import {
+  DEFAULT_IMAGE_URL,
+  getAppUrl,
+  getUserPageContext,
+  getWebUrl,
+  isDiscord
+} from 'ssr/metaTags'
 import { isMobileUserAgent } from 'utils/clientUtil'
 
 import { getIndexHtml } from '../getIndexHtml'
@@ -49,11 +55,25 @@ export default function render(pageContext: TrackPageContext) {
   const appUrl = getAppUrl(urlPathname)
   const webUrl = getWebUrl(urlPathname)
 
+  // Discord uses a weird aspect ratio for OG unfurls, so serve the profile
+  // picture directly instead of the custom OG image
+  const discordBot = isDiscord(userAgent)
+  const discordImageOverride = discordBot
+    ? user?.profile_picture?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+    : undefined
+
   const pageHtml = renderToString(
     <CacheProvider value={cache}>
       <ServerWebPlayer isMobile={isMobile} location={urlPathname}>
         <>
-          <MetaTags {...seoMetadata} appUrl={appUrl} webUrl={webUrl} />
+          <MetaTags
+            {...seoMetadata}
+            {...(discordImageOverride
+              ? { image: discordImageOverride, entityType: undefined, hashId: undefined }
+              : {})}
+            appUrl={appUrl}
+            webUrl={webUrl}
+          />
           {user ? (
             isMobile ? (
               <MobileServerProfilePage user={user} />
diff --git a/packages/web/src/ssr/track/+onRenderHtml.tsx b/packages/web/src/ssr/track/+onRenderHtml.tsx
index 389cf131c9e..e8e79543cf3 100644
--- a/packages/web/src/ssr/track/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/track/+onRenderHtml.tsx
@@ -17,7 +17,8 @@ import {
   getAppUrl,
   getEmbedUrl,
   getTrackPageContext,
-  getWebUrl
+  getWebUrl,
+  isDiscord
 } from 'ssr/metaTags'
 import { isMobileUserAgent } from 'utils/clientUtil'
 import { fullTrackPage } from 'utils/route'
@@ -95,12 +96,22 @@ export default function render(pageContext: TrackPageContext) {
   const appUrl = getAppUrl(urlPathname)
   const webUrl = getWebUrl(urlPathname)
 
+  // Discord uses a weird aspect ratio for OG unfurls, so serve artwork
+  // directly instead of the custom OG image
+  const discordBot = isDiscord(userAgent)
+  const discordImageOverride = discordBot
+    ? track?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+    : undefined
+
   const pageHtml = renderToString(
     <CacheProvider value={cache}>
       <ServerWebPlayer isMobile={isMobile} location={urlPathname}>
         <>
           <MetaTags
             {...seoMetadata}
+            {...(discordImageOverride
+              ? { image: discordImageOverride, entityType: undefined, hashId: undefined }
+              : {})}
             embed={shouldEmbed}
             embedUrl={embedUrl}
             appUrl={appUrl}

From 4f4137a985fde3fa246ff9acc162057066141ab4 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Mon, 30 Mar 2026 13:25:36 -0700
Subject: [PATCH 2/2] Fix lint

---
 packages/web/src/ssr/collection/+onRenderHtml.tsx | 8 ++++++--
 packages/web/src/ssr/profile/+onRenderHtml.tsx    | 8 ++++++--
 packages/web/src/ssr/track/+onRenderHtml.tsx      | 8 ++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/ssr/collection/+onRenderHtml.tsx b/packages/web/src/ssr/collection/+onRenderHtml.tsx
index eb4e0cbfc5b..7e7ea44904e 100644
--- a/packages/web/src/ssr/collection/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/collection/+onRenderHtml.tsx
@@ -69,7 +69,7 @@ export default function render(pageContext: CollectionPageContext) {
   // directly instead of the custom OG image
   const discordBot = isDiscord(userAgent)
   const discordImageOverride = discordBot
-    ? collection?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+    ? (collection?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL)
     : undefined
 
   const pageHtml = renderToString(
@@ -79,7 +79,11 @@ export default function render(pageContext: CollectionPageContext) {
           <MetaTags
             {...seoMetadata}
             {...(discordImageOverride
-              ? { image: discordImageOverride, entityType: undefined, hashId: undefined }
+              ? {
+                  image: discordImageOverride,
+                  entityType: undefined,
+                  hashId: undefined
+                }
               : {})}
             embed={shouldEmbed}
             embedUrl={embedUrl}
diff --git a/packages/web/src/ssr/profile/+onRenderHtml.tsx b/packages/web/src/ssr/profile/+onRenderHtml.tsx
index b79e910def0..c8a6d13257c 100644
--- a/packages/web/src/ssr/profile/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/profile/+onRenderHtml.tsx
@@ -59,7 +59,7 @@ export default function render(pageContext: TrackPageContext) {
   // picture directly instead of the custom OG image
   const discordBot = isDiscord(userAgent)
   const discordImageOverride = discordBot
-    ? user?.profile_picture?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+    ? (user?.profile_picture?.['1000x1000'] ?? DEFAULT_IMAGE_URL)
     : undefined
 
   const pageHtml = renderToString(
@@ -69,7 +69,11 @@ export default function render(pageContext: TrackPageContext) {
           <MetaTags
             {...seoMetadata}
             {...(discordImageOverride
-              ? { image: discordImageOverride, entityType: undefined, hashId: undefined }
+              ? {
+                  image: discordImageOverride,
+                  entityType: undefined,
+                  hashId: undefined
+                }
               : {})}
             appUrl={appUrl}
             webUrl={webUrl}
diff --git a/packages/web/src/ssr/track/+onRenderHtml.tsx b/packages/web/src/ssr/track/+onRenderHtml.tsx
index e8e79543cf3..29c50ed9982 100644
--- a/packages/web/src/ssr/track/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/track/+onRenderHtml.tsx
@@ -100,7 +100,7 @@ export default function render(pageContext: TrackPageContext) {
   // directly instead of the custom OG image
   const discordBot = isDiscord(userAgent)
   const discordImageOverride = discordBot
-    ? track?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL
+    ? (track?.artwork?.['1000x1000'] ?? DEFAULT_IMAGE_URL)
     : undefined
 
   const pageHtml = renderToString(
@@ -110,7 +110,11 @@ export default function render(pageContext: TrackPageContext) {
           <MetaTags
             {...seoMetadata}
             {...(discordImageOverride
-              ? { image: discordImageOverride, entityType: undefined, hashId: undefined }
+              ? {
+                  image: discordImageOverride,
+                  entityType: undefined,
+                  hashId: undefined
+                }
               : {})}
             embed={shouldEmbed}
             embedUrl={embedUrl}