Auto fill title/images/description from openGraph for twitter if missing

packages/next/src/lib/metadata/resolve-metadata.test.ts

@@ -64,11 +64,11 @@ describe('accumulateMetadata', () => {
       const items: [Metadata[], Metadata][] = [
         [
           [{ openGraph: { type: 'article', images: 'https://test1.com' } }],
-          { openGraph: { images: [{ url: 'https://test1.com' }] } },
+          { openGraph: { images: [{ url: new URL('https://test1.com') }] } },
         ],
         [
           [{ openGraph: { type: 'book', images: 'https://test2.com' } }],
-          { openGraph: { images: [{ url: 'https://test2.com' }] } },
+          { openGraph: { images: [{ url: new URL('https://test2.com/') }] } },
         ],
         [
           [
@@ -90,7 +90,7 @@ describe('accumulateMetadata', () => {
               },
             },
           ],
-          { openGraph: { images: [{ url: 'https://test4.com' }] } },
+          { openGraph: { images: [{ url: new URL('https://test4.com') }] } },
         ],
         [
           [
@@ -101,11 +101,11 @@ describe('accumulateMetadata', () => {
               },
             },
           ],
-          { openGraph: { images: [{ url: 'https://test5.com' }] } },
+          { openGraph: { images: [{ url: new URL('https://test5.com') }] } },
         ],
         [
           [{ openGraph: { type: 'video.movie', images: 'https://test6.com' } }],
-          { openGraph: { images: [{ url: 'https://test6.com' }] } },
+          { openGraph: { images: [{ url: new URL('https://test6.com') }] } },
         ],
       ]
 
@@ -117,6 +117,44 @@ describe('accumulateMetadata', () => {
         expect(metadata).toMatchObject(result)
       })
     })
+
+    it('should fill twitter with partial existing openGraph metadata', async () => {
+      const metadataItems: MetadataItems = [
+        [
+          {
+            openGraph: {
+              title: 'title',
+              description: 'description',
+              images: 'https://test.com',
+            },
+            twitter: {
+              card: 'summary_large_image',
+            },
+          },
+          null,
+        ],
+      ]
+      const metadata = await accumulateMetadata(metadataItems)
+      expect(metadata).toMatchObject({
+        openGraph: {
+          title: {
+            absolute: 'title',
+            template: null,
+          },
+          description: 'description',
+          images: [{ url: new URL('https://test.com') }],
+        },
+        twitter: {
+          card: 'summary_large_image',
+          title: {
+            absolute: 'title',
+            template: null,
+          },
+          description: 'description',
+          images: [{ url: new URL('https://test.com') }],
+        },
+      })
+    })
   })
 
   describe('themeColor', () => {

packages/next/src/lib/metadata/resolve-metadata.ts

@@ -358,15 +358,39 @@ export async function resolveMetadata({
   return metadataItems
 }
 
+const commonOgKeys = ['title', 'description', 'images'] as const
 function postProcessMetadata(metadata: ResolvedMetadata): ResolvedMetadata {
   const { openGraph, twitter } = metadata
-  if (openGraph && !twitter) {
-    const overlappedProps = {
-      title: openGraph.title,
-      description: openGraph.description,
-      images: openGraph.images,
+  if (openGraph) {
+    let autoFillProps: Partial<{
+      [Key in (typeof commonOgKeys)[number]]: NonNullable<
+        ResolvedMetadata['openGraph']
+      >[Key]
+    }> = {}
+    const hasTwTitle = twitter?.title.absolute
+    const hasTwDescription = twitter?.description
+    const hasTwImages = twitter?.images
+    if (!hasTwTitle) autoFillProps.title = openGraph.title
+    if (!hasTwDescription) autoFillProps.description = openGraph.description
+    if (!hasTwImages) autoFillProps.images = openGraph.images
+
+    if (Object.keys(autoFillProps).length > 0) {
+      const partialTwitter = resolveTwitter(
+        autoFillProps,
+        metadata.metadataBase
+      )
+      if (metadata.twitter) {
+        metadata.twitter = Object.assign({}, metadata.twitter, {
+          ...(!hasTwTitle && { title: partialTwitter?.title }),
+          ...(!hasTwDescription && {
+            description: partialTwitter?.description,
+          }),
+          ...(!hasTwImages && { images: partialTwitter?.images }),
+        })
+      } else {
+        metadata.twitter = partialTwitter
+      }
     }
-    metadata.twitter = resolveTwitter(overlappedProps, metadata.metadataBase)
   }
   return metadata
 }