metadataBase not respected for og images

[wereHamster]

Link to the code that reproduces this issue

https://github.com/wereHamster/nextjs-metadata-base-og-image-bug

To Reproduce

Literally copied the code from the docs:

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}

Current vs. Expected behavior

Expected behavior is that the og image url is prefixed with metadata base, but it's not.

In the docs:

<meta property="og:image" content="https://acme.com/og-image.png" />

actual:

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: 8.15.5
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[dwjohnston]

Work around for this is to explicitly set the domain on your images:

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: 'https://acme.com/og-image.png',
  },
}

[zineanteoh]

+1 encountered the same issue here.

specifying metadataBase does not prefix og + twitter image url.

this makes the documentation here factually incorrect.