如何在 next.js 13 中使用静态元数据对象添加自定义元标记

问题描述 投票:0回答:3

所以我知道要在我的网站上阻止 Pinterest,我需要将其嵌入到我网站的标题中

<meta name="pinterest" content="nopin" />
,但我不确定如何在 Next 13 中使用新的导出元数据对象格式来做到这一点?查看了该对象的文档,但无法弄清楚。

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

编辑(4 月 18 日): 我不确定为什么它之前似乎有效,但按照 Mathieu (和文档)的建议添加元标记似乎实际上不起作用。

我的根布局文件中有这个,pinterest 固定选项仍然出现在我的网站上

export const metadata = {
  other: { pinterest: "nopin" },
};
javascript next.js metadata next.js13
3个回答
4
投票

要添加自定义元数据,您可以使用其他类别:

export const metadata = {
  other: { pinterest: "nopin" },
};

下一个构建将生成此元数据:

<meta name="pinterest" content="nopin"/>

更多信息请参见:https://beta.nextjs.org/docs/api-reference/metadata#other


0
投票

我在使用 Snapchat 创意套件时遇到了这个问题。 NEXTjs

metadata
对象不允许添加具有
property
属性的任意元标记(即
<meta property='...' content='..' />

对我有用的解决方案是直接在根布局中添加标签。

export default function RootLayout({ children }: Props) {
  return (
    <html>
      <meta
        property="snapchat:sticker"
        content="PATH-TO-STICKER"
      />
      <meta
        property="snapchat:app_id"
        content="APP-Id"
      />
      {children}
    </html>
  );
}

我相信这适用于任何布局或页面,NEXT 会将您的

<meta />
标签与
metadata
API 生成的内容合并。文档在不支持的元标记

中提到了这一点

-3
投票

看来你只需要把你的代码放在layout.js或page.js中,就像这样:

export const metadata = {
  ...[Your previous meta data, like title, description,...]
  pinterest: "nopin"
};
© www.soinside.com 2019 - 2024. All rights reserved.