如何在Next.js 13中动态添加Twitter元标签？

在Next.js 13的generateMetadata函数里，直接在返回的Metadata对象中添加twitter配置项（和openGraph同级），就能生成你需要的Twitter元标签。

修改后的代码示例如下：

export async function generateMetadata( {params, searchParams}: Props, parent?: ResolvingMetadata): Promise<Metadata> {
  // 可根据业务逻辑动态获取这些值，比如从接口、params中读取
  const pageUrl = '你的页面完整URL';
  const pageTitle = '页面标题';
  const pageDescription = '页面描述内容';
  const pageImage = '页面预览图的完整URL';

  return {
    openGraph: {
      type: "website",
      url: pageUrl,
      title: pageTitle,
      description: pageDescription,
      image: pageImage,
    },
    // 添加Twitter元标签配置
    twitter: {
      card: "summary_large_image",
      url: pageUrl,
      title: pageTitle,
      description: pageDescription,
      image: pageImage,
    }
  }
}

这样配置后，Next.js会自动生成你期望的HTML输出，包括twitter:card、twitter:url等所有需要的元标签，和你给出的示例完全匹配。如果需要复用openGraph的字段值，直接共用变量即可，不用重复定义。

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