Update page title tag dynamically

[lighthama]

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,

[Quentin]

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

[lighthama]

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

[jaredgibb]

@Quentin

dynamic

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.

[lighthama]

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

[Quentin]

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.

[jaredgibb]

@Quentin

but you would have to change the metadata yourself using some JS, as it’s not possible to bind metadata to dynamic pages yet.

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

[lighthama]

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

[whcmeduk]

I am using weweb to make a dynamic product page, but they now share the same metadata in search engine which is not ideal. Hopefully it can be implemented soon. Is it on the roadmap?

[Joyce]

Hi @whcmeduk

We do not plan to add the feature inside the WeWeb editor yet but… it’s already possible to publish dynamic metadata to dynamic pages of your WeWeb apps.

Here’s a tutorial on how to do this.

It’s a little bit more on the technical side so if you struggle with this, don’t hesitate to create a new topic in the community, sharing screenshots or a video of what you tried, and where you’re stuck.

I hope this helps!

[Jay12]

@lighthama

was to plug into the body a document.title = dynamic title at the page level.

Hi I came across this thread as I was also looking to use custom JS code to update the title given that dynamic meta feature is not working right now.

Issue with Custom Metadata for Dynamic Pages Using Cloudflare Worker

Hello @Jay12 Yes, you will need to wait a bit until we come up with a solution that works for everybody.

I added simple javascript code to the workflow so that this code is executed when page loads but unfortunately it is not working right.

Did anybody manage to implement title update with js?

document.addEventListener(“DOMContentLoaded”, function () {
let newTitle = collections[‘67b01ddc-45f7-4613-a3e2-f963549d6f4d’]?.[‘data’]?.[‘office_name’]+ “test”;
document.title = newTitle;
});

[kanepaamauloa]

From NoCode to WT…Heck?!

This is one of the most basic things, and the solution presented in the documentation looks like a circus.

[kanepaamauloa]

To deploy the Workers, it requires access to Public Repos on GitHub.

My API Endpoint for this requires an API key… which means I would have to expose my API key? That can’t be right…

[dorilama]

workers can be deployed from private repos as well.
you don’t want to save a private key in a file of the repo anyway because is not secure.

you need to use secrets:

Secrets | Cloudflare Workers docs

[kanepaamauloa]

Thanks, @dorilama.

Re: Secrets

• By default, the config.js does not pass the env variable, so using Secrets would require customizing the script.
• It’s also not clear how to actually use secrets inside the config.js - the assumption is that it is loaded into the env variable, but I can’t find anything that confirms that.

Re: Deploy with Workers and Private Access

The Deploy Workflow button is linked to the WeWeb repo of the worker code.
I imagine we need to change this to our Forked Repo URL…?

Well, that’s what I did – mind you, the repo is private, so it is strange to see this permission request actually getting access to the repo itself:

As you can see, it only asks for public repositories.

Running through the process ends in Error

I ran through the GUI version of the deployment sequence, and this is what it ended in.

ERROR…

No details are given why.

Running npm dev deploy

• It seems to have been deployed properly, but no details have been given to verify.
• The interesting thing is that this process does not access an Account ID or API Key, so I’m not even sure if its the same process as the GUI version

It’s a bit disappointing that something this simple, but critical, has been overlooked and thrown into this convoluted process. It’s crucial to SEO and to share on social media and other related platforms. I wouldn’t want to go live without it. So, this is holding up some plans.

Appreciate some help with this from the WeWeb team. @Joyce? @luka? @danlopes?

[dorilama]

the config.js file is just one part of the code. the env can be accessed in the main handler function in src/index.ts.
The ready-made repo cover one main use case, different needs require to change the code and some understanding of the workers.
it’s not nocode anymore but it is very interesting to experiment and learn more about workers.
I think at some point weweb will offer some easier way to do this.

[Broberto]

It seems like this might be redundant as every page should now have Dynamic Metadat cit. @luka at our Discord Broffice Hours.