Use og:image instead of og:image:url (#46570)

x-ref: #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

@@ -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()}
           />

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(