diff --git a/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx b/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx index 7f186b384569c..6b8f9a0c5343e 100644 --- a/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx +++ b/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx @@ -490,6 +490,18 @@ export const metadata = { alt: 'My custom alt', }, ], + videos: [ + { + url: 'https://nextjs.org/video.mp4', // Must be an absolute URL + width: 800, + height: 600, + }, + ], + audio: [ + { + url: 'https://nextjs.org/audio.mp3', // Must be an absolute URL + }, + ], locale: 'en_US', type: 'website', }, @@ -509,6 +521,10 @@ export const metadata = { + + + + ``` diff --git a/packages/next/src/lib/metadata/generate/meta.tsx b/packages/next/src/lib/metadata/generate/meta.tsx index 96394bc7b008a..27cb2bedb37fa 100644 --- a/packages/next/src/lib/metadata/generate/meta.tsx +++ b/packages/next/src/lib/metadata/generate/meta.tsx @@ -53,10 +53,17 @@ function camelToSnake(camelCaseStr: string) { }) } +const aliasPropPrefixes = new Set([ + 'og:image', + 'twitter:image', + 'og:video', + 'og:audio', +]) function getMetaKey(prefix: string, key: string) { // Use `twitter:image` and `og:image` instead of `twitter:image:url` and `og:image:url` - // to be more compatible as it's a more common format - if ((prefix === 'og:image' || prefix === 'twitter:image') && key === 'url') { + // to be more compatible as it's a more common format. + // `og:video` & `og:audio` do not have a `:url` suffix alias + if (aliasPropPrefixes.has(prefix) && key === 'url') { return prefix } if (prefix.startsWith('og:') || prefix.startsWith('twitter:')) { diff --git a/test/e2e/app-dir/metadata/app/opengraph/page.tsx b/test/e2e/app-dir/metadata/app/opengraph/page.tsx index 87f5e077ba50e..ebe7adeea2ba0 100644 --- a/test/e2e/app-dir/metadata/app/opengraph/page.tsx +++ b/test/e2e/app-dir/metadata/app/opengraph/page.tsx @@ -21,6 +21,18 @@ export const metadata = { alt: 'My custom alt', }, ], + videos: [ + { + url: 'https://example.com/video.mp4', + width: 800, + height: 450, + }, + ], + audio: [ + { + url: 'https://example.com/audio.mp3', + }, + ], locale: 'en-US', type: 'website', }, diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts index 61b8f41030624..5b405176ad716 100644 --- a/test/e2e/app-dir/metadata/metadata.test.ts +++ b/test/e2e/app-dir/metadata/metadata.test.ts @@ -482,6 +482,10 @@ describe('app dir - metadata', () => { 'og:image:width': ['800', '1800'], 'og:image:height': ['600', '1600'], 'og:image:alt': 'My custom alt', + 'og:video': 'https://example.com/video.mp4', + 'og:video:width': '800', + 'og:video:height': '450', + 'og:audio': 'https://example.com/audio.mp3', }) await matchMultiDom('meta', 'name', 'content', {