How to use open primitive tag in next js 13?

Question

In the recent Next JS 13 update, they introduced a new way of handling meta tags that differs from the traditional way of creating a Next Head and writing the usual html meta tags. In the new method, we create a metadata object-like method. 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 do I use open graph in metadata?

Answer 1

Metadata A portion of the object dedicated to OpenGraph’s metadata.

Please refer to Related documentation for more information details.

The short version is this:

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

I also expect that you need to dynamically generate this data based on path, search parameters and query. If so, use export async function generateMetadata(...) instead of export const metadata. Related documentation is of great help.