From bca93d05a4f484fb0c836be866fe3464a6f99c37 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 28 Feb 2023 18:27:33 +0100
Subject: [PATCH 1/2] Use og:image instead of og:image:url

---
 packages/next/src/lib/metadata/generate/meta.tsx      | 9 +++++++--
 packages/next/src/lib/metadata/generate/opengraph.tsx | 6 +++++-
 test/e2e/app-dir/metadata/metadata.test.ts            | 4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/next/src/lib/metadata/generate/meta.tsx b/packages/next/src/lib/metadata/generate/meta.tsx
index d37121960d023..9eafb92de281d 100644
--- a/packages/next/src/lib/metadata/generate/meta.tsx
+++ b/packages/next/src/lib/metadata/generate/meta.tsx
@@ -36,10 +36,12 @@ function ExtendMeta({
   content,
   namePrefix,
   propertyPrefix,
+  mapKey,
 }: {
   content?: ExtendMetaContent
   namePrefix?: string
   propertyPrefix?: string
+  mapKey: (key: string) => string
 }) {
   const keyPrefix = namePrefix || propertyPrefix
   if (!content) return null
@@ -50,8 +52,8 @@ function ExtendMeta({
           <Meta
             key={keyPrefix + ':' + k + '_' + index}
             {...(propertyPrefix
-              ? { property: propertyPrefix + ':' + k }
-              : { name: namePrefix + ':' + k })}
+              ? { property: mapKey(propertyPrefix + ':' + k) }
+              : { name: mapKey(namePrefix + ':' + k) })}
             content={typeof v === 'string' ? v : v?.toString()}
           />
         )
@@ -64,10 +66,12 @@ export function MultiMeta({
   propertyPrefix,
   namePrefix,
   contents,
+  mapKey = (key) => key,
 }: {
   propertyPrefix?: string
   namePrefix?: string
   contents?: MultiMetaContent | null
+  mapKey?: (key: string) => string
 }) {
   if (typeof contents === 'undefined' || contents === null) {
     return null
@@ -98,6 +102,7 @@ export function MultiMeta({
               namePrefix={namePrefix}
               propertyPrefix={propertyPrefix}
               content={content}
+              mapKey={mapKey}
             />
           )
         }
diff --git a/packages/next/src/lib/metadata/generate/opengraph.tsx b/packages/next/src/lib/metadata/generate/opengraph.tsx
index b0c7711a69447..9f590a8895f19 100644
--- a/packages/next/src/lib/metadata/generate/opengraph.tsx
+++ b/packages/next/src/lib/metadata/generate/opengraph.tsx
@@ -202,7 +202,11 @@ export function OpenGraphMetadata({
       <Meta property="og:locale" content={openGraph.locale} />
       <Meta property="og:country_name" content={openGraph.countryName} />
       <Meta property="og:ttl" content={openGraph.ttl?.toString()} />
-      <MultiMeta propertyPrefix="og:image" contents={openGraph.images} />
+      <MultiMeta
+        propertyPrefix="og:image"
+        mapKey={(key) => (key === 'og:image:url' ? 'og:image' : key)}
+        contents={openGraph.images}
+      />
       <MultiMeta propertyPrefix="og:video" contents={openGraph.videos} />
       <MultiMeta propertyPrefix="og:audio" contents={openGraph.audio} />
       <MultiMeta propertyPrefix="og:email" contents={openGraph.emails} />
diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts
index 003c29f5412ed..14cc949c5bfb6 100644
--- a/test/e2e/app-dir/metadata/metadata.test.ts
+++ b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -418,7 +418,7 @@ createNextDescribe(
         )
         await checkMetaPropertyContentPair(browser, 'og:locale', 'en-US')
         await checkMetaPropertyContentPair(browser, 'og:type', 'website')
-        await checkMetaPropertyContentPair(browser, 'og:image:url', [
+        await checkMetaPropertyContentPair(browser, 'og:image', [
           'https://example.com/image.png',
           'https://example.com/image2.png',
         ])
@@ -464,7 +464,7 @@ createNextDescribe(
 
       it('should pick up opengraph-image and twitter-image as static metadata files', async () => {
         const $ = await next.render$('/opengraph/static')
-        expect($('[property="og:image:url"]').attr('content')).toMatch(
+        expect($('[property="og:image"]').attr('content')).toMatch(
           /https:\/\/example.com\/_next\/static\/media\/metadata\/opengraph-image.\w+.png/
         )
         expect($('[property="og:image:type"]').attr('content')).toBe(

From 188ade29f856a56c98d13f453f13efcc0d72a007 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 28 Feb 2023 19:33:41 +0100
Subject: [PATCH 2/2] move the handling inside

---
 packages/next/src/lib/metadata/generate/meta.tsx  | 15 ++++++++-------
 .../next/src/lib/metadata/generate/opengraph.tsx  |  6 +-----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/next/src/lib/metadata/generate/meta.tsx b/packages/next/src/lib/metadata/generate/meta.tsx
index 9eafb92de281d..b84c95f2c5d55 100644
--- a/packages/next/src/lib/metadata/generate/meta.tsx
+++ b/packages/next/src/lib/metadata/generate/meta.tsx
@@ -36,12 +36,10 @@ function ExtendMeta({
   content,
   namePrefix,
   propertyPrefix,
-  mapKey,
 }: {
   content?: ExtendMetaContent
   namePrefix?: string
   propertyPrefix?: string
-  mapKey: (key: string) => string
 }) {
   const keyPrefix = namePrefix || propertyPrefix
   if (!content) return null
@@ -52,8 +50,14 @@ function ExtendMeta({
           <Meta
             key={keyPrefix + ':' + k + '_' + index}
             {...(propertyPrefix
-              ? { property: mapKey(propertyPrefix + ':' + k) }
-              : { name: mapKey(namePrefix + ':' + k) })}
+              ? // Use `og:image` instead of `og:image:url` to be more compatible as it's a more common format
+                {
+                  property:
+                    propertyPrefix === 'og:image' && k === 'url'
+                      ? 'og:image'
+                      : propertyPrefix + ':' + k,
+                }
+              : { name: namePrefix + ':' + k })}
             content={typeof v === 'string' ? v : v?.toString()}
           />
         )
@@ -66,12 +70,10 @@ export function MultiMeta({
   propertyPrefix,
   namePrefix,
   contents,
-  mapKey = (key) => key,
 }: {
   propertyPrefix?: string
   namePrefix?: string
   contents?: MultiMetaContent | null
-  mapKey?: (key: string) => string
 }) {
   if (typeof contents === 'undefined' || contents === null) {
     return null
@@ -102,7 +104,6 @@ export function MultiMeta({
               namePrefix={namePrefix}
               propertyPrefix={propertyPrefix}
               content={content}
-              mapKey={mapKey}
             />
           )
         }
diff --git a/packages/next/src/lib/metadata/generate/opengraph.tsx b/packages/next/src/lib/metadata/generate/opengraph.tsx
index 9f590a8895f19..b0c7711a69447 100644
--- a/packages/next/src/lib/metadata/generate/opengraph.tsx
+++ b/packages/next/src/lib/metadata/generate/opengraph.tsx
@@ -202,11 +202,7 @@ export function OpenGraphMetadata({
       <Meta property="og:locale" content={openGraph.locale} />
       <Meta property="og:country_name" content={openGraph.countryName} />
       <Meta property="og:ttl" content={openGraph.ttl?.toString()} />
-      <MultiMeta
-        propertyPrefix="og:image"
-        mapKey={(key) => (key === 'og:image:url' ? 'og:image' : key)}
-        contents={openGraph.images}
-      />
+      <MultiMeta propertyPrefix="og:image" contents={openGraph.images} />
       <MultiMeta propertyPrefix="og:video" contents={openGraph.videos} />
       <MultiMeta propertyPrefix="og:audio" contents={openGraph.audio} />
       <MultiMeta propertyPrefix="og:email" contents={openGraph.emails} />