Metadata Api: Open Graph Type og:product

[Frozies]

Summary

After playing around with Next Seo and realizing that didnt work for me with dynamic data, I switched my page to using the new App directory. The new generate metadata function works very well for loading the meta on page generation, however I was trying to use the opengraph type 'og:products' . https://developers.facebook.com/docs/payments/product/

This throws an error "Invalid OpenGraph type: og:product". What is the future for this?

export async function generateMetadata({ params }: any): Promise<Metadata> {
    const product = await fetcher(`/v1/store/product?slug=${params.productHandle}`)
    return {
        title: product.title,
        description: product.ai_data.description,

        product: { // this metadata
          price: {
            amount: product.priceData.shop_list_price,
            currency: 'USD',
          }
        },

        openGraph: {

            type: 'og:product', // This type


            url: `https://www.example.com/${ROUTES.PRODUCTS}/${product.slug}`,
            title: product.title,
            description: product.ai_data.description,
            images: product.images?.map((imageUrl: string) => ({
                url: imageUrl,
            })),
        }
    }
}

Additional information

No response

Example

No response

[AhegaoXXX]

Hello. Did you solve the problem?

[Saturate]

I think it's pretty bad to throw a 500 error on this, invalid meta data should not break the entire page IMO. It's fine to throw a warning or something.

[ogi-joo]

Any update on this?

[Saturate]

I might try to do a PR for supporting namespaced types: https://ogp.me/#types and or just throw a warning instead of an error.

[indicozy]

You can hack around it by applying it in other key:

      other: {
        ['og:type']: 'product',
      },

[ermakovich]

this renders <meta name="og:type" rather than <meta property="og:type" (Next 15.4.7). If you have another { openGraph: { type } } defined in parent segments/layouts, it will render it alongside with this extra meta tag.

[Number16BusShelter]

This is still an issue btw

[IvanAdmaers]

Thanks to @indicozy. His solution works:

other: {
    ['og:type']: 'product.group',
},

Add it to your return in generateMetadata.