From fa51ff56decc099cf1b8b6dd9b903bc32219a12a Mon Sep 17 00:00:00 2001
From: Jiwon Choi <devjiwonchoi@gmail.com>
Date: Fri, 13 Sep 2024 03:33:30 +0900
Subject: [PATCH] fix: correct metadata url suffix (#69959) (#70042)

Backporting https://github.com/vercel/next.js/pull/69959

Co-authored-by: Maikel <maikel.van.dort@gmail.com>
---
 .../04-functions/generate-metadata.mdx           | 16 ++++++++++++++++
 packages/next/src/lib/metadata/generate/meta.tsx | 11 +++++++++--
 test/e2e/app-dir/metadata/app/opengraph/page.tsx | 12 ++++++++++++
 test/e2e/app-dir/metadata/metadata.test.ts       |  4 ++++
 4 files changed, 41 insertions(+), 2 deletions(-)

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 = {
 <meta property="og:image:width" content="1800" />
 <meta property="og:image:height" content="1600" />
 <meta property="og:image:alt" content="My custom alt" />
+<meta property="og:video" content="https://nextjs.org/video.mp4" />
+<meta property="og:video:width" content="800" />
+<meta property="og:video:height" content="600" />
+<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
 <meta property="og:type" content="website" />
 ```
 
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', {