Next.js 13静态metadata添加自定义Meta标签及Pinterest屏蔽失效问题

你之前用other字段的方式无效，是因为Next.js会给other里的键自动加上other:前缀，生成的meta标签是<meta name="other:pinterest" content="nopin" />，这不符合Pinterest要求的格式，所以无法屏蔽固定选项。

有两种可靠的解决方式：

方式一：在根布局的<head>中手动插入标签 #

直接在app目录的根布局文件（layout.js/layout.tsx）的<head>里写原生meta标签：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 直接添加Pinterest屏蔽标签 */}
        <meta name="pinterest" content="nopin" />
      </head>
      <body>{children}</body>
    </html>
  );
}

方式二：使用metadata的meta数组字段 #

通过Next.js官方支持的meta数组配置，直接定义需要的meta标签：

export const metadata = {
  meta: [
    {
      name: 'pinterest',
      content: 'nopin',
    },
  ],
};

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

这两种方式都会生成符合要求的<meta name="pinterest" content="nopin" />标签，刷新页面后Pinterest的固定选项就会消失。

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