Question 263551 in SEO Question posted in
Some basic information to get you started with this can be found here.

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

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.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

  2. 0

    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."

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search