How can i set a custom page title on a specific page? I've used the nextjs Head tag to set my title but the page still carries the title from the layout.js metadata object, I've also create a new metadata in the new page to override the default in layout.js, but it does not work either. Is there a way i can override this default metadata object title in a specific page and control what is shown as the title of my page.
#Custom seo meta title on specific page(app route)
dark crow
upper patioBOT
Hi @dark crow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can set a custom page title on a specific page in Next.js by using the Metadata API. This API allows you to define metadata such as the title and meta tags in your HTML head element by exporting a Metadata object or a generateMetadata function from a layout or page.
Here's an example of how you can define a static title for a specific page:
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Your Custom Title',
}
export default function Page() {
return '...'
}
In this example, 'Your Custom Title' will be the title of your page. This code should be placed in the specific page file where you want to set the custom title.
If you want to set a dynamic title based on some data or parameters, you can use the generateMetadata function. Here's an example:
import { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// read route params
const id = params.id
// fetch data
const product = await fetch(`<https://.../${id}`>).then((res) => res.json())
return {
title: product.title,
}
}
export default function Page({ params, searchParams }: Props) {}
In this example, the title of the page is dynamically set to the title of a product fetched from an API.
Please note that you should not manually add head tags such as title and meta to root layouts. Instead, use the Metadata API which automatically handles advanced requirements such as streaming and de-duplicating head elements.
For more information, you can refer to the Next.js documentation on Metadata API (https://nextjs.org/docs/app/api-reference/functions/generate-metadata).
Sources:
- Next.js Documentation: Pages and Layouts (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
- Next.js Documentation: Metadata Object and generateMetadata Options (https://nextjs.org/docs/app/api-reference/functions/generate-metadata)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
dark crow
will this work even in a client rendered component?
@upper patio will this work even in a client rendered component?
upper patioBOT
Let me check the knowledge base for you. One moment! :books:
No, the metadata object and generateMetadata function exports are only supported in Server Components. This means you cannot use them in client-rendered components.
If you want to set metadata such as the page title in a client-rendered component, you would typically use the next/head component. However, it's important to note that the Metadata API is designed to replace the next/head component for setting metadata, and it's recommended to use the Metadata API for this purpose when working with Server Components.
For more information, you can refer to the Next.js documentation on Metadata API (https://nextjs.org/docs/app/api-reference/functions/generate-metadata).
Sources:
- Next.js Documentation: Metadata Object and generateMetadata Options (https://nextjs.org/docs/app/api-reference/functions/generate-metadata)
- Next.js Blog: Built-in SEO support with new Metadata API Part 1 (https://nextjs.org/blog/next-13-2)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
dark crow
@upper patio so if i've used the metadata in layout, how can i now then adjust it in my page
upper patioBOT
Let me check the knowledge base for you. One moment! :books:
You can adjust the metadata in your page by exporting a metadata object or a generateMetadata function in your page file. This will override the metadata defined in the layout for that specific page.
Here's an example of how you can define a static title for a specific page:
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Your Custom Page Title',
}
export default function Page() {
return '...'
}
In this example, 'Your Custom Page Title' will be the title of your page. This code should be placed in the specific page file where you want to set the custom title.
If you want to set a dynamic title based on some data or parameters, you can use the generateMetadata function. Here's an example:
export async function generateMetadata({ params, searchParams }) {
const product = await getProduct(params.id);
return { title: product.title };
}
In this example, the title of the page is dynamically set to the title of a product fetched from an API.
Please note that you should not manually add head tags such as title and meta to root layouts. Instead, use the Metadata API which automatically handles advanced requirements such as streaming and de-duplicating head elements.
For more information, you can refer to the Next.js documentation on Metadata API (https://nextjs.org/docs/app/api-reference/functions/generate-metadata).
Sources:
- Next.js Documentation: Pages and Layouts (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
- Next.js Documentation: Metadata Object and generateMetadata Options (https://nextjs.org/docs/app/api-reference/functions/generate-metadata)