Hi Toby, If I understand correctly, what you’re trying to do is have each page show specific data depending on the item, right?
Option 1: Use a WeWebPageCollection
One way to do this is by creating a WeWebPageCollection, which automatically generates a page for each record in your database. This is great for static content and SEO, because each page is indexed and pre-rendered.
However, this means the collection has to be set to static, so if you update a record or add a new one, you’ll need to:
Refetch the collection, and
Republish the project every time.
That can be a bit of a problem if your app is meant to be dynamic and updated frequently.
Option 2: Use Dynamic Pages with Inputs
Another option is to create a single dynamic page that takes an ID as input.
Then, in the onPageLoad workflow, you can fetch the data from your backend using that ID Page Parameter and have it stored in a collection like currentItem.
That way, the page content is always fresh and dynamic.
The downside? It’s not ideal for SEO, since the content isn’t pre-rendered for crawlers.
Option 3: Use Page Variables
Finally, if you’re navigating from one page to another and already have the data, you could just store the values in a variable (instead of re-fetching them), and bind from there.
This is kind of like using a collection, but handled more manually.
Ignoring the code for a minute – Just having dynamic variables into the structured data section of the meta data of the page is pretty standard. I can do this in webflow, so my question is – is it possible in WeWeb which doesn’t seem to be the case.
So I’ve actually been able to achieve this through a lot of trial and error.
The trick is to create a “coded component” that injects the JSON-LD, as it isn’t possible any other way.
Here is a Ai summary of my working component that achieves this which you can use to prompt with WeWeb Ai to build your own component as needed with schema you desire. You then just make it non visible on the page so it can inject in the background.
Vue component that injects JSON-LD structured data for products into the page's <head>.
What it does:
Creates Schema.org Product markup for SEO
Doesn't render anything visible (hidden component)
Dynamically injects/updates a <script type="application/ld+json"> tag
Required props:
name - Product name
description - Product description
image - Product image URL
price - Product price
priceCurrency - Currency code (e.g., "USD")
Optional props:
availability - Stock status (defaults to "InStock")
url - Product URL
Key features:
Auto-updates the JSON-LD when props change
Cleans up the script tag when component unmounts
Only injects schema if all required fields are present
Uses WeWeb's wwLib.getFrontDocument() for document access
Here is the product and screenshot from Google console showing the schema live and working
I’m not entirely sure if I’m honest why this works, as other methods I tried didn’t work (custom html, custom scripts). It’s all to do with the lifecycle of the app of content sequentially loads. Something along these lines:
The component works by using Vue's lifecycle hooks to inject a <script type="application/ld+json"> tag directly into the document head via wwLib.getFrontDocument(), which Google's crawler detects during its JavaScript rendering phase despite being added post-initial-load.
SSR is what we truly need however, which is getting focus by WW in Q4 2025 as it’s on the roadmap.
Hey What Gift, just stumbled the same wall as you.
I understand this may not be the ideal option since it’s not a native integration, but what do you think about the option I mentioned in the following post? →
I don’t think it’s because you can’t inject into the header, which you can do with the custom HTML script, it’s the lifecycle part and access to dynamic data at runtime for crawlers that’s the issue.