Html Question posted in
Some basic documentation can be found here.

Html – I build a News Website with Next.js Server Side rendering and the export const metadata = { title: "TEST" } is not taking action

I have developed a News Website using Next.js with Server Side Rendering. In my pages, I’m utilizing export const metadata = { title: "TEST" } to set the page title, but it doesn’t seem to have any effect. I have checked my implementation, and the metadata object appears to be correctly structured. However, the page title remains unchanged.

Repository : https://github.com/BlendEmini/NewsBlog-ssr

I would appreciate any insights or suggestions on why the metadata object is not affecting the page title as expected. If there’s a better approach or if I’m missing something crucial in the Next.js setup for server-side rendering, please guide me in the right direction. Thank you for your assistance!

I’ve tried several methods to set the page title in my Next.js News Website. Initially, I used the component, then attempted the older approach of defining metadata within the HTML, and finally, I adopted the recommended export const metadata method in each page file. Unfortunately, none of these methods have successfully changed the page title as expected. Despite meticulous checks, the title remains unaffected. I’m seeking guidance on potential issues or alternative approaches to ensure the correct display of page titles. Any assistance is appreciated.

Tags:

2

Answers


  1. 0

    You can install next-seo which is best for this type of website, where you can configure the seo settings for each and every web page.

    ...
export default function Home({ blogs }) {
    return (
        <>
        <NextSeo
          title="News Website"
          description="News Website - description"
        />
            <div className="">
                <Navbar />
                ...

    stackblitz

    implementation reference

    Login or Signup to reply.
  2. 0

    I see that you are using pages router instead of app router. Hence, you can use <Head> tag from next/head.

    E.g.

    import Head from 'next/head';
 
function Page() {
  return (
    <section>
      <Head>
        <title>title goes here</title>
      </Head>
    </section>
  )
}
 
export default Page;

    For you reference: https://nextjs.org/docs/pages/api-reference/components/head

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

Back To Top
Search