From 4b705a5473320a9f047683abad80793c27f3eea5 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 28 Feb 2023 22:46:15 +0100
Subject: [PATCH] Use og:image instead of og:image:url (#46570)

x-ref: https://github.com/vercel/next.js/discussions/46545

In the open graph protocol spec, `og:image` and `og:image:url` are identical. But some platform might don't have full support for it.

We change it back to render `og:image` as it's the most common and compatible format, also easy to align with the code docs
---
 packages/next/src/lib/metadata/generate/meta.tsx | 8 +++++++-
 test/e2e/app-dir/metadata/metadata.test.ts       | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/lib/metadata/generate/meta.tsx b/packages/next/src/lib/metadata/generate/meta.tsx
index d37121960d023..b84c95f2c5d55 100644
--- a/packages/next/src/lib/metadata/generate/meta.tsx
+++ b/packages/next/src/lib/metadata/generate/meta.tsx
@@ -50,7 +50,13 @@ function ExtendMeta({
           <Meta
             key={keyPrefix + ':' + k + '_' + index}
             {...(propertyPrefix
-              ? { property: propertyPrefix + ':' + 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()}
           />
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(