我需要在 NextJS 应用程序路由器应用程序的每个页面上设置 Open Graph URL 吗？

Question

我正在使用 NextJS 应用程序路由器来构建我的 Web 应用程序。我现在正在研究 SEO 和社交预览，其中元数据很重要。

在我的layout.tsx 文件中，我有如下代码：

export const metadata: Metadata = {
  metadataBase: new URL('https://www.oasis-of-ideas.com'),
  title: pageTitle,
  description: pageDescription,
  keywords: [],
  authors: [{ name: 'Author' }],

  openGraph: {
    type: 'website',
    url: '/',
    title: pageTitle,
    description: pageDescription,
    images: [
      {
        url: '/logo-high-res.png',
        width: 500,
        height: 500,
        alt: 'Open Graph Image',
      },
    ],
  }
}

然后在每个单独的页面中，我根据需要更改标签：

export const metadata: Metadata = {
  title: 'Changed title',
  openGraph: {
    title: 'Changed title'
  }
}

现在根据我的理解，opengraph url 标签应该指的是规范 url，在我的简单情况下，它只是当前页面的 url。我希望爬虫查看该页面本身的 opengraph 图像。理想情况下，

og:url

应该是可选的，但我在网上读到它是必需的。为什么需要它似乎有点不直观。

一些问题：

1. 是否明确需要包含 openGraph url？
2. 如果是这样，我该如何为每个 nextjs 页面执行此操作？有什么简单的方法可以做到吗？
3. 我可以在本地预览我网站的社交预览吗？如果没有，部署后我可以使用什么工具来查看它？

我在网上查找，但找不到很多关于此的明确文档。谢谢！

Answer 1

设置

metadataBase

后，可以将

og:url

设置为相对路径。

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  openGraph: {
    url: './',
  },
}