How to add SEO metadata for dynamic pages?

Plasmic Studio Questions
1

Is metadata still the recommended way to insert SEO data to the page? It would be kind of a pain to create those for all dynamic templates,

https://docs.plasmic.app/learn/page-head-metadata/

I was hoping with the new dynamic pages feature, we would be able to do some dynamic SEO out of the box.

2

Yes, you can do this - it’s a bit kludgy at the moment, but you can insert a Head component anywhere under your data fetcher

See this video:

https://www.youtube.com/watch?v=BxkttuUOUQg

3

Ahh… I saw this video 3 times and missed that component bit!

4

BTW, I’m getting a typescript warning here. Using the latest versions of all plasmic packages.

Just a warning though… nothing more

Type '{ children: Element; loader: NextJsPlasmicComponentLoader; prefetchedData: ComponentRenderData; prefetchedQueryData: Record<...> | undefined; pageParams: Record<...> | undefined; pageQuery: ParsedUrlQuery; Head: ({ children }: { ...; }) => Element; }' is not assignable to type 'IntrinsicAttributes & Omit<{ loader: PlasmicComponentLoader; globalVariants?: GlobalVariantSpec[] | undefined; ... 11 more ...; pageQuery?: Record<...> | undefined; }, "Head">'.
  Property 'Head' does not exist on type 'IntrinsicAttributes & Omit<{ loader: PlasmicComponentLoader; globalVariants?: GlobalVariantSpec[] | undefined; ... 11 more ...; pageQuery?: Record<...> | undefined; }, "Head">'.ts(2322)

image.png

5

I’m having trouble reproducing this.

Do you see an error when you just do create-plasmic-app or try the example from https://github.com/plasmicapp/plasmic/tree/master/examples/plasmic-cms-nextjs?

(My guess is that this could be due to another package, old Typescript, or something else…)

6

So I started a new project with yarn create palsmic-app and still getting this warning

image.png
image.png1212×317 38.1 KB

7

I think I’ll just have to make do with @ts-ignore for now. Seems like a configuration issue which I don’t want to touch right now.

8

ts-ignore always works - you can also try comparing the versions of packages in yarn.lock or package-lock with some known-good ones from a create-plasmic-app that runs on github’s servers: https://docs.plasmic.app/learn/quickstart-gui/