CODEWITHSUNDEEP
reactjsnext.jsnext.js13
jhon arab
jhon arab

Reputation: 81

How to add new custom meta property in nextjs app router?

I have nextjs 13.4 version application. I am using app router system. In server component of a page I used generateMetadata to get head meta data. In app router we can't use Head from 'next/head'. generateMetadata working fine for me. I have code:

export async function generateMetadata(): Promise<Metadata> {
  
  return {
    title: 'Modern Furniture Crafted with Elegance',
    description:
      'Experience the beauty and craftsmanship. Buy furniture for your home online.',
    viewport: 'width=device-width, initial-scale=1.0, user-scalable=yes',
    appleWebApp: { capable: true },
    openGraph: {
      title: 'Modern Furniture Crafted with Elegance',
      description:
        'Experience the beauty and craftsmanship. Buy furniture for your home online.',
    },
  };
}

Now I want to add some new property, I want this : <meta property="product:brand" content="Facebook"> in head using generateMetadata. If I use other property of generateMetadata, I got <meta name="product:brand" content="Facebook">, see in meta tag there is name field but i want property field "product:brand".

How can i add this meta tag.

Upvotes: 1

Views: 1375

Answers (1)

Prateek Garg
Prateek Garg

Reputation: 1

I had similar requirement simply putting <meta> tag inside head worked for me.

export default function RootLayout({ children }) {
  return (
    <html lang="en" className="dark">
      <head>
        <meta property="fb:app_id" content="XXXXX" />
      </head>
....

Upvotes: 0

Related Questions