page metadata inserted into body instead of head tag
Answered
Najmus Sakib posted this in #help-forum
I am using nextjs latest version: 15.4.6
and declare metadata in homepage. and no metadata in layout.
nextjs include metadata into body instead of head
see in https://ezycourse.com/ these information included in body.
and declare metadata in homepage. and no metadata in layout.
nextjs include metadata into body instead of head
see in https://ezycourse.com/ these information included in body.
export const metadata: Metadata = {
title:
'The Best Platform for Membership, Courses, Communities, Coaching and Built in Email Marketing',
description:
'Unlock 20+ Revenue Streams, Boost Your Brand, and Transform Your Audience into Paying Customers with EzyCourse.',
openGraph: {
locale: 'en_US',
type: 'website',
title:
'The Best Platform for Membership, Courses, Communities, Coaching and Built in Email Marketing',
description:
'Unlock 20+ Revenue Streams, Boost Your Brand, and Transform Your Audience into Paying Customers with EzyCourse.',
url: 'https://ezycourse.com',
siteName: 'EzyCourse',
images: [
{
url: 'https://ezycourse.b-cdn.net/4637/cmeb3who900q0528z3v7m6h0y.png',
width: 1600,
height: 840,
type: 'image/png',
},
],
},
verification: {
yandex: '961b643303cb2d17',
},
alternates: {
canonical: 'https://ezycourse.com/',
},
};17 Replies
@Najmus Sakib I am using nextjs latest version: 15.4.6
and declare metadata in homepage. and no metadata in layout.
nextjs include metadata into body instead of head
see in https://ezycourse.com/ these information included in body.
ts
export const metadata: Metadata = {
title:
'The Best Platform for Membership, Courses, Communities, Coaching and Built in Email Marketing',
description:
'Unlock 20+ Revenue Streams, Boost Your Brand, and Transform Your Audience into Paying Customers with EzyCourse.',
openGraph: {
locale: 'en_US',
type: 'website',
title:
'The Best Platform for Membership, Courses, Communities, Coaching and Built in Email Marketing',
description:
'Unlock 20+ Revenue Streams, Boost Your Brand, and Transform Your Audience into Paying Customers with EzyCourse.',
url: 'https://ezycourse.com',
siteName: 'EzyCourse',
images: [
{
url: 'https://ezycourse.b-cdn.net/4637/cmeb3who900q0528z3v7m6h0y.png',
width: 1600,
height: 840,
type: 'image/png',
},
],
},
verification: {
yandex: '961b643303cb2d17',
},
alternates: {
canonical: 'https://ezycourse.com/',
},
};
this is caused by streamingMetadata
https://github.com/vercel/next.js/issues/79313
shouldn't be an issue for SEO because nextjs will detect bots and disable streamingMetadata for bots, so for google crawlers for example they will see the title tags correctly being in <head>
https://github.com/vercel/next.js/issues/79313
shouldn't be an issue for SEO because nextjs will detect bots and disable streamingMetadata for bots, so for google crawlers for example they will see the title tags correctly being in <head>
as you can see your link when shared still embeds properly, so everything is fine, don't worry
But see in fb debugger: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fezycourse.com%2F
also when I am trying to post on linkedin, no og image is detected, instead it chooses random image from body.
also when I am trying to post on linkedin, no og image is detected, instead it chooses random image from body.
do you have any loading.tsx? if yes can try removing it, will help disable streaming metadata for that page
Ok, I am using useSearchparams in one of my provider, and used react suspense. do i need to remove that?
No, loading.tsx file in my project
so ideally [nextjs should be detect linkedin bot and disable streaming metadata for that bot](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#:~:text=For%20HTML%2Dlimited%20bots%20that%20can’t%20run%20JavaScript%20(e.g.%20Twitterbot)%2C%20metadata%20continues%20to%20block%20page%20rendering%20and%20is%20placed%20in%20the%20%3Chead%3E%20tag.), but seems it fails to huh, odd
So, if i remove react suspense from my provider, this will disable streaming metadata and fixed the issue right? I need the fix urgently. Or I have to back to previous nextjs version that will not cause streaming metadata issue. From which version this feature included or introduced? can you help with that information?
yeah im looking for an easy way out for you
looks like just downgrading to next 15.2 (edit: or 15.1) helps
Answer
the proper fix is to... report this to nextjs so they know the linkedin crawler is still getting the streamed metadata behaviour
Thanks I downgraded to 15.2.5. and fixed the issue for facebook debugger.
also will create an issue in github. I saw in doc, I can override via htmlLimitedBots in next config. but that is an extra hassle, framework should handle this type of work.
Thanks again.
also will create an issue in github. I saw in doc, I can override via htmlLimitedBots in next config. but that is an extra hassle, framework should handle this type of work.
Thanks again.
@joulev looks like just downgrading to next 15.2 **(edit: or 15.1)** helps
15.2.5 works also. I just tried
@Najmus Sakib Thanks I downgraded to 15.2.5. and fixed the issue for facebook debugger.
also will create an issue in github. I saw in doc, I can override via htmlLimitedBots in next config. but that is an extra hassle, framework should handle this type of work.
Thanks again.
they already handle it actually, in here https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/router/utils/html-bots.ts#L5 i already see LinkedInBot FacebookBot etc
i suppose there is some sort of bug...
i suppose there is some sort of bug...
but yeah, happy to hear downgrading works. unless you need a 15.3+ feature, this sounds like the easiest way out
especially when you need it urgently
@joulev especially when you need it urgently
Yes, Thanks, You helped me instant. Grateful to you.