In my project, I have a dynamic page (/case/[slug]) that uses a Page Metadata Override component and graphQL integration to load dynamic values for its Open Graph meta image, title, and description.
I wrapped all the dynamic values loading items in a loading boundary to first show users a blank version of the website. The Loading Boundary works like a charm when all things using the integration query are inside of it (including the Page Metadata Override component).
However, it seems that the metadata doesn’t actually work!
I can successfully see the generated meta code on the website,
but they don’t show in actual opengraph previews. (for example, this
og dev tool shows them empty)
I tried
- moving just the Page Metadata Override outside of the Loading Boundary
- using a non-dynamic value for the Page Metadata Override
but the meta data in actual previews still doesn’t seem to show 
I have a (different project that also has a Dynamic Page with Page Metadata Override and Graphql integration but no loading boundary, where it seems to successfully show meta preview (og dev tool preview)
It seems these users also had the same issue: Metadata issue Dynamic Pages - #16 by apurba_shakya
Is this issue caused by the Loading Boundary, and if so, is there no in-Plasmic editor solution, and that I would have to add code to prefetch the query?
Metadata issue Dynamic Pages - #25 by fmota
Relevant links:
It doesn’t work, I had these same issues for over a year, none of the resolutions provided were fruitful even their support call was not helpful. Gave up on it 6 months ago. We use webflow, it is better and pricing is also reasonable.
@leafer_design I noticed you have an app host configured
Do you use Next.js or plain React?
For page metadata override to work properly, you’d need to make sure that SSR (or SSG) is set up correctly, so that all of your metadata is present in the initial server response
As a sidenote - we currently work on adding the functionality to set dynamic values for the page metadata (including og tags) out of the box within the studio.
@jason fyi
1 Like
Yes, it’s a Next.js project generated by Plasmic (2-3 years ago) and hosted in GitHub/Vercel.
I’m not aware if I somehow adjusted the ISR/SSR/SSG in any way, but this is what was shown during a recent deployment:
[16:02:13.817] Route (pages) Size First Load JS Revalidate Expire
[16:02:13.817] ┌ /_app 0 B 142 kB
[16:02:13.817] ├ ● /[[...catchall]] (20033 ms) 907 B 143 kB 1m 1y
[16:02:13.817] ├ ├ /zh-TW/service/_business-plan (2850 ms)
[16:02:13.818] ├ ├ /zh-TW/services (2754 ms)
[16:02:13.818] ├ ├ /zh-TW (2753 ms)
[16:02:13.818] ├ ├ /zh-TW/join-us (2314 ms)
[16:02:13.818] ├ ├ /zh-TW/service/workshops (2166 ms)
[16:02:13.818] ├ ├ /zh-TW/policy (1973 ms)
[16:02:13.818] ├ ├ /zh-TW/happy-year (1973 ms)
[16:02:13.818] ├ └ [+5 more paths] (avg 650 ms)
[16:02:13.819] ├ ○ /404 180 B 142 kB
[16:02:13.819] └ ○ /plasmic-host (402 ms) 432 B 142 kB
[16:02:13.819] + First Load JS shared by all 142 kB
[16:02:13.819] ├ chunks/framework-c9205c11e0d18a1a.js 66.7 kB
[16:02:13.819] ├ chunks/main-dbf424e7fe87b18d.js 33.3 kB
[16:02:13.819] ├ chunks/pages/_app-fbbf47aaf93f4bc4.js 40.8 kB
[16:02:13.819] └ other shared chunks (total) 1.53 kB
[16:02:13.819]
[16:02:13.819] ○ (Static) prerendered as static content
[16:02:13.819] ● (SSG) prerendered as static HTML (uses getStaticProps)
Look forward to that ability to set dynamic metadata without the additional component! 
@leafer_design can you try moving query outside of loading boundary?
I think that’s the root cause of it not working. Data should already be there, because it’s loaded during the SSR phase
Query component can wrap the LoadingBoundary in this case, or be outside of it, try if one of these setups works
