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
