flint bluff
I'm having an issue with the metatags. When I use loading.tsx or template.tsx with a PageWrapper component that uses Suspense, it causes the metatags to be generated inside the <body>.
This issue occurs in pages that use generateMetadata, and within generateMetadata, there's an async fetch to retrieve data from Contentful. If I replace the fetch with a literal object, it works fine.
thorn nexusBOT
Hi @flint bluff. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The behavior you're experiencing—where metatags are rendered inside the <body> instead of the <head>—is a known and intentional result of how Next.js handles streaming metadata when using async data fetching in generateMetadata.
When generateMetadata is asynchronous (e.g., it performs a fetch to Contentful), Next.js may start streaming the page's HTML before the metadata is ready. In this case, the metadata is injected into the body as the page streams, rather than blocking the initial render to wait for the metadata. This is done to improve perceived performance for users. However, if generateMetadata resolves synchronously (such as when you return a literal object), the metadata is placed in the <head> as expected.
This behavior is especially triggered when you use Suspense, loading.tsx, or template.tsx, as these components can cause the UI to stream before metadata is available. The issue is more pronounced in recent Next.js versions (15.2 and above), and is documented and discussed in several issues:
// next.config.js
module.exports = {
experimental: {
htmlLimitedBots: /.*/,
},
}
Summary:
This is expected behavior in recent Next.js versions when using async generateMetadata and streaming. If you need metadata in the head for SEO or other reasons, consider using the htmlLimitedBots workaround, or avoid async operations in generateMetadata where possible. Be aware that this may have performance trade-offs.