Meta tags with codegen Next.js not showing up

Developer Support
1

hey friends!
Trying to use the meta tags feature with our Codegen Next.js project. I see the keys are defined correctly in the Studio and I can see them synced in the Plasmic-owned files. But the pages coming out of build don’t have the meta tags there!
Could this be because we’re using PlasmicRootProvider from react-web instead of loader-nextjs?

image.png
image.png695×451 69.5 KB

2

Hi! What do you mean by “pages coming out of build”? How are you trying to reference the tags?

3

Thanks for the reply Chung!

I’m defining the meta-tags via Plasmic Studio’s page settings

I then sync the project via Codegen and can see the page component has the metatags as part of the metadata (as seen in the screenshot above)

But when I run next dev or next build; next start the rendered pages don’t have those meta tags inside <head>

Should we configure something special to pull those metatags and render them? Was following this guide which references next/head but seems like it has a Headless-based example, not sure if Codegen is different

4

if Codegen doesn’t support meta tags, I was thinking of creating a Code Component that can be dragged into the Plasmic Studio page and render next/head with content coming from props

5

oh! eek sorry, those “metadata key-value” are not actually <meta /> tags… didn’t realize this confusing collision on names!

you can define arbitrary key-value “metadata” about the component there; and you could use this mechanism to build meta tags. For example…

function App({Component, pageProps}) {
  return (
    <>
      {Component.metadata && (
        <Head>
          {Object.entries(Component.metadata)
            .map(([key, val]) => 
              <meta key={key} name={key} content={val} />
          )}
        </Head>
       )}
      <Component {...pageProps} />
    </>
  );
}
6

ah I see the confusion, my bad!

that’s a great idea, consuming the metadata directly and printing it in the layout. let me give it a try

thanks!