How to set page title and description if page is "use client" ?

[hexionaut]

Hi,

The only solution I find actually is to have a "dump" page.tsx who contain a main component with my content.

Is the new Metadata API the only way to setup those page informations ?

Thanks !

[icyJoseph]

Yeah, refactoring seems be the way to go. Keep the page a server component, add the metadata there, and import the client component to it. Makes you miss how flexible the Head component was, but at the same time, it sort of makes sense to separate these... at least if the general design pattern is to push client components to the leaves of the React tree.

An update on this:

The Metadata API exists to help Next.js manage and compose the metadata for a route. However, React itself also supports rendering document metadata, so yes — you can totally inline:

<title>Hello world</title>

in your JSX. React will hoist it into the document <head>, and this works from a Client Component too.

So for a page that has "use client" at the top, that can be an escape hatch.

The main tradeoff is that you're managing the title from within the component tree rather than through Next.js' route-level metadata system, and the two don't compose — they just both emit.

You need to be disciplined about ownership: if multiple components render <title> at the same time — including one coming from the Metadata API — you'll end up with multiple title elements. The HTML spec says the first one in tree order applies, and static metadata tags are emitted first, in that case your inlined <title> just appears to do nothing, for example if a root layout with metadata.title is present, like in create-next-app default. This ordering is inverted when streaming metadata kicks in.

For most pages I'd still lean toward keeping the page as a Server Component and using the Metadata API, with Client Components pushed further down the tree.

[ndroo]

Start with a server side default, and then, inside the client component, use an effect to modify the document.title property.

Is this actually an acceptable solution? Feels like that might not get you an accurate result when Google etc indexes the pages.

[harryparkinson101]

In my Next.js React app I found a work around by getting the document.title and using a useEffect hook to stop it instantly changing back:

"use client";

import Head from "next/head";

import { useEffect } from "react";

 export default function About() {
  useEffect(() => {
    document.title = "About Us ";
  }, []);
  return (
    <>
      <Head>
        <title>{document.title}</title>
        <meta
          name="description"
          content="example description"
        />
      </Head>

Someone feel free to add to this if this has any side effects?

[cupid20103]

Yeah, refactoring seems be the way to go. Keep the page a server component, add the metadata there, and import the client component to it. Makes you miss how flexible the Head component was, but at the same time, it sort of makes sense to separate these... at least if the general design pattern is to push client components to the leaves of the React tree.

I am getting issue like this in this case.
Error: document is not defined

[I-GiM]

"Makes you miss how flexible the Head component was..."

Why is this even in the conversation? I do not claim to be some super dev but why? I just really want to understand what the developers believe. Not just what they put out in docs for people to read that is if it is even found.
Like i feel like i would want to talk to decision makers regularly and simply tell them from a builder perspective, "this part is unnecessary, throw it away"! Oh well!

[icyJoseph]

I did an update to the main answer with regards to just using a title tag in Client Components.

[wasifhassan101]

Put the metadata in nested layouts, details here: Nesting Layouts

Works for me.

[anarkrypto]

The bad part of this solution is that you can't create titles that depend on search params, after all, layouts don't receive searchParams as a prop. You need to use the useSearchParams hook, but then only with use client.

[arshtec]

My layout renders on the client side, for route info needs, and I just used the tag after. and it worked just fine.

[sujan-s]

Guys, WTF

[sujan-s]

All this SSR/CSR aside, changing the page title is a utterly basic requirement of web development—if I have to bend over backwards to do something as rudimentary as this, I’m sorry, @vercel you folks have lost the plot.

[ospira]

😢

[jserrao]

I got you Omar ;) : #50872 (comment)

[ospira]

@jserrao 😄🍻

[SukoonAdmin]

so true @sujan-s whatever Rocket Science they add but I will also move away from the vercel now

[chemiadel]

In my case I multi languages titles, I ended creating hook to change title.

mounted state to be sure that the code running in client side.
re-run if locale changes

export function useTitle(text: string) {
  const { localeLang } = useLang();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (mounted) document.title = text;
  }, [localeLang, mounted]);
}

usage

  ...
  const { t } = useLang();
  useTitle("Company | " + t("home"));
  ...

[sujan-s]

It’s unthinkable that we have to resort to such antics to do a basic task of changing the document title.
Do better, Vercel.

[anarkrypto]

Changing the page title in the client is not good for SEO. In addition to scoring less in search engines, I've had strange experiences with Google Analytics registering pages with an undefined title, for example.

[chemiadel]

Changing the page title in the client is not good for SEO. In addition to scoring less in search engines, I've had strange experiences with Google Analytics registering pages with an undefined title, for example.

My usecase for nextjs was a dashboard behind login portal, so true that wont do well for SEO based websites

[furkankaracan]

Changing the page title in the client is not good for SEO. In addition to scoring less in search engines, I've had strange experiences with Google Analytics registering pages with an undefined title, for example.

Not every website has to be SEO optimized. For most SaaS apps, where things happen after the user logs in, you don't need SEO for these pages but still need to change the document title!

[TheCeloReis]

Something so trivial, they managed to make it complex and had to implement.

[priyangsubanerjee]

WTF. The <Head> component was much better than this. This is complete shit @vercel

[audelqua]

word of wisdom

[anhtran]

Sometimes we will need to build "absolute" client components (account page, edit profile, orders list...). It will be very bad if you cannot at least change the title of these pages.

I know somebody will say that don't use nextjs for that situation... I'm fine!

[priyangsubanerjee]

They just made a crap out of nowhere. I love the old page router, much more client friendly !!

[vishnupeas]

You can pass the client component inside server component and use the same fetch request (which is cached) both in server component to fetch metaData and on client component to fetch data for your component.

[DanielOttodev]

Just create a <title> </title> tag in the component if all you need is the title to change :)

[m1dok]

I agree, in some contexts it is better not to insert the metadata on the layout and to insert the title/description for each page

[guygreenleaf]

Yeah this is pretty ridiculous.

For page titles in client components, you can use a <title></title> tag within the component.

For descriptions....yeah there doesn't seem to be a way to do this besides the whacky work-around of nesting a client component in a server component.

Dropping the ball daily @vercel , great stuff.

[sarrahman-me]

Definitions complicate things that are actually easy

[jserrao]

I think they've now added in a solution to getting searchParams if you check the docs again.

searchParams param

There's now a searchParams param you can add into your generateMetadata function but it has to be done in a server component:

generateMetadata({ params, searchParams }) {}

One gotcha is that it works differently than the client side searchParams in that you don't get the full web API to look through params. So if you had a route like: /articles?post=slug-here, you'd call searchParams.post to get slug-here. One big bonus is that it dynamically updates itself server-side, so you don't have to juggle state changes in useEffect - it just kinda magically works. As you change the URLs client-side, the metadata object changes in real time with no work on your side.

Example Usage

My scenario is that I have a digest of articles accessible under one path, so my data payload for a month edition of my magazine is like 4-5 articles that require client navigation. My paths are like /category/{issue}?post={article-slug}. With that in mind, this is how I wired all of this together:

export async function generateMetadata({ params, searchParams }) {
  
  // Dynamic data fetch
  const metadata = await getArticlesMetadata(params);

  // Pulling apart my issue and article responses
  const { allArticles, issue } = metadata;

  // Getting current post metadata
  const currentSlug = searchParams.post;
  let currentArticle;

  // Filter my article to find the matching slug (note how I did fallbacks, might not work for you)
  const filtered = allArticles.filter((article) => article.slug === currentSlug);
  if (filtered.length > 0) {
    currentArticle = filtered[0];
  } else {
    currentArticle = allArticles[0];
  }

  return {
    title: `${currentArticle.title} - Mag Name HERE`,
    description: currentArticle.intro,
    generator: 'Next.js 14 / React',
    applicationName: 'Mag Name HERE',
    referrer: 'origin-when-cross-origin',
    keywords: [
      'whatever',
      'you',
      'need',
    ],
    publisher: 'ABCXYZ',
    metadataBase: new URL('https://www.example.com'),
    openGraph: {
      title: `${currentArticle.title} - Mag Name HERE`,
      description: currentArticle.intro,
      url: `https://www.example.com/category/${issue.slug}?post=${currentArticle.slug}`,
      siteName: 'Example Mag',
      images: [
        {
          url: currentArticle.mainImageUrl,
          width: 1200,
          height: 630,
          alt: 'Example Mag Image',
        },
      ],
      locale: 'en_US',
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: `${currentArticle.title} - Mag Name HERE`,
      description: currentArticle.intro,
      creator: '@yourhandle',
      creatorId: '########',
      siteId: '########',
      images: [currentArticle.mainImageUrl],
    },
    robots: {
      index: true,
    },
    icons: {
      icon: '/images/favicon/Favicon_64x64.png',
      apple: '/images/favicon/Fav_Green_180x180.png',
    },
    appLinks: {
      web: {
        url: 'https://www.example.com',
        should_fallback: true,
      },
    },
  };
}

[hmtcelik]

generateMetadata works like a charm 💎

[harryparkinson101]

In my Next.js React app I found a work around by getting the document.title and using a useEffect hook to stop it instantly changing back:

"use client";

import Head from "next/head";

import { useEffect } from "react";

 export default function About() {
  useEffect(() => {
    document.title = "About Us ";
  }, []);
  return (
    <>
      <Head>
        <title>{document.title}</title>
        <meta
          name="description"
          content="example description"
        />
      </Head>

Someone feel free to add to this if this has any side effects?

[Mukhammadjon-Jalolov]

Does it work for you??? It is throwing ReferenceError: document is not defined. error.

[columk1]

This causes an error that the document isn't defined, but why does it work? When I put a string directly in the <title> tags the new title doesn't persist, but when I use document.title in the <title> tags like you have here, the title persists.

Then if I conditionally render the title tag depending on if the window is defined or not to remove the error, the title doesn't persist. For some reason it only persists when it's allowed to run on the server, but this doesn't make sense.

[alexclinky]

I want to change document.title based on searchParams, how to achieve this?

[aayush-khatrii]

Its very simple to add title description and also the OG images without using metadata export and without using the nested layouts.

Example :

'use client'
export default function page({params}) {
   return (
         <div className={styles.mainWrapper}> // this is your main div wrapping all the content of your page
                  <title>This is title</title>
                  <meta name="description" content="example description"/>
                  
                  // your all content
          </div>
      )
}

this is very simple way i also checked the description by sending the page link to whatsapp the whatsapp showing the description.

[muditdev]

@aayush-khatrii not sure if this is safe. i and follow it back to useeffect with document.title but i feel since next is totally focusing on ssr. its going to make more complex to implement for csr. react helmet can be used also

[SukoonAdmin]

its not this simple some random build issues come which is unable to find and fix

…

On Wed, 24 Jul 2024 at 7:18 PM, Aayush Khatri ***@***.***> wrote: Its very simple to add title description and also the OG images without using metadata export and without using the nested layouts. Example : ` 'use client' export default function page({params}) { return ( // this is your main div wrapping all the content of your page <title>This is title</title> // your all content </div> ) } ` this is very simple way i also checked the description by sending the page link to whatsapp the whatsapp showing the description. — Reply to this email directly, view it on GitHub <#50872 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BH74LE7OVJT3NGAZWAVWJCLZN6WBJAVCNFSM6AAAAAAY47QJTWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJTHAYDINA> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[samivagyok-web]

Why are we forced to jump through hoops to get a simple thing like this working on the client-side? I feel like @vercel pushes that there are no SSR and CSR use cases, but that SSR is good, and CSR is bad.

[tylim88]

<title> without <Head> works

[Firevvork]

But then there will be at least 2 <title> into tag of the page, one is the original and another is we add into out component JSX body.

Will this cause SEO confuse?

[yoshikouki]

To dynamically change the title tag in a “use client” component based on custom hook logic, I implemented a simple context-based solution.

src/components/head-title/provider.tsx

"use client";

import { createContext, useState } from "react";

export const HeadTitleContext = createContext<{
  title: string;
  setTitle: (title: string) => void;
}>({
  title: "",
  setTitle: () => {},
});

export const HeadTitleProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [title, setTitle] = useState<string>("");
  return (
    <HeadTitleContext.Provider value={{ title, setTitle }}>
      {children}
    </HeadTitleContext.Provider>
  );
};

With this context, I created a HeadTitle component and a custom hook to manage the title.

src/components/head-title/index.tsx

"use client";

import { useContext } from "react";
import { HeadTitleContext } from "./provider";

export { HeadTitleProvider } from "./provider";

export const useHeadTitle = () => useContext(HeadTitleContext);

export const HeadTitle = () => {
  const { title } = useContext(HeadTitleContext);
  if (!title) return null;
  return <title>{title}</title>;
};

Then, I integrated the context provider and HeadTitle component within the layout.

src/app/layout.tsx

import { HeadTitle, HeadTitleProvider } from "@/components/head-title";

export { metadata } from "./metadata";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <HeadTitleProvider>
      <html lang="en">
        <head>
          <HeadTitle />
        </head>
        <body>{children}</body>
      </html>
    </HeadTitleProvider>
  );
}

With this setup, the HeadTitle component displays the title only if it’s set in the context, preserving default metadata or generateMetadata settings otherwise. This approach can be extended to other meta tags dynamically.

Example usage:

"use client";

import { useHeadTitle } from "@/components/head-title";
import { useTimer } from "@/components/timer/use-timer";
import { useEffect } from "react";

export const HeadTitleController = () => {
  const { setTitle } = useHeadTitle();
  const { time, status } = useTimer();

  useEffect(() => {
    if (status === "running") {
      setTitle(`${time.mm}:${time.ss} - Web Timer`);
    } else {
      setTitle("");
    }
  }, [status, time.mm, time.ss, setTitle]);

  return null;
};

Resetting to the default title is as simple as calling setTitle("").

[sujan-s]

Wow, look at the antics we’re having to resort to.

[maxpowernz]

Still no basic solution? Quite unbelievable really.

[fivekiwi]

use <title></title> component

[columk1]

A common pattern is to see some realtime data in the title, such as a notification count. How can this be done in Next without removing the main title from the exported metadata object? Ideally we would have a static title for SEO that is updatable on the client.

For example, let's say you have "Page Title" as your title for search results, but you want "(NotificationCount) - Page Title" on the same route for logged in users. I can render a <title> tag and it will be hoisted to the head of the document, but it will always be placed below the original title tag, and only the first title tag in the DOM tree is relevant.

There doesn't seem to be any way to get the updated title to override that original title tag. I can overwrite document.title in an effect, but it appears for a split second and then reverts back to the title from the exported metadata.

[HasanMothaffar]

This is still not resolved? 😐

[jasontlouro]

For my use case, the following was enough

// in the body of some client component
const title = /* determine the title you want */

useEffect(() => {
  document.title = title
}, [title])

[shahnewaztameem]

WTH! Still not resolved?

[kuldeeepydv]

WTH! Still not resolved?

[k-utsumi]

I managed to fix it, but...🤔

  useEffect(() => {
    document.title = newTitle;

    // HACK: Workaround for cases where updates are not applied on reload
    setTimeout(() => {
      document.title = newTitle;
    }, 100);
  }, []);

[kuldeeepydv]

I thought about this but wanted clean version, so created new file and rendering the client component there calling my title, description from constant file. (it worked for me)

…

On Thu, 25 Sept 2025 at 08:42, UTSUMI Keiji ***@***.***> wrote: I managed to fix it, but...🤔 useEffect(() => { document.title = newTitle; // HACK: Workaround for cases where updates are not applied on reload setTimeout(() => { document.title = newTitle; }, 100); }, []); — Reply to this email directly, view it on GitHub <#50872 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BOCBV4GX7CAXFIQKRMCECDD3UNMRXAVCNFSM6AAAAAAY47QJTWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINJQGU2DEMI> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[therealonenak]

Fix: Dynamic Page Titles with Client Components in Next.js App Router

Solution for setting dynamic page titles when using 'use client' directive.

"next": "^15.5.2"

Problem

'use client'

export const metadata = { title: 'About' }

Error: You are attempting to export "metadata" from a component marked with "use client"

Solution

Add a server layout wrapper for each client component page.

Step 1: Create Metadata Helper

lib/metadata.ts

import type { Metadata } from 'next'

interface PageMetadata {
    title: string
    description?: string
}

export function createMetadata({ title, description }: PageMetadata): Metadata {
    return {
        title: `${title} | MyApp`,
        description: description || 'Default description',
    }
}

Step 2: Add Layout Wrapper

app/about/layout.tsx

import AboutPage from "./page"
import { createMetadata } from '@/lib/metadata'

export const metadata = createMetadata({
    title: 'About Us',
    description: 'Learn more about us'
})

export default function AboutLayout() {
    return <AboutPage />
}

Step 3: Keep Client Component

app/about/page.tsx

'use client'

export default function AboutPage() {
    return <div>About</div>
}

Directory Structure

app/
├── about/
│   ├── layout.tsx    # Server component (metadata)
│   └── page.tsx      # Client component (interactivity)
└── lib/
    └── metadata.ts   # Shared helper

How It Works

• layout.tsx (server) → Generates metadata for SEO
• page.tsx (client) → Handles interactivity
• Next.js merges them automatically

Result

✅ Server-side metadata for SEO
✅ Client-side interactivity
✅ No hydration errors
✅ Type-safe](url)

[I-GiM]

So here is my thinking.

app/
├── (auth)/
 | └── layout.tsx
 |  └── login/
 |     └── layout.tsx    # Server component (metadata)
 |     └── page.tsx      # Client component (interactivity)

SO you are telling me i have to write multiple layouts? get files to run into hundreds just to get an application working on NextJS? 😂
All because i just want a simple <title>Login</title>

[speedhawk21]

With next/navigation I was able to parse and format the pathname and placed it in a useEffect, so it updates automatically on change. Are there any downsides to this method other than the generic path value?

const pathname = usePathname();

 useEffect(() => {
  // update document title to the value of pathname
   const normalizedPathname = pathname.endsWith('/') && pathname !== '/' 
     ? pathname.slice(0, -1) 
     : pathname;
   document.title = `${normalizedPathname === "/" ? "Home" : normalizedPathname.substring(1).charAt(0).toUpperCase() + normalizedPathname.substring(2)} - TopRecall`;

 }, [pathname]);

[I-GiM]

I don't believe in bashing work, but it makes ZERO sense to have to go online to look for solutions for just a ttile tag that can be added as simply as <title>Title</title>
So I leave the app i should be building and I am struggling with something Vercel could have just made very simple!
Files run into multiple tens! What exactly is the point gan gan?
Like why? Why do humans ultimately drift into unnecessary complexity and then give themselves a medal.
Why take something you have offered to people so seamlessly and then make a "defeat the Troll" situation. if i wanted to play games then I would switch on a console and not switch on a Nextjs dev server to start fighting hydration, simple client updates, etc.
Anyways, kudos to whatevr they are doing at vercel but this is not it at all!!!

[karelbondan]

Since this is still a thing in 2026, taking inspirations from Rom-888's answer in SO and chemiadel's answer, I came up with this solution using a custom hook:

"use client";
import { useEffect, useRef } from "react";

export function useTitle(title: string) {
    const titleRef = useRef(title);

    useEffect(() => {
        titleRef.current = title;
        document.title = titleRef.current;

        const observer = new MutationObserver(() => {
            if (document.title !== titleRef.current) {
                document.title = titleRef.current;
            }
        });

        observer.observe(document.head, {
            subtree: true,
            characterData: true,
            childList: true
        });

        return () => observer.disconnect();
    }, [title]);
}

Using just document.title = title or the <title> element isn't reliable because certain client-side interactions sometimes reset the title to the value set in layout.tsx. Using an observer that observes the <head> element including changes to its children keeps the title persistent, at least in my use case. Keep in mind that this is probably not SEO-friendly. SEO isn't a priority for me because I'm building a SaaS.