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

I would like to add OpenGraph meta tags to a page of my NextJS app. I added meta the tags inside the <Head> component exposed through next/head.

However, when I tested the OpenGraph data through the Facebook Sharing Debugger and opengraph.xyz, both tools said no og properties were properly set.

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. However, when I hit 'View page source' or made a request to the page through Postman, the og <meta> tags were not there.

This makes me think that the elements inside the <Head> element are added by NextJS through javascript once the page is loaded. This would explain why Facebook's crawler does not see the tags, as the crawler likely does not load javascript when crawling links.

Is there a way to have the meta tags work properly when using NextJS?

CodePudding user response：

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.

{/* 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>

CodePudding user response：

I was using the package next-firebase-auth, and when I changed

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

})(MyPage)

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.