I recently faced an interesting dilemma where I was unable to solution for using dynamic Open Graph metadata for my custom built T-shirt website, F...
For further actions, you may consider blocking this person and/or reporting abuse
Hello Bill, this looks like the thing I am looking for, because I already tried almost everything, and certainly SSR it is quite complex to implement after the project is almost done(in my case), the only thing I did not get was the cheerio part, do an extra config is needed, besides the installation de package? also do you have a simple example repo of this? I was trying to replicate ur steps but it did not work for me. Thank you in advance for reading...
Sure thing - I have an example on one of my websites here :
github.com/doctafaustus/js-bits/bl...
Cheerio can sometimes show some unexpected results so I would say log everything to make sure you're selecting the correct items before you implement.
Amazing, thank you very much, will take a look! Also thanks for the advice :)
Hi @js_bits_bill ,
How do you handle OG meta information from an API? I've been struggling for a week now. If you can help, that would be great.
Regards
Angel
Hey Angel. That definitely adds complexity and may not be ideal since you would need to make a server-side request to the API to get the metadata before serving the page, potentially leading to some performance issues. That said, I'm happy to take a look if you have a link to any working code to see what might be possible.
We're using vue-meta. I also tried following this (github.com/nuxt/vue-meta/tree/1.x#...) but still no luck.
Hey @abernados , I was getting terminal errors trying to start the app but I believe the problem is your app is using the regular client-side Vue framework whereas the guide you referenced is for the Nuxt framework. Since Nuxt allows you to build server-rendered Vue apps, it will allow you to retrieve meta data from an API and serve the assembled HTML but would come at the cost of you needing to switch entirely to that framework.
Hi @js_bits_bill , since we're using regular client-side Vue framework, what do you suggest then? I can't switch the whole project into Nuxt so I'm looking for other solutions.
Yes, your options are limited. You may need to solution for a semi-hardcoded solution like the approach in this article. In any case, you will need to handle the meta data server-side as Vuejs won't be able to intercept document requests to change meta tags.
Okay, thank you for replying.
Hi Bill,
In this example what i understand is that we need to run node server for running UI code. How we can use this code in a situation where we are deploying UI in firebase only using build.
If you can help, that would be great.
Regards
Deepak
Hi Deepak. I honestly don't know what options Firebase would give you to achieve this. Since the meta tags need to be set server-side, you might not be able to change them if they don't have a specific way for you to control this.
Best, Bill
Nice work Bill!
Dynamic OG tags can be a pain in the #%S!
Totally! If I were a more productive man, I'd make an NPM package, but I'm not :)
This is an inspiring approach!
hello Bill i am using vue 3 with nuxt, so I wanna have OG tags on product detail page, i am making og:title and og:desc using url params so no issue with them , perfectly working on social media sharing but the issue is with og:image, i wanna fetch the image from API and set in og:image but it's not making on first render coz API takes 1-2 secs to fetch and set. However after 2 secs the og:image tags get updated but social media sharing shows the first render so og:image has issue. How can i do ssr as i am using nuxt?
Hi Bill.
This is quite interesting. Did you eventually use Vue with it? Vue cdn?
Thanks Bello, I did. Since writing this, I learned about server-sider rendering with frameworks like NuxtJS that would have a solution for this sort of thing but I wanted to keep things simple for my small site so this worked pretty well with my client-side Vue site.