metadata: prefer og title rather than metadata title for fallback twi…

…tter title (#64331) Like the No.2 point mentioned in #63489, metadata's title and description should be the last fallback, if you specify `title` or `description` in `openGraph` but not in `metadata.twitter`, they should inherit from open graph first. For `metadata.twitter`'s fallback order should be: twitter's title/description > opengraph's title/description > metadata's title/description Resolves #63489 Closes NEXT-3073
vercel · Apr 11, 2024 · ce81bbb · ce81bbb
1 parent 38850bf
commit ce81bbb
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 10 deletions.
diff --git a/packages/next/src/lib/metadata/resolve-metadata.test.ts b/packages/next/src/lib/metadata/resolve-metadata.test.ts
@@ -340,6 +340,42 @@ describe('accumulateMetadata', () => {
       })
     })
 
+    it('should prefer title and description from openGraph rather than metadata for twitter', async () => {
+      const metadataItems: MetadataItems = [
+        [
+          {
+            title: 'doc title',
+            openGraph: {
+              title: 'og-title',
+              description: 'og-description',
+              images: 'https://test.com',
+            },
+          },
+          null,
+        ],
+      ]
+      const metadata = await accumulateMetadata(metadataItems)
+      expect(metadata).toMatchObject({
+        openGraph: {
+          title: {
+            absolute: 'og-title',
+            template: null,
+          },
+          description: 'og-description',
+          images: [{ url: new URL('https://test.com') }],
+        },
+        twitter: {
+          card: 'summary_large_image',
+          title: {
+            absolute: 'og-title',
+            template: null,
+          },
+          description: 'og-description',
+          images: [{ url: new URL('https://test.com') }],
+        },
+      })
+    })
+
     it('should fill only the existing props from openGraph to twitter', async () => {
       const metadataItems: MetadataItems = [
         [

diff --git a/packages/next/src/lib/metadata/resolve-metadata.ts b/packages/next/src/lib/metadata/resolve-metadata.ts
@@ -545,11 +545,13 @@ export async function resolveMetadataItems({
 type WithTitle = { title?: AbsoluteTemplateString | null }
 type WithDescription = { description?: string | null }
 
-const hasTitle = (metadata: WithTitle | null) => !!metadata?.title?.absolute
+const isTitleTruthy = (title: AbsoluteTemplateString | null | undefined) =>
+  !!title?.absolute
+const hasTitle = (metadata: WithTitle | null) => isTitleTruthy(metadata?.title)
 
 function inheritFromMetadata(
-  metadata: ResolvedMetadata,
-  target: (WithTitle & WithDescription) | null
+  target: (WithTitle & WithDescription) | null,
+  metadata: ResolvedMetadata
 ) {
   if (target) {
     if (!hasTitle(target) && hasTitle(metadata)) {
@@ -568,11 +570,6 @@ function postProcessMetadata(
 ): 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.
@@ -586,8 +583,16 @@ function postProcessMetadata(
     const hasTwImages = Boolean(
       twitter?.hasOwnProperty('images') && twitter.images
     )
-    if (!hasTwTitle) autoFillProps.title = openGraph.title
-    if (!hasTwDescription) autoFillProps.description = openGraph.description
+    if (!hasTwTitle) {
+      if (isTitleTruthy(openGraph.title)) {
+        autoFillProps.title = openGraph.title
+      } else if (metadata.title && isTitleTruthy(metadata.title)) {
+        autoFillProps.title = metadata.title
+      }
+    }
+    if (!hasTwDescription)
+      autoFillProps.description =
+        openGraph.description || metadata.description || undefined
     if (!hasTwImages) autoFillProps.images = openGraph.images
 
     if (Object.keys(autoFillProps).length > 0) {
@@ -609,6 +614,12 @@ function postProcessMetadata(
       }
     }
   }
+
+  // If there's no title and description configured in openGraph or twitter,
+  // use the title and description from metadata.
+  inheritFromMetadata(openGraph, metadata)
+  inheritFromMetadata(twitter, metadata)
+
   return metadata
 }