如何在Next.js 13中使用Open Graph元标签？

你之前的写法有误，Open Graph相关属性不能直接作为metadata的顶层字段，需要嵌套在openGraph子对象里。

正确的配置示例如下：

export const metadata = {
  title: "this is the title of the web",
  description: "this is the description section",
  openGraph: {
    title: "this is open graph title for testing",
    description: "this is open graph description for testing",
    url: "https://你的站点域名.com",
    siteName: "你的站点名称",
    images: [
      {
        url: "https://你的站点域名.com/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "站点OG图片描述",
      },
    ],
    type: "website",
  },
};

• 所有Open Graph相关元数据都要放在openGraph对象内，属性名用驼峰格式（比如title对应HTML中的og:title标签）
• 除了title和description，还可按需配置url、siteName、图片信息、页面类型等常用OG属性
• 不同路由需要单独配置OG数据时，直接在对应页面组件中导出专属的metadata对象即可

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