Next.js Discord

Discord Forum

How can i have multiple metadata or thing?

Answered
Banana posted this in #help-forum
Open in Discord
BananaOP
So basically, i wanna have the default metadata for all my pages but for 1 or 2 pages i want to add my own metadata

My constructmetadata thing:
export function constructMetadata({
  title = 'ForgeFlash',
  description = 'ForgeFlash is a high quality educational website :)',
  image = '/thumbnail.png',
  icons = '/favicon.ico',
  noIndex = false,
}: {
  title?: string
  description?: string
  image?: string
  icons?: string
  noIndex?: boolean
} = {}): Metadata {
  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [
        {
          url: image,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [image],
      creator: '@dreadfulstep',
    },
    icons,
    metadataBase: new URL('https://forgeflash.vercel.app'),
    ...(noIndex && {
      robots: {
        index: false,
        follow: false,
      },
    }),
  }
}
Answered by Masai Lion
Where are you creating the file?
View full answer

45 Replies

@Banana So basically, i wanna have the default metadata for all my pages but for 1 or 2 pages i want to add my own metadata My constructmetadata thing: ts export function constructMetadata({ title = 'ForgeFlash', description = 'ForgeFlash is a high quality educational website :)', image = '/thumbnail.png', icons = '/favicon.ico', noIndex = false, }: { title?: string description?: string image?: string icons?: string noIndex?: boolean } = {}): Metadata { return { title, description, openGraph: { title, description, images: [ { url: image, }, ], }, twitter: { card: 'summary_large_image', title, description, images: [image], creator: '@dreadfulstep', }, icons, metadataBase: new URL('https://forgeflash.vercel.app'), ...(noIndex && { robots: { index: false, follow: false, }, }), } }
Masai Lion
Okay so, you can do this on your constructMetadata() file. 

export function constructMetadata({
  title = 'ForgeFlash',
  description = 'ForgeFlash is a high quality educational website :)',
  image = '/thumbnail.png',
  icons = '/favicon.ico',
  noIndex = false,
  customMetadata = {} // New parameter for custom metadata
}: {
  title?: string
  description?: string
  image?: string
  icons?: string
  noIndex?: boolean
  customMetadata?: Partial<Metadata> // Partial to allow partial custom metadata
} = {}): Metadata {
  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [
        {
          url: image,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [image],
      creator: '@dreadfulstep',
    },
    icons,
    metadataBase: new URL('https://forgeflash.vercel.app'),
    ...(noIndex && {
      robots: {
        index: false,
        follow: false,
      },
    }),
    ...customMetadata // Merge custom metadata with default metadata
  };
}
With this modification, you can pass custom metadata as an additional parameter when calling constructMetadata.
BananaOP
ah alr
thank you
Masai Lion
For example in a second file
const defaultMetadata = constructMetadata(); // Default metadata for most pages

const customPageMetadata = constructMetadata({
  title: 'Custom Page Title',
  description: 'Custom page description',
  // Add any other custom metadata specific to this page
});

// you can use defaultMetadata for most pages
// or customPageMetadata for specific pages
@Banana thank you
Masai Lion
Sure 🙂
BananaOP
alr
const VerifyEmailPage = ({ searchParams }: PageProps) => {
  const token = searchParams.token
  const toEmail = searchParams.to

  const CustomMetaData = constructMetadata({
    title: 'Custom Page Title',
    description: 'Custom page description',
    // Add any other custom metadata specific to this page
  });

  return (
    <div className='container relative flex pt-20 flex-col items-center justify-center lg:px-0'>
      <div className='mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]'>
        {token && typeof token === 'string' ? (

ive tried putting it in my verify-email page but it doesnt seem to work (seems like my issue or sm)
BananaOP
nope
Masai Lion
Wait but you must import it
BananaOP
i did
Masai Lion
Oh
Funny
BananaOP
its prob the layout.tsx overwriting it isnt it?
Masai Lion
Yeah, you can try checking layout.tax
BananaOP
  metadata.title = "Custom"
  metadata.description = "Custom"

Ive tried that also and it doesnt work
(im exporting the metadata from layout.tsx)
Masai Lion
Ohhh wait
The code snippet I gave you is for an individual route for metadata
If you want it on layout it would be something different
BananaOP
idk, i just wanna make it so i can set the metadata for a specific page whilst the default metadata is in layout.tsx
Masai Lion
So
You must create a new file named constructMetadata.ts
Then put this whole ahhh snippet inside it:
// constructMetadata.ts
export function constructMetadata(customMetadata: Partial<Metadata> = {}): Metadata {
  const defaultMetadata: Metadata = {
    title: 'ForgeFlash',
    description: 'ForgeFlash is a high quality educational website :)',
    image: '/thumbnail.png',
    icons: '/favicon.ico',
    noIndex: false,
    openGraph: {
      title: 'ForgeFlash',
      description: 'ForgeFlash is a high quality educational website :)',
      images: [
        {
          url: '/thumbnail.png',
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: 'ForgeFlash',
      description: 'ForgeFlash is a high quality educational website :)',
      images: ['/thumbnail.png'],
      creator: '@dreadfulstep',
    },
    metadataBase: new URL('https://forgeflash.vercel.app'),
  };

  return {
    ...defaultMetadata,
    ...customMetadata,
  };
}
And thennn
On your layout.tsx
BananaOP
image doesnt exist apparently
Masai Lion
Here’s an example snippet for your layout.tsx
@Banana image doesnt exist apparently
Masai Lion
Oh you need to adjust it to where your image is in
@Masai Lion Here’s an example snippet for your layout.tsx
Masai Lion
// layout.tsx
import React from 'react';
import Head from 'next/head';
import { constructMetadata } from './constructMetadata';

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const metadata = constructMetadata(); // Default metadata

  return (
    <div>
      <Head>
        <title>{metadata.title}</title>
        {/* Add other meta tags as needed */}
        <meta name="description" content={metadata.description} />
        {/* Add OpenGraph and Twitter meta tags */}
        {/* Add link tags for icons */}
      </Head>
      <main>{children}</main>
    </div>
  );
};

export default Layout;
BananaOP
now theres no metadata lol
Aww hell nah
@Banana now theres no metadata lol
Masai Lion
Where are you creating the file?
Answer
BananaOP
yk what
im just an absolute IDIOT
😭
i was looking at my fcking privacy page
when i was modifying my verify email page 😭
@Banana i was looking at my fcking privacy page
Masai Lion
Lol nwss mate it happens
BananaOP
welp, thank you for helping lol
@Banana welp, thank you for helping lol
Masai Lion
It was a pleasure, have a good one! If the issue persists you can open a new forum 😄