How do i change the meta title in next.js 13?

Question

How do i change the meta title in next.js 13?

2k views Asked by mitorudev At 11 October 2023 at 14:33

I created a next 13 project with manny subpages. In next 13 i found the soloutin to do this with folders in the app folder like app/contact/page.tsx I tried it and it worked so i can open the route with localhost:3000/contact Now i am at the point where i want to change the meta title for the subpage but there is the Problem... I cant add:

import type { Metadata } from 'next'
export const metadata: Metadata = {
  title: 'Home | Sakura Hagen',
  description: 'Home Page of Sakura Hagen',
}

because iam using "use client" in my subpage so this is what i tried else.

First i tried importing head like this:

import Head from 'next/head';

  return (
    <>
      <Head>
        <title>Contact - Page </title>
        <meta name="description" content="Willkommen zu meinem Blog" />
      </Head>....

but it changed nothing. It resultet with the title before.

Next i tried to

npm i next-seo

then i tried to import it like this

import { NextSeo } from 'next-seo';

<NextSeo
        title="Contact - Page"
        description="description"
      />

but nothing changed again...

last i tried to create a layout.tsx, where i add the meta like this:

import { Footer, Navbar, ScrollToTop, Tel } from '@/components'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'contact - page',
  description: 'description',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de" className='scroll-smooth'>
      <body className="relative"> 
        <Navbar />
        {children}
        <Footer />
        <Tel />
        <ScrollToTop />
      </body>
    </html>
  )
}

it worked a little bit, if i open my homepage and click on contact i go to .../contact with the new title. But if i try to jump back to main page the error looks like this.

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Original Q&A

There are 3 answers

**mitorudev** · Answer 1 · 2023-10-11T14:35:29+00:00

I already found an answer while formulating it, I hope it helps others

Its pretty simple...

Just use:

<title>Page title</title>

inside of the page.tsx

should look like this

import React from 'react'

const page = () => {
  return (
    <title>Page title</title>
    <div>page</div>
  )
}

export default page

**Christian Ivicevic** · Answer 2 · 2023-10-12T06:48:39+00:00

Since you are using the App Router, there is no need to use the <title> element manually. If you check the Next.js documentation on Metadata, you will notice that there is merging in place along the segments.

For example, in my root layout at app/layout.tsx, I declare the following:

export const metadata = {
  title: {
    template: '%s — Showcasething'
  }
}

And within a page, such as app/page.tsx, I can do the following:

export const metadata = {
  title: 'Page Title'
}

What Next.js does is merge these exported metadata objects (or generated metadata from generateMetadata) to build the final metadata and, thus, the title. In my example, navigating to the root path at / will take the template of the root layout and slot in the page-specific title "Page Title" into it, resulting in "Page Title - Showcasething".

Of course, the same works without a template by using just a title along the segments to override them where applicable. Another example for this:

// app/layout.tsx
export const metadata = {
  title: 'Home'
}

// app/nested/page.tsx
export const metadata = {
  title: 'Nested'
}

This configuration will make the title of /nested be "Nested."

**Mykola Berezhniuk** · Answer 3 · 2024-03-11T14:58:50+00:00

export const metadata = {
  title: 'Page Title'
}

or

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

Not working if you use "use client" so you need to delete "use client" or just use tag : <title>Page title</title>

TechQA.

How do i change the meta title in next.js 13?

There are 3 answers

Related Questions in NEXT.JS

Related Questions in META-TAGS

Related Questions in NEXT.JS13

Related Questions in PAGE-TITLE

Popular Questions

Popular Tags

Trending Questions