Nextjs 中 Open Graph 标签放置在哪里

Question

我们有一个下一个项目，我们想要在其中放置 og 标签，以确保我们的链接显示图像和标题。由于我们有文章，我们希望每个链接都有一个特定的标题和图像。所以我们不能添加静态数据，需要为每个页面获取动态数据。然而，没有什么对我们有用。我们想知道在哪里放置元标记才能正确获取数据。

唯一可行的情况是在 _document.js 中添加静态数据。

Answer 1

既然您提到了

_document.js

，我假设您正在使用Pages Router而不是较新的App Router。

在您的情况下，您应该使用

<Head>

组件在页眉内包含标签。您可以将此组件放置在组件树中的任何位置，Next.js 会知道将它们放置在最终 HTML 中的位置。

例如，在您的页面组件中您可以：

<Head>
  <meta property="og:title" content="My Cool Page" key="title" />
</Head>
// Rest of page component...

请注意，

og:title

元标记有一个键表示

title

，这不是必需的，但它可以帮助避免重复标记，如果组件树包含多个相同标记，则可能会发生这种情况。