Inherit title and description from metadata into social cards (#57857)

Social metadata will be display properly if there's `title` and `description` configured.
If you have `title` and `description` configured in metadata, some people's intuition will be "yes I had them, they should be the same if I have `openGraph` or `twitter`". 

This PR improves the configuration that you don't have to configure them as duplicate both in top `metadata` export and `metadata.openGraph` or `metadata.twitter`. But we don't always assign them if you don't configure social cards (open graph or twitter), this way users should be able to omit social cards if possible.

x-ref: [feedback from slack](https://vercel.slack.com/archives/C03KAR5DCKC/p1698548491415089?thread_ts=1698512393.500649&cid=C03KAR5DCKC)

Author: huozhi

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

@@ -461,6 +461,92 @@ describe('accumulateMetadata', () => {
         },
       })
     })
+
+    it('should inherit metadata title description into openGraph or twitter if they are configured', async () => {
+      const metadataItems1: MetadataItems = [
+        [
+          {
+            title: 'My title',
+            description: 'My description',
+            openGraph: {
+              images: 'https://test.com/og.png',
+            },
+          },
+          null,
+        ],
+      ]
+      const metadata1 = await accumulateMetadata(metadataItems1)
+      expect(metadata1).toMatchObject({
+        openGraph: {
+          title: {
+            absolute: 'My title',
+            template: null,
+          },
+          description: 'My description',
+        },
+        twitter: {
+          title: {
+            absolute: 'My title',
+            template: null,
+          },
+          description: 'My description',
+        },
+      })
+
+      const metadataItems2: MetadataItems = [
+        [
+          {
+            title: 'My title',
+            description: 'My description',
+            twitter: {
+              images: 'https://test.com/twitter.png',
+            },
+          },
+          null,
+        ],
+      ]
+      const metadata2 = await accumulateMetadata(metadataItems2)
+      expect(metadata2).toMatchObject({
+        openGraph: null,
+        twitter: {
+          title: {
+            absolute: 'My title',
+            template: null,
+          },
+          description: 'My description',
+        },
+      })
+
+      // Don't override if there's already a title in twitter
+      const metadataItems3: MetadataItems = [
+        [
+          {
+            title: 'My title',
+            description: 'My description',
+            twitter: {
+              title: 'My twitter title',
+              images: 'https://test.com/twitter.png',
+            },
+          },
+          null,
+        ],
+      ]
+      const metadata3 = await accumulateMetadata(metadataItems3)
+      expect(metadata3).toMatchObject({
+        openGraph: null,
+        title: {
+          absolute: 'My title',
+          template: null,
+        },
+        twitter: {
+          title: {
+            absolute: 'My twitter title',
+            template: null,
+          },
+          description: 'My description',
+        },
+      })
+    })
   })
 
   describe('alternate', () => {

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

@@ -13,6 +13,7 @@ import type { OpenGraph } from './types/opengraph-types'
 import type { ComponentsType } from '../../build/webpack/loaders/next-app-loader'
 import type { MetadataContext } from './types/resolvers'
 import type { LoaderTree } from '../../server/lib/app-dir-module'
+import type { AbsoluteTemplateString } from './types/metadata-types'
 import {
   createDefaultMetadata,
   createDefaultViewport,
@@ -517,19 +518,46 @@ export async function resolveMetadataItems({
   return metadataItems
 }
 
+type WithTitle = { title?: AbsoluteTemplateString | null }
+type WithDescription = { description?: string | null }
+
+const hasTitle = (metadata: WithTitle | null) => !!metadata?.title?.absolute
+
+function inheritFromMetadata(
+  metadata: ResolvedMetadata,
+  target: (WithTitle & WithDescription) | null
+) {
+  if (target) {
+    if (!hasTitle(target) && hasTitle(metadata)) {
+      target.title = metadata.title
+    }
+    if (!target.description && metadata.description) {
+      target.description = metadata.description
+    }
+  }
+}
+
 const commonOgKeys = ['title', 'description', 'images'] as const
 function postProcessMetadata(
   metadata: ResolvedMetadata,
   titleTemplates: TitleTemplates
 ): ResolvedMetadata {
   const { openGraph, twitter } = metadata
+
+  // If there's no title and description configured in openGraph or twitter,
+  // use the title and description from metadata.
+  inheritFromMetadata(metadata, openGraph)
+  inheritFromMetadata(metadata, twitter)
+
   if (openGraph) {
+    // If there's openGraph information but not configured in twitter,
+    // inherit them from openGraph metadata.
     let autoFillProps: Partial<{
       [Key in (typeof commonOgKeys)[number]]: NonNullable<
         ResolvedMetadata['openGraph']
       >[Key]
     }> = {}
-    const hasTwTitle = twitter?.title.absolute
+    const hasTwTitle = hasTitle(twitter)
     const hasTwDescription = twitter?.description
     const hasTwImages = Boolean(
       twitter?.hasOwnProperty('images') && twitter.images