bump

Hey, did your issue got solved?

No, coz I'm alone here 😭

For sure its not a bug. The issue pops up because you configured the metadata in an wrong way. You need to create metadata export. ex. -> export const metadata = { metadataBase: new URL(${mention url here using env}), title:"Title", description:"Description", } Test SEO permormance using live server with the help of 3rd party tools.

Looks like I shared the wrong URL. this is the correct one: https://codesandbox.io/p/devbox/nextjs-metadatabase-bug-tn67vh

I have this

export const metadata = {
  metadataBase: new URL(`https://mywebsite.com/`),
};

write like-> process.env.url , make sure its a server component.your nextjs version should be >=14

that did not work either. on latest canary.

why you are using canary? use 14 or 14.1. use stable version.

nextjs requires canary when reproducing bug. in my local development, its stable version actually.

if you are using og image and twitter image those needs to be absolute url. make sure those image urls are not relative one. Also as I said you need to provide a live domain to metadataBase and check the result in production stage. You should check SEO performances in prod stage only. I am sure its not a bug. All canary bugs were fixed by 2023 itself.

the warning is visible in the local development.. and its really irritating.

btw, I should mention that it happens when we use opengraph-image.png image which is a special type.

custom images doesn't have this problem

Why are you worrying about waings in dev stage? try to remove cache memory of your browser and check again. However as I told you SEO to be only checked when your application is already deployed to a live server with a valid domain.

for each refresh, it repeated like this..

so if its a bug, it can be fixed right? it's not blocking, but i want to make sure its a bug in next.js, not issue in my code.

How can you say its a bug without removing your browser cache and also without checking it in a live server? And Also code for SEO only to be introduced when your full application is ready and already deployed to a live server. SEO should not be tested in localhost!!. Howver its your own choice.

yeah, that's why i posted here to confirm. also made a reproducable codesandbox, if you want to double check. the issue is not about the SEO, its about the metadata.metadataBase is not set warning even after I set that.

I am also using metadataBase (nextjs version 14.1) without any browser warning!! Are you getting this warning in mozilla,safari or MS edge too?As you mention that this warning pops up when you use a special type og image. may be be this is the issue , you need to check og images are absolute in nature. below Link could help you : https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

warning is in the developer console. can you add a opengraph-image.png image inside the /app folder and see if it shows the warning?

I am also experiencing this. I get the same error, but only in local development builds. @bscdev#1145 I do not need to test SEO locally but I would like not not have errors when I run build.

⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase