Fix discord unfurl

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,26 @@ 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}

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
  */

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,29 @@ 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} />

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,26 @@ 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}