Next.js 13自定义元标签：如何控制name/property属性？

当然可以实现，针对你提到的og:updated_time这类需要property属性的自定义元标签，有两种直接可行的方案：

方案1：直接渲染原生<meta>标签 #

在App Router的layout.js或page.js中，直接在<head>里手动添加原生<meta>标签，完全自定义属性和内容，不受Next.js内置Metadata API的限制：

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        <meta property="og:updated_time" content="2024-05-20T12:00:00Z" />
        {/* 其他需要property属性的自定义标签也这么加 */}
        <meta property="og:custom_field" content="自定义内容" />
      </head>
      <body>{children}</body>
    </html>
  );
}

这种方式最灵活，想定义什么属性就加什么，完全符合需求。

方案2：通过Metadata API的openGraph字段扩展 #

Next.js的Metadata API会自动为openGraph下的字段生成带property属性的元标签，哪怕是官方没预定义的字段也支持。比如你需要的og:updated_time，可以直接在openGraph里添加updatedTime键（驼峰命名会自动转成短横线格式）：

// app/layout.js
export const metadata = {
  openGraph: {
    title: "页面标题",
    description: "页面描述",
    // 自定义og标签，自动生成property属性
    updatedTime: "2024-05-20T12:00:00Z",
    customField: "自定义内容"
  }
};

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

这段代码会自动生成：

<meta property="og:updated_time" content="2024-05-20T12:00:00Z" />
<meta property="og:custom_field" content="自定义内容" />

为什么other字段不适用？ #

metadata里的other字段是用来处理非规范的通用元标签，默认会使用name属性，所以不适合og:这类需要property属性的标签，直接用上面两种方案就可以解决问题。

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