diff --git a/packages/web/src/components/meta-tags/MetaTags.tsx b/packages/web/src/components/meta-tags/MetaTags.tsx index f9404845451..90a3341c67a 100644 --- a/packages/web/src/components/meta-tags/MetaTags.tsx +++ b/packages/web/src/components/meta-tags/MetaTags.tsx @@ -30,6 +30,27 @@ export type MetaTagsProps = { * Hash ID for OG URL generation (id field from entities) */ hashId?: string + /** + * Whether to show embed player (for Twitter/Discord) + */ + embed?: boolean + /** + * URL to the embed player (e.g. /embed/track/xyz?flavor=card&twitter=true) + */ + embedUrl?: string + /** + * Deep link URL for mobile apps (e.g. audius://track/xyz) + */ + appUrl?: string + /** + * Web URL for the current page (e.g. https://audius.co/track/xyz) + */ + webUrl?: string + /** + * Whether the image shows as a small thumbnail version. + * Controls twitter:card type (summary vs summary_large_image) + */ + thumbnail?: boolean } /** @@ -70,7 +91,12 @@ export const MetaTags = (props: MetaTagsProps) => { structuredData, noIndex = false, entityType, - hashId + hashId, + embed = false, + embedUrl, + appUrl, + webUrl, + thumbnail = true } = props const formattedTitle = title @@ -80,6 +106,13 @@ export const MetaTags = (props: MetaTagsProps) => { // Generate OG URL if entity type and hash ID are provided const ogUrl = generateOgUrl(entityType, hashId) + // Determine twitter card type based on thumbnail and embed settings + const getTwitterCardType = () => { + if (thumbnail) return 'summary' + if (embed && embedUrl) return 'player' + return 'summary_large_image' + } + return ( <> {/* noIndex */} @@ -124,6 +157,12 @@ export const MetaTags = (props: MetaTagsProps) => { + {thumbnail ? null : ( + <> + + + + )} ) : null} @@ -134,11 +173,53 @@ export const MetaTags = (props: MetaTagsProps) => { ) : null} + {/* OG Type and Twitter Card */} - + + {/* Twitter Player (for embeds) */} + {embed && embedUrl ? ( + + + + + + ) : null} + + {/* Twitter App Links */} + {appUrl ? ( + + + + + + + + + + + + ) : null} + + {/* Farcaster Frame */} + {webUrl ? ( + + + + + + + + ) : null} + + {webUrl && image ? ( + + + + ) : null} + {structuredData ? (