How to enforce title, meta tags injected to <head/> only?

[vickyRathee]

Summary

In my website, the dynamic page metadata is added in footer instead the head. Is there any settings to fix it or am I missing anything?

/docs/:slug

import { Metadata } from 'next';
import { getPost } from '@/lib/discourse';
import { format, parseISO } from 'date-fns';
import { Post } from '@/types/docs';
import { getMetadata } from '@/lib/metadata';

// Ensures server-side rendering on every request
export const dynamic = 'force-dynamic'; 

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string[] }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const path = '/' + slug.join('/');
  const post: any = await getPost(path);
  return getMetadata(path, {
    title: post.title,
    description: post.description,
    image: post.image,
    type: 'article',
  });
}

export default async function DocsPage({
  params,
}: {
  params: Promise<{ slug: string[] }>;
}) {
  const { slug } = await params;
  const path = '/' + slug.join('/');
  const post: any = await getPost(path);

  return (
    <div className="max-w-7xl px-4 py-6">
      <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-6">
        {post.title}
      </h1>

      <article
        className="prose max-w-5xl dark:prose-invert mb-8 space-y-4"
        dangerouslySetInnerHTML={{ __html: post.html || '' }}
      />
    </div>
  );
}

If it check the page DOM, the meta tags, title etc is injected to very bottom of the page instead on head tag.

Additional information

Next version - 

"next": "^16.0.7",
"react": "^19.1.0",

Next config - 

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
  },
};

export default nextConfig;

Example

No response

[icyJoseph]

You'd need to opt-out from streaming metadata. https://nextjs.org/docs/app/api-reference/config/next-config-js/htmlLimitedBots#disabling

Test and verify the proposed code change. Note that, slow data fetching within the generateMetadata page may add overhead to your TTFB and other metrics too. That's what streaming metadata helps with.

[vickyRathee]

@icyJoseph does that mean, the metadata will be injected on head when a bot view my pages? While it's showing me on footer by default.

if i opt-out, it will stop streaming and always on head.

[icyJoseph]

For bots, streaming metadata strictly places the metadata in the head yes. You can change your user agent in Chrome, https://developer.chrome.com/docs/devtools/device-mode/override-user-agent, set it to Slurp or whatever other bot. Some of google bots do process JavaScript, and they receive the metadata streaming.

If you opt-out, everyone, including users, will see metadata in head.