How To Set Dynamic Meta Keyword & Author In Next.js 13

Question

I tried this but it's not working, In official documentation they only given example of dynamic title and description, plzz anyone help me.

I Tried This:

export const metadata = {
  title: {
    default: 'HealthCare Biodiversity',
    template: '%s | HealthCare Biodiversity'
  },
  description: {
    default: 'The Dynamic & Powerful Blog',
    template: '%s | HealthCare Biodiversity'
  },
  referrer: 'origin-when-cross-origin',
  keywords: {
    default: ['Next.js', 'React', 'JavaScript'],
    template: [ '%s']
  },
  authors: {
    default: [{ name: 'Seb' }],
    template: [  { name: '%s' }]
  }
}

This code is on my layout.js of new app router.

I mentioned what I tried and what I'm expecting. plzz help me.

Answer 1

Yes, it is perfectly possible. I have experimented with adding the keywords and author metadata to my Next.js 13.4 project app (using the app router).

Within the metadata variable object, the keywords property needs to be defined as an array of strings, rather than an object (as seen in your posted example). And also, the authors property also needs to be an array, but of objects with certain properties; name, and url, where both those properties are optional. See example snippet below:

export const metadata = {
  title: {
    default: 'HealthCare Biodiversity',
    template: '%s | HealthCare Biodiversity'
  },
  description: {
    default: 'The Dynamic & Powerful Blog',
    template: '%s | HealthCare Biodiversity'
  },
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript', 'HealthCare', 'Biodiversity'],
  authors: [
    { name: 'Seb', url: 'https://github.com/arshcode' }
  ]
}

Documentation source: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#basic-fields