We are a Saas based Email Marketing company called Mailmunch. We have a web application that we have provided to third-party clients (called partners) who can use our application as their own product with their own domains, color themes, API endpoints, etc.
Currently, we have hard-coded our Open Graph Meta Tags in the index.html file, (eg. og-image, og-title). We want to change this title and a few other tags based on any of our partners’ web domains. However, since our website is rendered on the client-side, it is not straightforward to do this.
We are exploring whether we can achieve this through Netlify’s SSR (Server-Side Rendering) functionality. We have tried using Netlify’s Functions, but that did not allow us to generate the OG Tags dynamically on the server-side.
@taha.m I’m probably just misunderstanding, but I’m confused by what the actual limitations are.
If the page is being rendered at runtime on the client side, why isn’t it straightforward to have the meta tags generate dynamically?
If you’re generating page responses with functions, why were you unable to have those responses contain dynamic meta tags?
It strikes me as the kind of thing there could be many solutions for, and you’d just need to engineer and implement one that satisfies your requirements and the systems being used.
Currently, we have hard coded the OG Meta Tags (so same for each website). And if we share the urls I mentioned above on social media platforms like Twitter, Facebook, etc, the preview we get for each of these websites is same.
We want this to be dynamic. Whenever we paste the Appflows url, we want to get a unique image, title and desc of Appflows and likewise different for Mailmunch.
We would love to know if we could change them dynamically before the client code is rendered, basically on the server side. So which means the tags are already what we want are and we won’t need to change them at run time on the client side.
@taha.m Sorry, perhaps I wasn’t clear enough, I understand exactly what you’re trying to do.
What I don’t understand is what issues/limitations you’ve run into that have seemingly prevented you from already achieving it.
As you mention things like “it isn’t straightforward to do on the client side”, and that you failed to achieve it using functions.
I’m wondering why that was the case, since both of those approaches seem like they would work to me.
We also may be mixed up on what you mean by “client side” too, as you may be referring to your client (Appflows), instead of the traditional usage of the term, which would be for “executing in the users browser” e.g. an SPA that generates the HTML at runtime in the users browser.
When looking for solutions, I couldn’t get anything concrete enough.
When I used Netlify Functions, I sent my current URL, and based on that URL we would get the response of the title, image, and description we want to set for each website. But that isn’t an efficient as the website is loaded first and then we get a response from the functions to update the meta tags.
Also, the updated OG meta tags are also not read by the social media platforms, which generate the tags which are already hard coded in the index.html.
Is there a way where we could render the entire code of the app from the Netlify Functions? This way we could update the title first and then sent the HTML to the browser/user. So we don’t update them after the client has been rendered.
@taha.m The dashboard. subdomain of both sites displays an SPA, which appears to be the same code when using “view source” to look at the initial markup.
Yet the sites look visually different, so something is causing them to render different HTML markup (and styling), based on where they’re executing, seemingly at runtime, in the users browser.
Why can whatever system you’re using for that, not just generate the appropriate meta tags?
As both @nathanmartin and I have explained, this is framework centric and can easily be completed via lambda functions with nexts, sveltekit, remix etc…
Since this is not related to Netlify’s functionality itself, there is nothing more netlify related we can offer you. Like I said, make a search with your framework and dynamic OG images
@taha.m On one of my projects I need to implement this functionality, and I know exactly what you mean when you say that it is not straightforward to do this for client rendered apps, that is apps that run the browser without designated SSR (the built server files provided by the framework).
The issue that I ran into which is specific to the framework that I am using is that while the tools that they provide do allow me to change the meta tags dynamically, the changes do not affect the source code of the page - the static index.html does not reflect the JS changes. And those tools apparently are meant to be used with the framework’s SSR.
What I found interesting was that both your pages - when viewing the source - I already know your are using a different framework and saw some JavaScript, please have a look at the article and tell me if this is useful to you or if you have found a better solution, thank you.
