head 标签在带有 next/head 的动态页面中不会改变

Question

我正在建立一个电子商务网站，并且正在制作产品详细信息页面。我需要根据产品属性更改页面的元标记。我正在使用 next/head 中的 head 组件。问题是，似乎只有当我使用 chrome 开发工具检查页面时元数据才会发生变化，但是当我选择查看源页面时，它们不会出现。 对我来说，从服务器更改元数据很重要，因为我需要使用 og metas 进行 facebook 共享。 我正在使用 next v9，我正在使用自定义服务器，我还使用 _document 和 _app 预构建页面。

这是我的 _document 页面

这是我的产品详情页面

在 chrome 视图页面源选项中，我只看到文档头部元数据，但看不到产品详细信息页面的元数据。

谁能帮我理解我应该如何使用 head ？我尝试了几个示例，但均未成功。

提前致谢，抱歉我的英语不好。

Answer 1

将key 参数也添加到您的_document.js 元标记中。这些将首先加载，但如果您的 meta 在您的 pages 文件中有匹配的密钥，则随后会被覆盖（服务器端）。

另请注意 - 我认为冒号在 key 参数中的作用不像您在产品详细信息页面中那样，property 也不存在于元标记上。

所以如果你有这样的事情：

// _document.js
<meta key="ogType" name="og:type" content="website" />

...这将是您网页上的默认元标记。但如果你有：

// pages/blog.js
<meta key="ogType" name="og:type" content="article" />

...在博客页面上，og:type 元标记将被使用。