How to use open graph metatag with next js 13?

Question

In the recent update of Next JS 13 they introduced a new way to handle meta tags which was a different way as the traditional method by creating Next Head and writing the usual html meta tag. in the new method we create a metadata object like way. but i haven't found a way to use open graph metadata.

export const metadata = {
  title:
    " this is the title of the web",
  description:
    " this is the description section",
  ogtitle: "this is open graph title for testing", // i thought this could be the case 
};

so how can i use open graph in the metadata?

Pard

Answer 1

Ther’s a section of the metadata object dedicated to OpenGraph’s metadata.

Please refer to the relevant documentation for more details.

The short version is this:

export const metadata = {
  openGraph: {
    title: 'this is open graph title for testing',
    description: 'Some description',
  }
};

Also I expect you to need to generate such data dynamically, based on the path, search parameters and queries. If so use export async function generateMetadata(…) instead of export const metadata. The relevant documentation helps a lot.

Nunn

yes i have the dynamic genetrateMetadata. this is for the general section. – Pard