Use summary_large_image as twitter card if images present by default (#53919)

This is an improvement for twitter card, if there's image present we could use `summary_large_image` to make the twitter card look better instead of using `summary` by default, so that users could benefit from the large image card display on twitter

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

@@ -145,9 +145,9 @@ export const resolveTwitter: FieldResolverExtraArgs<
   [ResolvedMetadata['metadataBase'], string | null]
 > = (twitter, metadataBase, titleTemplate) => {
   if (!twitter) return null
+  let card = 'card' in twitter ? twitter.card : undefined
   const resolved = {
     ...twitter,
-    card: 'card' in twitter ? twitter.card : 'summary',
     title: resolveTitle(twitter.title, titleTemplate),
   } as ResolvedTwitterMetadata
   for (const infoKey of TwitterBasicInfoKeys) {
@@ -156,6 +156,9 @@ export const resolveTwitter: FieldResolverExtraArgs<
   const imageMetadataBase = getSocialImageFallbackMetadataBase(metadataBase)
   resolved.images = resolveImages(twitter.images, imageMetadataBase)
 
+  card = card || (resolved.images?.length ? 'summary_large_image' : 'summary')
+  resolved.card = card
+
   if ('card' in resolved) {
     switch (resolved.card) {
       case 'player': {

test/e2e/app-dir/metadata/app/twitter/no-image/page.tsx

@@ -1,18 +1,14 @@
 export default function page() {
-  return 'twitter summary_large_image'
+  return 'twitter no image'
 }
 
 export const metadata = {
   twitter: {
-    card: 'summary_large_image',
     title: 'Twitter Title',
     description: 'Twitter Description',
     siteId: 'siteId',
     creator: 'creator',
     creatorId: 'creatorId',
-    images: {
-      url: 'https://twitter.com/large-image.png',
-      alt: 'image-alt',
-    },
+    images: undefined,
   },
 }

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

@@ -458,7 +458,7 @@ createNextDescribe(
         })
 
         await matchMultiDom('meta', 'name', 'content', {
-          'twitter:card': 'summary',
+          'twitter:card': 'summary_large_image',
           'twitter:title': 'My custom title',
           'twitter:description': 'My custom description',
           'twitter:image': [
@@ -763,7 +763,7 @@ createNextDescribe(
     })
 
     describe('twitter', () => {
-      it('should support default twitter summary card', async () => {
+      it('should support twitter card summary_large_image when image present', async () => {
         const browser = await next.browser('/twitter')
         const matchMultiDom = createMultiDomMatcher(browser)
 
@@ -775,12 +775,12 @@ createNextDescribe(
           'twitter:creator:id': 'creatorId',
           'twitter:image': 'https://twitter.com/image.png',
           'twitter:image:secure_url': 'https://twitter.com/secure.png',
-          'twitter:card': 'summary',
+          'twitter:card': 'summary_large_image',
         })
       })
 
-      it('should support default twitter summary_large_image card', async () => {
-        const browser = await next.browser('/twitter/large-image')
+      it('should render twitter card summary when image is not present', async () => {
+        const browser = await next.browser('/twitter/no-image')
         const matchMultiDom = createMultiDomMatcher(browser)
 
         await matchMultiDom('meta', 'name', 'content', {
@@ -789,9 +789,7 @@ createNextDescribe(
           'twitter:site:id': 'siteId',
           'twitter:creator': 'creator',
           'twitter:creator:id': 'creatorId',
-          'twitter:image': 'https://twitter.com/large-image.png',
-          'twitter:image:alt': 'image-alt',
-          'twitter:card': 'summary_large_image',
+          'twitter:card': 'summary',
         })
       })