Fill basic twitter metadata with opengraph when missing (vercel#50854)

When twitter metadata is not provided but opengraph metadata is, fill the opengraph basic information for twitter metadata.
Twitter card can't be displayed if there's no information from twitter meta tags, at least the `twitter:card`. We fill the `title` `description` and `images` these 3 overlapped properties from opengraph image so they can be displayed properly

Closes NEXT-1111

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

@@ -42,6 +42,10 @@ export type MetadataItems = [
   StaticMetadata
 ][]
 
+type MetadataAccumulationOptions = {
+  pathname: string
+}
+
 function mergeStaticMetadata(
   metadata: ResolvedMetadata,
   staticFilesMetadata: StaticMetadata
@@ -354,8 +358,17 @@ export async function resolveMetadata({
   return metadataItems
 }
 
-type MetadataAccumulationOptions = {
-  pathname: string
+function postProcessMetadata(metadata: ResolvedMetadata): ResolvedMetadata {
+  const { openGraph, twitter } = metadata
+  if (openGraph && !twitter) {
+    const overlappedProps = {
+      title: openGraph.title,
+      description: openGraph.description,
+      images: openGraph.images,
+    }
+    metadata.twitter = resolveTwitter(overlappedProps, metadata.metadataBase)
+  }
+  return metadata
 }
 
 export async function accumulateMetadata(
@@ -444,5 +457,5 @@ export async function accumulateMetadata(
     }
   }
 
-  return resolvedMetadata
+  return postProcessMetadata(resolvedMetadata)
 }

test/e2e/app-dir/metadata/metadata.test.ts

@@ -500,6 +500,19 @@ createNextDescribe(
           'og:image:height': ['600', '1600'],
           'og:image:alt': 'My custom alt',
         })
+
+        await matchMultiDom('meta', 'name', 'content', {
+          'twitter:card': 'summary',
+          'twitter:title': 'My custom title',
+          'twitter:description': 'My custom description',
+          'twitter:image': [
+            'https://example.com/image.png',
+            'https://example.com/image2.png',
+          ],
+          'twitter:image:width': ['800', '1800'],
+          'twitter:image:height': ['600', '1600'],
+          'twitter:image:alt': 'My custom alt',
+        })
       })
 
       it('should support opengraph with article type', async () => {