Overriding page head metadata from code

You can set page-level metadata from within Plasmic Studio, and for certain frameworks including Next.js, this will be used in the final rendered page head correctly by default.

(Note that this metadata is available as part of the fetchComponentData() response. So for arbitrary other environments and frameworks, you can make use of the data however you’d like. See the API reference.)

However, if you want your code to override what gets set in head, you can do so. This is useful for if you want that metadata to be dynamically generated, for instance.

Plasmic generates meta tags using the key prop to allow users to easily replace them (as stated in Next.js docs).

Here’s a concrete example of the code that Plasmic generates inside a page component (which you as a user normally don’t need to see):

Copy

<Head>
  <title key="title">{title}</title>
  <meta key="og:title" property="og:title" content={title} />
  <meta key="og:description" property="og:description" name="description" content={description} />
  <meta key="og:image" property="og:image" content={image} />
</Head>

To replace one of the meta tags, the user needs to add a Next.js Head component and meta tag with the same key.

If using the Headless API, simply specify the meta that you want:

Copy

export default function MyPage(props: { plasmicData: ComponentRenderData }) {
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={props.plasmicData}>
      <PlasmicComponent component="COMPONENT_OR_PAGEROUTE" />
      <Head>
        <meta key="og:title" property="og:title" content="My override of title" />
      </Head>
    </PlasmicRootProvider>
  );
}

If using codegen, add this to the wrapper component.

Copy

export default function MyPage() {
  return (
    <>
      <PlasmicHome />
      <Head>
        <meta key="og:description" property="og:description" name="description" content="New description" />
      </Head>
    </>
  );
}

Was this page helpful?

Have feedback on this page? Let us know on our forum.