og:image & canonical ads trailing slash when metadataBase is set

[skworden]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/zen-sid-h9llk3

To Reproduce

Add metadataBase and openGraph.url and export it in the root layout and/or in the root page that is nested in a a route group. Visit your projects homepage.

export const metadata: Metadata = {
  metadataBase: new URL("https://vercel.com"),
  openGraph: {
    url: "/", // or "./"
  },
};

Notes:
trailingSlash is false

I currently use route group for my root page but I've tested it without the route group and it still has the same issues.

• app
  • (route group)
    • page.tsx (home)
  • layout.tsx

Current vs. Expected behavior

Current output: <meta content="https://vercel.com/" property="og:url">
Expected output (no trailing slash or trailing slash if it's enabled in next.config): <meta content="https://vercel.com" property="og:url">

According to the docs, there shouldn't be a trailing slash.

If you omit the, tag it won't get set. Meaning, there isn't a way to set the url without Next.js adding a trailing slash.

The only way to get Next to not add the trailing slash it to omit metadataBase. However, if you omit the attribute, you get the following warning - metadata.metadataBase is not set for resolving social open graph or twitter images, using "my url set in openGraph.url"

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:31:00 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6020
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 8.10.1
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:  { 
  poweredByHeader: false,
  reactStrictMode: true,
  swcMinify: true,
}

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

Metadata (metadata, generateMetadata, next/head)

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

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

My application is deployed on Vercel. It also happens in locally. This is only on the home page. We just omit it on the homepage because of this.

[mpandzo]

This is also the case for doing the same with the canonical setting:

    alternates: {
      canonical: 'https://acme.com',
    },

Note: next.config.js has trailingSlash: false.

As @skworden mentions if you omit metadataBase: new URL('https://acme.com'), from layout.tsx you can get the canonical to use the url without the trailing slash. If you include the metadataBase your canonical will include the trailing slash.

[denisb97]

In order to make it working you need to set up the metadataBase in the root layout

e.g.

metadataBase: new URL('https://acme.com')

Then on your page you only need to use a relative path instead of an otherwise required absolute URL.

 alternates: {
      canonical: '/test',
  },

<link rel="canonical" href="https://acme.com/test", without any trailing slashes

More about that here

[huozhi]

It's already fixed with in latest v14 or you can upgrade to v15 directly to get this issue fixed