嘿，我之前也碰到过这个需求！Next.js 15 App Router自带的Metadata API确实能轻松生成标准meta标签，但要加像itemprop、http-equiv或者自定义data-*这类特殊属性的标签，其实不用绕远路，直接在现有配置里加个meta数组就搞定了。

具体修改方法 #

在你现有的metadata对象中，新增一个meta属性——它是一个数组，每个元素对应一个你需要的自定义meta标签，任意属性都能在这里定义。我直接把你的代码修改后给你参考：

const meta_name = "XYZ studio";
const meta_desc = `${meta_name}, founded in 2010, provides comprehensive architectural and interior design solutions across all stages of planning, documentation, and construction. Over the years, ${meta_name} has evolved into a multidisciplinary practice where creativity meets precision, transforming ideas into meaningful spaces that inspire modern living.`;

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"),
  keywords: [meta_name],
  title: meta_name,
  description: meta_desc,
  // 新增这个meta数组，专门放自定义属性的meta标签
  meta: [
    // 带itemprop的标签，就是你需要的那种
    { itemprop: "name", content: meta_name },
    { itemprop: "description", content: meta_desc },
    // 带http-equiv的标签，比如设置浏览器兼容规则
    { httpEquiv: "X-UA-Compatible", content: "IE=edge" },
    // 自定义data-*属性的标签，直接写完整属性名就行
    { "data-studio-id": "xyz-2010", content: meta_name },
  ],
  openGraph: {
    type: "website",
    url: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000").toString(),
    siteName: meta_name,
    countryName: "QWERTY",
    images: [
      { url: `/one.png`, alt: meta_name },
    ],
    description: meta_desc,
  },
  robots: { index: true, follow: true },
  authors: [{ name: meta_name }],
  alternates: {
    canonical: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000").toString(),
  },
  icons: [
    { rel: 'icon', type: 'image/x-icon', sizes: '16x16', url: 'https://ssl.gstatic.com/atari/images/public/favicon.ico' },
    { rel: 'shortcut icon', type: 'image/x-icon', sizes: '16x16', url: 'https://ssl.gstatic.com/atari/images/public/favicon.ico' },
    { rel: 'apple-touch-icon', sizes: '180x180', url: 'https://ssl.gstatic.com/atari/images/public/favicon.ico' },
  ] as Icon[],
};

注意小细节 #

• 像httpEquiv这种驼峰命名的键，Next.js会自动转换成HTML里的http-equiv属性，不用手动写短横线；
• 自定义data-*属性直接写完整的属性名（比如data-studio-id）就行，框架会原封不动渲染成对应的HTML属性；
• 如果是动态路由页面，需要根据页面数据生成这些自定义标签，就在generateMetadata函数里返回的对象中加入meta数组，用法和静态配置完全一样。

这样修改后，你的页面HTML里就会出现你需要的所有自定义属性meta标签，而且完全兼容你原来的Metadata配置，不用大改代码～