Include <head> elements/metadata in page source.

Developer Support
1

Hey all,

How do I get page metadata included in the page source: https://tinyurl.com/nhzu8456?

The hydrated page obviously includes metadata etc but the page source has none. Because of the above, the opengraph image and page title doesn’t appear when sharing on social networks and this is a major issue.

I’ve attempted to follow steps to prerender the pages in codegen but really struggling, so please offer any assistance if you have advice!

2

Hey @tom_prest-drawbridge,

For the dynamic metadata to be included in the initial page for crawlers, it needs to be generated on the server.
Have you tried adding getStaticProps with extractPlasmicQueryData? You can find our docs here: Codegen Guide: Pages | Learn Plasmic

3

I’m really struggling to work this out. Sorry, my dev knowledge only goes so far.

If this is my index.tsx, how would I go about making it render at build? I’m not even initially talking about dynamic data (though this would be good to know also) I just want to start by making sure that the static data is on my page source. Right now, it’s pretty much empty.

import * as React from "react";
import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/react-web/lib/host";
import GlobalContextsProvider from "../components/plasmic/website/PlasmicGlobalContextsProvider";
import { PlasmicHomepage } from "../components/plasmic/maerifa_solutions/PlasmicHomepage";
import { useRouter } from "next/router";

function Homepage() {

  return (
      <GlobalContextsProvider>
        <PageParamsProvider__
          route={useRouter()?.pathname}
          params={useRouter()?.query}
          query={useRouter()?.query}
        >
          <PlasmicHomepage />
        </PageParamsProvider__>
      </GlobalContextsProvider>
  );
}

export default Homepage;
4

@icaro_guerra If you’re able to guide me through just the static content before explaining the dynamic content that would be helpful!