fix: correct metadata url suffix (#69959) (#70042)

Backporting #69959 Co-authored-by: Maikel <maikel.van.dort@gmail.com>
vercel · Sep 12, 2024 · fa51ff5 · fa51ff5
1 parent 276ddf3
commit fa51ff5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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', {