I'm using the Next.js 13 with app directory and I want to add opengraph metadata.Adding title, description and url is straight forward using the following code:export async function generateMetadata(props: Props): Promise { return { openGraph: { title: "foo", description: "bar", url: "buzz", }, } }which creates the following output: But is there any way to create metatags with the property of product:brand, product:availability and so on?The expected output is on the attached image below.

Opengraph metadata custom property fields

Answered

Polar bear posted this in #help-forum

Polar bearOP

2023-09-06T07:45:11.000Z

I'm using the Next.js 13 with app directory and I want to add opengraph metadata.

Adding title, description and url is straight forward using the following code:

export async function generateMetadata(props: Props): Promise<Metadata> {
  return {
    openGraph: {
      title: "foo",
      description: "bar",
      url: "buzz",
    },
  }
}

which creates the following output:

<meta property="og:title" content="foo">
<meta property="og:description" content="bar">
<meta property="og:url" content="buzz">

But is there any way to create metatags with the property of product:brand, product:availability and so on?

The expected output is on the attached image below.

Answered by joulev

just simply add the tag to the page

View full answer

26 Replies

riský

2023-09-06T07:48:23.000Z

i haven't looked to see if there is an official method, but you can use custom: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#other

Polar bearOP

2023-09-06T07:56:45.000Z

It generates the metatag as

<meta name="custom" content="meta" />

But I want to add the custom field in the property entry as:

<meta property="custom" content="meta" />

riský

2023-09-06T07:57:37.000Z

like make custom to the key and the meta to the value your setting

so this should work

export const metadata = {
  other: {
    'product:brand': 'Facebook',
  },
}

wait, i missunderstood your issue

Polar bearOP

2023-09-06T08:01:29.000Z

yeah it generates as

<meta name="product:brand" content="Facebook" />

But I want

<meta property="product:brand" content="Facebook" />

riský

2023-09-06T08:05:26.000Z

i see the issue, but i don't know the answer ðŸ˜

i would say to use the ldjson as i can't see anything better ðŸ˜

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Product",
  "productID":"facebook_tshirt_001",
  "name":"Facebook T-Shirt",
  "description":"Unisex Facebook T-shirt, Small",
  "url":"https://example.org/facebook",
  "image":"https://example.org/facebook.jpg",
  "brand":"facebook",
  "offers": [
    {
      "@type": "Offer",
      "price": "7.99",
      "priceCurrency": "USD",
      "itemCondition": "https://schema.org/NewCondition",
      "availability": "https://schema.org/InStock"
    }
  ],
  "additionalProperty": [{
    "@type": "PropertyValue",
    "propertyID": "item_group_id",
    "value": "fb_tshirts"
  }]
}
</script>