Fix metadata nested twitter props rendering (#47972)

For twitter and og image nested properties we should render them as snake case according to [og spec](https://ogp.me/) and [twitter card docs](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started). For typing we keep them as camel case and then convert them to snake case during render This issue is reported in #47960 that user thinks the types are incorrect, but turns out twitter metadata didn't render it correctly Closes #47960
vercel · Apr 5, 2023 · 7af9c43 · 7af9c43
1 parent a94de4c
commit 7af9c43
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 21 deletions.
diff --git a/packages/next/src/lib/metadata/generate/meta.tsx b/packages/next/src/lib/metadata/generate/meta.tsx
@@ -32,6 +32,24 @@ type MultiMetaContent =
   | null
   | undefined
 
+function camelToSnake(camelCaseStr: string) {
+  return camelCaseStr.replace(/([A-Z])/g, function (match) {
+    return '_' + match.toLowerCase()
+  })
+}
+
+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') {
+    return prefix
+  }
+  if (prefix.startsWith('og:') || prefix.startsWith('twitter:')) {
+    key = camelToSnake(key)
+  }
+  return prefix + ':' + key
+}
+
 function ExtendMeta({
   content,
   namePrefix,
@@ -49,15 +67,8 @@ function ExtendMeta({
         return typeof v === 'undefined' ? null : (
           <Meta
             key={keyPrefix + ':' + k + '_' + index}
-            {...(propertyPrefix
-              ? // Use `og:image` instead of `og:image:url` to be more compatible as it's a more common format
-                {
-                  property:
-                    propertyPrefix === 'og:image' && k === 'url'
-                      ? 'og:image'
-                      : propertyPrefix + ':' + k,
-                }
-              : { name: namePrefix + ':' + k })}
+            {...(propertyPrefix && { property: getMetaKey(propertyPrefix, k) })}
+            {...(namePrefix && { name: getMetaKey(namePrefix, k) })}
             content={typeof v === 'string' ? v : v?.toString()}
           />
         )

diff --git a/packages/next/src/lib/metadata/generate/opengraph.tsx b/packages/next/src/lib/metadata/generate/opengraph.tsx
@@ -259,14 +259,7 @@ export function TwitterMetadata({
       <Meta name="twitter:creator:id" content={twitter.creatorId} />
       <Meta name="twitter:title" content={twitter.title?.absolute} />
       <Meta name="twitter:description" content={twitter.description} />
-      {twitter.images
-        ? twitter.images.map((image, index) => (
-            <React.Fragment key={index}>
-              <Meta name="twitter:image" content={image.url} />
-              <Meta name="twitter:image:alt" content={image.alt} />
-            </React.Fragment>
-          ))
-        : null}
+      <MultiMeta namePrefix="twitter:image" contents={twitter.images} />
       {card === 'player'
         ? twitter.players.map((player, index) => (
             <React.Fragment key={index}>

diff --git a/packages/next/src/lib/metadata/types/opengraph-types.ts b/packages/next/src/lib/metadata/types/opengraph-types.ts
@@ -134,7 +134,7 @@ type OGImageDescriptor = {
 type OGAudio = string | OGAudioDescriptor | URL
 type OGAudioDescriptor = {
   url: string | URL
-  secure_url?: string | URL
+  secureUrl?: string | URL
   type?: string
 }
 type OGVideo = string | OGVideoDescriptor | URL

diff --git a/test/e2e/app-dir/metadata/app/twitter/large-image/page.tsx b/test/e2e/app-dir/metadata/app/twitter/large-image/page.tsx
@@ -11,7 +11,7 @@ export const metadata = {
     creator: 'creator',
     creatorId: 'creatorId',
     images: {
-      url: 'https://twitter.com/image.png',
+      url: 'https://twitter.com/large-image.png',
       alt: 'image-alt',
     },
   },

diff --git a/test/e2e/app-dir/metadata/app/twitter/page.tsx b/test/e2e/app-dir/metadata/app/twitter/page.tsx
@@ -9,6 +9,11 @@ export const metadata = {
     siteId: 'siteId',
     creator: 'creator',
     creatorId: 'creatorId',
-    images: 'https://twitter.com/image.png',
+    images: [
+      {
+        url: 'https://twitter.com/image.png',
+        secureUrl: 'https://twitter.com/secure.png',
+      },
+    ],
   },
 }
diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -624,6 +624,7 @@ createNextDescribe(
           'twitter:creator': 'creator',
           'twitter:creator:id': 'creatorId',
           'twitter:image': 'https://twitter.com/image.png',
+          'twitter:image:secure_url': 'https://twitter.com/secure.png',
           'twitter:card': 'summary',
         })
       })
@@ -638,7 +639,7 @@ createNextDescribe(
           'twitter:site:id': 'siteId',
           'twitter:creator': 'creator',
           'twitter:creator:id': 'creatorId',
-          'twitter:image': 'https://twitter.com/image.png',
+          'twitter:image': 'https://twitter.com/large-image.png',
           'twitter:image:alt': 'image-alt',
           'twitter:card': 'summary_large_image',
         })