Metadata difference in next.js 15 and next.js 14, is this intended? #79916
Replies: 3 comments 7 replies
-
|
Facing same issue in Next.js 15.3.X version. Before it was working Fine. Actually What happens is, all meta tags are shifted to the tag instead of . And for the some reason if you refresh the page again page is served with metadata in head and vice versa. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Please read through this: #79404 (comment) This is part of Streaming Metadata.
It can be turned off through |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
Thanks! It helps me a lot. Is there any benefit of streaming metadata than just embedding metadata to html (like previous versions...)? |
Beta Was this translation helpful? Give feedback.
-
|
Aha, which user agents are used by these scrappers? I know Lighthouse is an edge case at the moment, cuz it only inspects the head of the document. Previously, Next.js was waiting for metadata to resolve, before it moved on to process the body of the document. When it makes sense, there's a performance boost to be taken here, which is to not wait for the metadata, let it resolve "in the background", while the body is prepared and streamed. There's a very nice breakdown here, https://nextjs.org/blog/next-15-2#streaming-metadata |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for introducing the pros of streaming metadata and its breakdown. In this case, I checked with opengraph.xyz and vercel's default open graph checker, and they both didn't work. I guess that the "streamed" metadata goes inside of body tag normally (and hoisted to the head), but if there's no It works fine with html-limited bots in dev server. I'll submit the differences with agents, and with/without |
Beta Was this translation helpful? Give feedback.
-
DetailsDetailed responses with different user-agents, existence of Checked with following command: curl -A "<User-Agent>" http://localhost:3000 | npx prettier --parser html | rg "(head|title|body)"Used agents: streaming bots( With
|
| Streaming bot (dev) | Streaming bot (prod) | Html bot (dev) | Html bot (prod) | |
|---|---|---|---|---|
w/ { children } |
head or body | head | head | head |
w/o { children } |
X | X | head | X |
Is this related to the implementation of metadata using the meta tag of react 19? Anyone who knows why the html bots cannot also access the metadata in production server?
Beta Was this translation helpful? Give feedback.
4 replies
-
|
what do you mean when you say |
Beta Was this translation helpful? Give feedback.
-
|
it means when there's no i wonder why there is no metadata that should be in the head when the body is empty. |
Beta Was this translation helpful? Give feedback.
-
|
Who renders the metadata, the layout or the page file. |
Beta Was this translation helpful? Give feedback.
-
|
the layout file in this case. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Summary
I've encountered that the mechanism of metadata is different between next.js 14 and 15 in non-children case.
If the
layout.tsxhas no children inside the<body>tag, then the metadata (static, or also dynamic one created withgenerateMetadatafunction) is not found in the first HTTP request in next.js 15. However, there are metadata for the same case in next.js 14.Is this intended? If so, can I get some kind of reasons for this?
How to reproduce
{ children }in layout.tsx (/src/app/layout.tsx)// layout.tsx export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} > - { children } </body> </html> ); }Detailed description
The first HTTP response of the page can affect the SEO(including open graph...), so if you check the response via cURL or the network tab of browser devtools, etc..., you can find the difference between two versions.
Here's the first HTTP GET response for next.js 15 project. (head tag only)
There is no metadata that I written (title, description).
And here's the same one but for the next.js 14 project.
There are the metadata.
Additional information
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions