[Metadata] [OpenGraph] Render og:image instead of og:image:url

[mwskwong]

Describe the feature you'd like to request

When specifying Open Graph image with the new metadata API in app/, Nex.js currently renders og:image:url instead of og:image. Although og:image:url technically matches the spec, not every website recognizes it. e.g., LinkedIn doesn't.

Using og:image will help in supporting different websites

Describe the solution you'd like

og:image is used instead of og:image:url

Describe alternatives you've considered

N/A.

[ciruz]

You are right, the docs and the code shows following example:

next.js/packages/next/src/lib/metadata/types/metadata-interface.ts

Line 268 in 5792533

* <meta property="og:image" content="https://example.com/og.png" />

  * {
  *   type: "website",
  *   url: "https://example.com",
  *   title: "My Website",
  *   description: "My Website Description",
  *   siteName: "My Website",
  *   images: [{
  *     url: "https://example.com/og.png",
  *   }],
  * }
  *
  * <meta property="og:type" content="website" />
  * <meta property="og:url" content="https://example.com" />
  * <meta property="og:site_name" content="My Website" />
  * <meta property="og:title" content="My Website" />
  * <meta property="og:description" content="My Website Description" />
  * <meta property="og:image" content="https://example.com/og.png" />

But in reality you will get with the same code following result:

<meta property="og:image:url" content="https://example.com/og.png">

[Antonio112009]

Could this issue affect the thumbnail in WhatsApp? I have an image LESS THAN 300KB, less than 256x256, and it's still does not load. However, I do not have the same issue in Twitter or LinkedIn.

[ciruz]

I work on multiple next.js sites, we define the og image like so:

<meta property="og:image" content="...">

We always use the image dimension 1200x630 and its getting recognized everywhere. WhatsApp, Facebook, LinkedIn, you name it.

You can try to use the Facebook Sharing Debugger, to validate your og tags:
https://developers.facebook.com/tools/debug/

[huozhi]

We've changed it to og:image in 13.2.3! Please try it out, thanks