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 ed95fc415e851..131491c970e7a 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
@@ -502,6 +502,11 @@ export const metadata = {
height: 600,
},
],
+ audio: [
+ {
+ url: 'https://nextjs.org/audio.mp3', // Must be an absolute URL
+ },
+ ],
locale: 'en_US',
type: 'website',
},
@@ -521,9 +526,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 d87605c5f93ac..6d16faa7b17c4 100644
--- a/test/e2e/app-dir/metadata/metadata.test.ts
+++ b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -340,6 +340,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', {