Next.js Discord

Discord Forum

Different Title and Page desc per page

Answered
Asian black bear posted this in #help-forum
Open in Discord
Avatar
Asian black bearOP
So in normal html inside the <head> youd add things like title, description, favicon, and meta data. How can I do this inside Node.js jsx? I want for the home page to be MyBusines- Home, contact page would be something like MyBusiness- Contact us etc with custom meta data too?
Answered by ncls.
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
View full answer

29 Replies

Answer
Avatar
@ncls. https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Avatar
Asian black bearOP
so would I follow Dynamic Metadata?
Avatar
@Asian black bear so would I follow Dynamic Metadata?
Avatar
ncls.
Your project sounds like Static Metadata should be enough, isn't it?
Avatar
@ncls. Your project sounds like Static Metadata should be enough, isn't it?
Avatar
Asian black bearOP
I just want to add a custom title, description and meta data for each page if that makes sense?
Avatar
ncls.
Yeah, and I suppose each page has it's own file?
So something like this:
/app
┃ /page.tsx
┣ /contact
┃ ┗ /page.tsx
┗ /about
  ┗ /page.tsx

Then every page.tsx file can export it's own const named metadata as [described in the Docs](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata) and everything should work
Avatar
ncls.
Yes
Avatar
Asian black bearOP
so just put this in every page?

import type { Metadata } from 'next'

export const metadata: Metadata = {
title: '...',
description: '...',
}
Avatar
ncls.
Yes, as long as they are server components, this should work
Avatar
@ncls. Yes, as long as they are server components, this should work
Avatar
Asian black bearOP
Does this look right?
Image
Avatar
@Asian black bear Does this look right?
Avatar
ncls.
Are you using app or pages router?
Avatar
@ncls. Are you using app or pages router?
Avatar
Asian black bearOP
app
Avatar
@Asian black bear app
Avatar
ncls.
Then you can't use the <Head> component
Avatar
Asian black bearOP
oh
Avatar
@ncls. Do it like that
Avatar
Asian black bearOP
right okay
Avatar
@ncls. Do it like that
Avatar
Asian black bearOP
So this is my code right now:

import Header from "./_components/Header";
import HomeBanner from "./_components/HomeBanner";
import FAQ from "./_components/FAQ";
import Footer from "./_components/Footer";
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Title',
  description: 'Desc',
}

export default function Home() {
  return (
    <div>
      <Header />
      <HomeBanner />
      <FAQ />
      <Footer />
    </div>
  );
}
how do I add meta data?
Avatar
ncls.
You did
Avatar
Asian black bearOP
no this

<!-- Primary Meta Tags -->
<title>Dreamality Interactive - The Home of Next Gen Games</title>
<meta name="title" content="Dreamality Interactive - The Home of Next Gen Games" />
<meta name="description" content="The Official Home for Dreamality Interactive." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dreamalityinteractive.com" />
<meta property="og:title" content="Dreamality Interactive - The Home of Next Gen Games" />
<meta property="og:description" content="The Official Home for Dreamality Interactive." />
<meta property="og:image" content="https://metatags.io/images/meta-tags.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://dreamalityinteractive.com" />
<meta property="twitter:title" content="Dreamality Interactive - The Home of Next Gen Games" />
<meta property="twitter:description" content="The Official Home for Dreamality Interactive." />
<meta property="twitter:image" content="https://metatags.io/images/meta-tags.png" />

<!-- Meta Tags Generated with https://metatags.io -->
how do I add this to that?
Avatar
@ncls. https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields
Avatar
Asian black bearOP
My code isnt working:

import Header from "./_components/Header";
import HomeBanner from "./_components/HomeBanner";
import FAQ from "./_components/FAQ";
import type {Metadata} from 'next';
import Footer from "./_components/Footer";


export const metadata: Metadata = {
  title: 'Title',
  description: 'Desc',
}

export default function Home() {
  return (
    <div>
      <Header />
      <HomeBanner />
      <FAQ />
      <Footer />
    </div>
  );
}
saying syntax error
Avatar
ncls.
Show me the error then
Avatar
Asian black bearOP
Image
Avatar
ncls.
Ah, got it. You gotta remove the import line and the : Metadata since they are just for TypeScript
Avatar
Asian black bearOP
import Header from "./_components/Header";
import HomeBanner from "./_components/HomeBanner";
import FAQ from "./_components/FAQ";
import Footer from "./_components/Footer";


export const metadata = {
  title: 'Title',
  description: 'Desc',
}

export default function Home() {
  return (
    <div>
      <Header />
      <HomeBanner />
      <FAQ />
      <Footer />
    </div>
  );
}
Avatar
ncls.
Exactly