Update page title tag dynamically

Hello Weweb Community,

I created a dynamic page using this tutorial from Quentin on Youtube: How to create pages dynamically in WeWeb : https://www.youtube.com/watch?v=uAek6r5N9ug&t=147s

I’m wondering if it’s possible to change the title tag according to the REST API the data are coming from.

For now, I tried to bind a collection from the title tag panel in the metadata sub-panel of the page but the only collections that appear are coming from the Airtable data source.

Another idea I had was to plug into the body a document.title = dynamic title at the page level. Which is a solution proposed here : partial solution. But unfortunately, there is no bindable structure that I can operate from there.

Do you have any idea I could experiment with in the meantime?

Thank you in advance,

Hey,

As you’re using dynamic pages, I suggest using a filtered collection or storing the current item in a variable when visiting the page, then, you can bind the meta title here:

Also, there’s now an easier way to create dynamic pages using the path, it’s documented here: How to use the Pages | Weweb documentation

1 Like

Hi Quentin,

Thank you for redirecting me to the new way of creating dynamic pages. I’ve implemented the new logic for page navigation.

In the user journey, the user comes from a page called Villas, then clicks on a specific Villa, where at this stage the page changes while loading data from a REST API and storing it into an object. Basically, as done in the tutorial from the companies page > click on company > fetch company data > store it into a variable (selectedProperty) > display company page + data.

At this stage, everything works but somehow, when I reach the villa page I don’t see appearing the selectedProperty variable in the MetaData Tag, which I would like to use in order to bind the page title on it.

Should I proceed differently to manage this use case?

Here is a video for the context: Loom | Free Screen & Video Recording Software | Loom

But they’re not truly dynamic. They come from a predefined list (static collection) at the time of app build. You can’t yet bind to a dynamic collection.

1 Like

Hi Quentin,

It is impossible to use filters on static collections.

I tried to use the workflow “On page load” with a step that calls a REST API to then filter it based on the id using custom JS and the URL parameter ID of the current villa page and then store it into a variable but it doesn’t appear in the binding.

Only static collections are appearing.

Here is a video of it is : Loom | Free Screen & Video Recording Software | Loom

I would be very happy to have some hacks and tips for this use case!

Thank you

1 Like

To filter static collections, you would need to do this from the backend, as our servers are fetching them during build time, meaning they can’t apply frontend filters.

Otherwise, you could create a dynamic page: How to use the Pages | Weweb documentation but you would have to change the metadata yourself using some JS, as it’s not possible to bind metadata to dynamic pages yet.

1 Like

This doesn’t work really. The updated tags aren’t picked up by crawlers or link previews. Unfortunately.

Okey, thank you Quentin, I’ll try and let the outcome here when ready :slight_smile: