NextJS 13.4.10配置OpenGraph product类型时触发无效类型错误

问题原因 #

NextJS 13.4.10的内置Metadata API对openGraph.type字段做了严格类型校验，仅支持OpenGraph的标准类型（如website、article、blog等），不直接支持product这种电商扩展类型，因此直接设置type: 'product'会触发Invalid OpenGraph type: product错误。

解决方案 #

绕过内置的openGraph配置项，手动通过Metadata的other字段添加所有OpenGraph产品相关的meta标签，避开类型校验限制。

代码示例 #

假设你在App Router的页面组件中使用generateMetadata函数：

import type { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  // 替换为你的API请求逻辑
  const apiData = await fetch('/api/your-metadata-endpoint')
    .then(res => res.json());

  return {
    title: apiData.title,
    other: [
      // 基础OpenGraph标签
      { property: 'og:locale', content: apiData.openGraph.locale },
      { property: 'og:type', content: 'product' },
      { property: 'og:title', content: apiData.openGraph.title },
      { property: 'og:url', content: apiData.openGraph.url },
      { property: 'og:site_name', content: apiData.openGraph.site_name },
      { property: 'og:updated_time', content: apiData.openGraph.updated_time },
      // 产品扩展标签
      { property: 'product:availability', content: apiData.product.availability },
      // 修正价格标签规范：拆分货币与金额（当前API仅返回货币代码）
      { property: 'product:price:currency', content: apiData.product.price },
      // 若API补充价格金额，添加此标签：
      // { property: 'product:price:amount', content: apiData.product.priceAmount },
    ],
  };
}

额外说明 #

你当前API返回的product.price字段值为USD，不符合OpenGraph产品标签规范：

• 价格金额需用product:price:amount标签（值为数值，如99.99）
• 货币类型需用product:price:currency标签（值为ISO 4217货币代码，如USD）

建议调整API返回的产品数据结构，补充价格金额字段，以符合OpenGraph标准规范。

内容的提问来源于stack exchange，提问作者Alireza Bagheri