diff --git a/packages/web/src/ssr/collection/+onRenderHtml.tsx b/packages/web/src/ssr/collection/+onRenderHtml.tsx index 8c32b7d8fb6..7e7ea44904e 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,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( <> { 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..c8a6d13257c 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,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( <> - + {user ? ( isMobile ? ( diff --git a/packages/web/src/ssr/track/+onRenderHtml.tsx b/packages/web/src/ssr/track/+onRenderHtml.tsx index 389cf131c9e..29c50ed9982 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,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( <>