如何让 og: meta 标签在 NextJS 中正常工作？

Question

我要补充 OpenGraph meta tags to a page of my NextJS app. I added meta the tags inside the <Head> component exposed through next/head.

但是，当我通过 Facebook Sharing Debugger and opengraph.xyz 测试 OpenGraph 数据时，两个工具都表示没有正确设置 og 属性。

为了调查，我打开了页面上的开发人员工具，在 'Elements' 选项卡下，我设置的所有 og 元标记都出现在 <head> 元素下。但是，当我点击 'View page source' 或通过 Postman 向页面发出请求时，og <meta> 标签不存在。

这让我觉得 <Head> 元素中的元素是在页面加载后由 NextJS 通过 javascript 添加的。这可以解释为什么 Facebook 的抓取工具看不到标签，因为抓取工具在抓取链接时可能不会加载 javascript。

有没有办法在使用 NextJS 时让元标记正常工作？

Answer 1

使用 link 或代码片段会更容易帮助您。也许这是重复标签的问题，您可以使用 key 属性.

来解决这个问题

{/* Example */}

<Head>
...

{/* Twitter */}
<meta name="twitter:card" content="summary" key="twcard" />
<meta name="twitter:creator" content={twitterHandle} key="twhandle" />

{/* Open Graph */}
<meta property="og:url" content={currentURL} key="ogurl" />
<meta property="og:image" content={previewImage} key="ogimage" />
<meta property="og:site_name" content={siteName} key="ogsitename" />
<meta property="og:title" content={pageTitle} key="ogtitle" />
<meta property="og:description" content={description} key="ogdesc" />

...
</Head>

编辑： 使用 withAuthUser() 时存在快速刷新问题，在 next-firebase-auth 路线图中被报告为错误。也许它与你的问题有关： https://github.com/gladly-team/next-firebase-auth/issues/265

Answer 2

我正在使用包 next-firebase-auth，当我更改时

export default withAuthUser({
    whenAuthed: AuthAction.REDIRECT_TO_APP,
    whenUnauthedBeforeInit: AuthAction.SHOW_LOADER,
    whenUnauthedAfterInit: AuthAction.RENDER,

})(MyPage)

到

export default MyPage

元标记正确显示。

如果我找到使 <Head> 元素与 next-firebase-auth 包一起正常工作的方法，我将 post 进行更新。

如何让 og: meta 标签在 NextJS 中正常工作？

How can I make og: meta tags work properly in NextJS?

javascript

facebook-opengraph

next.js