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

Question

I would like to add OpenGraph meta tags to a page of my NextJS app.我想将OpenGraph元标记添加到我的 NextJS 应用程序的页面中。 I added meta the tags inside the <Head> component exposed through next/head .我在通过next/head公开的<Head>组件内添加了 meta 标签。

However, when I tested the OpenGraph data through the Facebook Sharing Debugger and opengraph.xyz , both tools said no og properties were properly set.但是，当我通过Facebook Sharing Debugger和opengraph.xyz测试 OpenGraph 数据时，这两个工具都表示没有正确设置 og 属性。

To investigate, I opened up developer tools on the page and under the 'Elements' tab, all the og meta tags I had set were present under the <head> element.为了进行调查，我在页面和“元素”选项卡下打开了开发人员工具，我设置的所有 og 元标记都出现在<head>元素下。 However, when I hit 'View page source' or made a request to the page through Postman, the og <meta> tags were not there.但是，当我点击“查看页面源代码”或通过 Postman 向页面发出请求时，og <meta>标签不存在。

This makes me think that the elements inside the <Head> element are added by NextJS through javascript once the page is loaded.这让我觉得<Head>元素中的元素是在页面加载后由 NextJS 通过 javascript 添加的。 This would explain why Facebook's crawler does not see the tags, as the crawler likely does not load javascript when crawling links.这可以解释为什么 Facebook 的爬虫看不到标签，因为爬虫在爬取链接时可能不会加载 javascript。

Is there a way to have the meta tags work properly when using NextJS?使用 NextJS 时，有没有办法让元标记正常工作？

Answer 1

It would be easier to help you with a link or snippet of the code.通过链接或代码片段帮助您会更容易。 Maybe it's an issue with duplicate tags, and you can solve this with a key property.也许这是重复标签的问题，您可以使用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>

edit: There's an issue with fast refresh while using withAuthUser() and is reported as a bug in next-firebase-auth roadmap.编辑：使用withAuthUser()时存在快速刷新问题，在next-firebase-auth路线图中被报告为错误。 Maybe its related with your question: https://github.com/gladly-team/next-firebase-auth/issues/265也许它与你的问题有关： https://github.com/gladly-team/next-firebase-auth/issues/265

Answer 2

I was using the package next-firebase-auth , and when I changed我正在使用 package next-firebase-auth ，当我改变

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

})(MyPage)

to到

export default MyPage

the meta tag showed up properly.元标记正确显示。

I will post an update if I find a way to make the <Head> element work properly with the next-firebase-auth package.如果我找到使<Head>元素与next-firebase-auth package 一起正常工作的方法，我将发布更新。

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

问题描述

2 个解决方案

解决方案1
2

解决方案2
0 已采纳 2021-09-27 01:45:32

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

问题描述

2 个解决方案

解决方案1 2

解决方案2 0 已采纳 2021-09-27 01:45:32

解决方案1
2

解决方案2
0 已采纳 2021-09-27 01:45:32