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 ? (